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

{ 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.

Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!
As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When…leaverou.github.io

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

draw.io
draw.io is a free online diagramming application and flow chart maker for workflow, BPM, org charts, UML, ER, network…www.draw.io

{ 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.

Paparazzi!
Paparazzi! 0.6.x requires Mac OS X 10.6.8 or later (current version: 0.6.7).derailer.org

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

Makeappicon
Makeappicon resizes and optimizes your icon designs into all formats needed for iOS and Android mobile app!makeappicon.com

{ Web } Test your website at different screen resolutions.

Screenfly / Test Your Website at Different Screen Resolutions
Test your website on any screen size including desktops, tablets, televisions, and mobile phones.quirktools.com

{ 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.

Ultimate CSS Gradient Generator from ColorZilla
A powerful Photoshop-like CSS gradient editor from ColorZilla. News: version 4 is here - radial and diagonal gradients…www.colorzilla.com

{ 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).

Fontface Ninja
Explore fonts within a website, try and download them !fontface.ninja

{ 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.

Stylify Me
Stylify Me was created to help designers quickly gain an overview of the style guide of a site, including colours…stylifyme.com

Elina Kapanen

Email me when Elina Kapanen publishes or recommends stories