9 Extremely Useful Free Web Apps for Designers



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.

PXtoEM

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

COLOURlovers

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.

WhatTheFont

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

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

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.

TinyPNG

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!

CSSmatic

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.

CodePen

CodePen is a service that allows you to build, test, and share your code with others. It works by allowing you to edit front-end code in three different columns (HTML, CSS, and JavaScript) with a realtime preview below. This is great for small projects or teaching someone a coding trick because you don’t have to edit and upload three separate files every time. Plus it’s as easy as giving someone a URL to share the code!

Animatron

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?

Share This Post

About Garett Southerton

Garett Southerton works as a web & graphic designer, audio engineer, writer, and brand consultant with clients from all over the world. He runs a design & recording studio based in New York and has a passion for all things art in addition to helping others learn how to create.

Visit Garett Online:
Garett Southerton on Facebook Garett Southerton on Twitter Garett Southerton's Website

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>