Let’s face it, sometimes designing is a lot of work because you can’t find the right font or need to work around a specific limitation like Flash. Every designer has been there at one point or another and I know firsthand how frustrating that can be. I’m going to try to help relieve some of those issues in this series that highlights free web apps accessible to all designers no matter their operating system.
For the first edition in this series I will just give a general outlook on some of my most used web apps (that are available for free). In future editions I’ll narrow it down into specific categories such as tools for color or typography.
Using pixels in CSS is becoming a rarity because using EM/REM allows for more flexibility in responsive web design. This dead simple tool lets you put in your site’s base size and converts pixels to EM. I won’t lie and say it’s the prettiest tool. The site looks outdated and I’ve seen some more attractive options, but there are two features that drive me to keep using PXtoEM; their chart shows quick conversions to em, percent, and points and the fact that it also converts in reverse EM to PX (which all the alternatives I’ve found don’t).
Have you ever been struggling to find the perfect color scheme for a project? Meet COLOURlovers, a community aimed to help you never struggle again. COLOURlovers has a wide variety of palettes and colors that allow you to gather inspiration or borrow from. What’s neat is they also have a spot on their site that shows the branding color trends of popular companies like Kickstarter and Etsy.
Probably the most well known web app on this list, WhatTheFont aims at helping designers identify a font they’ve seen being used. It works by uploading an image with the font you’re looking to match and letting WhatTheFont search their database. It’s not always perfect, but 7/10 times you’ll get the font you want or one that looks close enough.
Identifont is a bit similar to WhatTheFont yet different enough to be on this list. I think Identifont is most handy when you’re looking to find an alternative to a specific font you already know. Their “Fonts by Similarity” tool lets you input the name of a font and find alternatives that have similar structures. This is very useful if you can’t afford a specific font and need a free/cheaper alternative.
JPEGmini is an awesome tool that shrinks the size of .JPG files without any noticeable loss in quality. This is extremely useful for all web designers to keep site loads down. I took the header image for this post and shrunk it from 332KB to 171KB using JPEGmini. While it is free to “try” (read: no limits on how many compressions) on the web interface, if you find JPEGmini useful consider buying the native app.
Essentially TinyPNG is to .PNG files what JPEGmini is to .JPG files. With the use of transparent .PNG images increasing in modern web trends it is ever more important we get those file sizes down for faster load times. TinyPNG works flawlessly. Oh and it’s also completely free!
CSS3 is adding many new possibilities for web designers allowing us to do things we previously couldn’t without images like gradients. CSSmatic is a generator to help designers that aren’t up-to-date on the new codes take advantage of CSS3. CSSmatic has four specific generators; border radius (rounded corners, circles, etc.), gradients, noise texture, and box shadow. The best aspect to their generators is that as you tweak the settings, the preview updates with the code in realtime – which means you can learn how to code this yourself while experimenting.
While my dislike for Flash has driven me far away from animation since my early days of design, I’ve had a peaked interest in using HTML5 to animate. Animatron is a web app that allows you to animate vector and SVG for free – with no signups! The interface is dead simple and will be recognizable to any designer who has ever used Adobe Flash or any similar app.
What app did you find most helpful in my list? What category of free web apps would you like to see in the future?