All that useful stuff that improves your productivity or helps you as a designer

Elina Kapanen
2 min readAug 29, 2014

{ Web } Find out the contrast ration between your website’s text and background. W3C reccommends that it should be at least 4.5 to have a good readability.

{ Web } Need to draw UML schemes or explain any process to the developer?

{ Application, Mac } Take a screenshot of your website in full length. No need of photoshopping your website’s screenshot together. You can pick from different resolutions or choose a custom one. This program allows you to interact with the website too and take screenshots of modals etc.

{ Web } Make all the needed sizes of your icon for iOS or Android with just one click. Supports png, jpg, psd as an input.

{ Web } Test your website at different screen resolutions.

{ Web } Make a smooth gradient and get the css for all browsers. Not a big fan of gradient, but as a darkening layer on images it’s nice.

{ Broswer extension; Chrome, Safari } You like some website’s typography? With this Chrome extension you can find out the fonts used on a page. It also has some other nice features (read from the webpage).

{ Web } Just enter an url and gain an overview of the style guide of a site, including colours, fonts, sizing and spacing. Useful to check your own things too — if the greys are exactly the same color etc.



Elina Kapanen

Creating through different mediums and being curious about the world and humans • Lead Product Designer @ Speakly