Who doesn’t love free stuff?! Especially when it comes to work tools!
If you’ve started down the path of becoming a designer, you’ve probably already realized there are tons of useful services, resources, and tools that can greatly simplify your workflow and daily tasks.
Sure, many of them will cost you a bit, but most of these tools are worth every dollar. However, we’ll talk about paid tools another time—today, I’d like to introduce you to some of the best free tools for web design.
FREE TOOLS FOR WORKING WITH COLOR
Adobe Color CC
Formerly known as Kuler, this tool has served designers well for many years. When it comes to working with different UI elements, this tool helps you choose colors and shades. You'll see for yourself how useful Adobe Color CC's palettes are as you work. If you’re aiming to create truly stunning projects, this tool will be indispensable.
Pictaculous
One of the most important aspects of web design is the color palette—you need to ensure your images, graphics, fonts, and colors communicate your message effectively and might even improve conversion. How many times have you searched for the perfect shade of blue or red to match a photo? Pictaculous helps with that. Just upload your image and it will suggest matching colors, complete with hex codes. Your color palettes will never be inconsistent again.
ColorZilla
ColorZilla is a fantastic tool for color-related tasks—ranging from basic to advanced. If you need to grab a hex code for a specific pixel, analyze the color of a DOM element, or see details like tag name, class, ID, and size, this tool has you covered. It’s available as an extension for both Google Chrome and Firefox.
Paletton
A very easy-to-use app that not only helps you find the right shades to complement a base color, but also shows you examples of how those colors might look on a webpage in different styles—monochromatic, dark, analogous, etc. One interesting feature is the “vision simulation,” which lets you preview the palette as it would appear to someone with visual impairments or color blindness.
FREE TOOLS FOR FONTS
Font Combinations
Sometimes it takes hours to find the perfect font pairing for your next project. This tool saves you time by helping you discover beautiful font combinations. It even shows real examples of websites using similar font pairings so you can better visualize the end result.
Google Fonts
If you’re looking for high-quality typography for your next design, Google Fonts is a great place to start. This web font catalog is easy to use and lets you embed fonts into your site in seconds or download them to your computer for later use. All fonts are free to use and can be customized, edited, and improved however you like.
WhatFont
How often do you browse the web and come across a font you’d love to use in a project? Trying to identify it can feel like finding a needle in a haystack. But that’s no longer a problem thanks to WhatFont. Just install the extension in your Chrome or Safari browser, then hover over any text with the font you like, and it will instantly show you the font name and details so you can find and download it easily.
Tiff
Ever been stuck choosing between two almost identical fonts? Tiff lets you overlay two fonts to easily spot the differences. You can even choose specific letters to compare and toggle between uppercase or lowercase. The tool currently supports all Google Web Fonts and system fonts.
CROSS-BROWSER WEBSITE TESTING
Browsershots
Probably the most comprehensive cross-browser testing tool available today. It supports nearly all browser versions for Windows, Linux, and BSD. You’ll even find browsers you’ve never heard of. By default, it tests the latest versions, but older ones are also available. Just note: the more browsers you select, the longer the test will take.
Lunascape
Lunascape is a Windows browser with a triple-rendering engine. It uses WebKit (Chrome/Safari), Trident (IE), and Gecko (Firefox), allowing you to view your website in all three engines side-by-side for comparison. While not a traditional cross-browser testing tool, it’s still very useful for designers and developers. You can download it in Russian or use it as a Firefox extension with Firebug to debug compatibility issues.
To be continued...