Skip to main content Accessibility Feedback

17 Free Resources for Web Designers

Here’s a list of tools and resources I use on a fairly regular basis that make my job easier…

Essentials

1. Gedit

Gedit is my go to editor. I know there are a handful of wonderful options out there, but Gedit is free and cross-OS. It features line-wrapping and a highlighting system that makes it much easier to read my code.

2. Kuler

Kuler is a fantastic (and free!) resource from Adobe that makes creating a color palette much less painful. With Kuler, you can upload images and extract colors from them. I love using photos I’ve taken as inspiration for my palettes.

Kuler can also create a palette for you from a base color using color theory. Find complementary colors, monochromatic themes, shades and more with a single click. Kuler provides RGB, CMYK, hex and more!

3. PowerPoint, Keynote or Open Office

Nowadays I typically go from rough paper sketch straight to HTML, but if I do wireframe or create a comp, I create it in PowerPoint.

It’s fast and efficient, and if you can create it in PowerPoint, you can create it in HTML.

4. ConvertICO.com

Together with PowerPoint, simply the easiest way to create favicons.

Fonts

5. Font Squirrel

Font Squirrel rocks for two reasons. First, they’ve got an awesome collection of free, commercial use fonts. I’m not saying there aren’t any bad fonts there - there are - but there’s a much higher density of quality ones, too.

Font Squirrel also has an amazing @font-face generator that will turn your web-licensed font into a complete kit ready for embedding on the web.

6. IcoMoon

IcoMoon is a very cool web app you can use to build customized icon fonts. Image icons often look terrible on the new iPad’s retina display. The icons generated by IcoMoon are actually a font set, so they look great no matter how big or small they are, even on a retina display.

Because you can create a font set with just the icons you need, the embedded font set is small and easy for browsers to download. And because it’s a font, you can control icon styling using CSS!

7. The Font Matrix

Richard Rutter has created a regularly updated matrix detailing which fonts are available on what operating systems. A great tool when to have when you’re putting together font stacks.

8. Revised Font Stacks

Amrinder Sandhu provides a thoughtful list of essential font stacks, based on font-share statistics and typographical similarities. If I’m being honest, I’m more likely to use this list than I am the font matrix.

9. What font?

Ever fall in love with a font on someone’s website and wonder what it was? The “What font?” bookmarklet will tell you the font stack, size, line height and color.

Testing

10. Responsive Web Design Test Page

This handy bookmarklet loads your website in a series of iframes of different dimensions. While it’s no replacement for true cross-device testing, it’s a great way to quickly see how your site will look on a variety of screens.

11. IE Tester

Unfortunately this freeware requires Windows, so I have to boot it up on my virtual machine, but it simulates browsing on every version of IE from 5 through 10 beta. It’s a quick and easy way to test a myriad of Internet Explorer versions.

Hat tip to Chris Coyier of CSS Tricks for this one.

12. Color Oracle

Ever wonder what your site looks like to someone who’s color blind? How easy to see are those links?

Accessibility matters. Color Oracle simulates the appearance of your website to someone with a few types of color blindness. A must-have for the modern web designer’s toolkit.

Hat tip to Andy Rutledge.

Frameworks

13. Meyer's CSS Reset and Normalize.css

There’s an ongoing debate in the web design community over whether you should use a reset (which resets a variety of elements across browsers), normalize (which instead attempts to ensure cross-browser consistency), or nothing but smarter css choices.

I currently use a modified version of Meyer’s CSS Reset that combines just a couple of more useful elements from Normalize. Here’s the code I use…

/* Resets everything */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 100%; font: inherit; vertical-align: baseline; }

/* Helps older browsers recognize new HTML5 semantics */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/* Forces a scrollbar on short pages to avoid jumpy looking pages. Fixes font-resize issues in iOS and Windows Mobile */
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

/* Sets pages height to 100%. Required to keep footer from showing up in the middle of the page on shorter pages. */
html, body { height: 100%; }

/* Corrects inline-block display not defined in IE6/7/8/9 & FF3 */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

/* Prevents modern browsers from displaying 'audio' without controls. Remove excess height in iOS5 devices. */
audio:not([controls]) { display: none; }

/* Addresses outline displayed oddly in Chrome. Improves readability when focused and also mouse hovered in all browsers. */
a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
a:hover, a:active { outline: 0; }

/* Improves image quality when scaled in IE7 */
img { -ms-interpolation-mode: bicubic; }

/* Removes most spacing between table cells */
table { border-collapse: collapse; border-spacing: 0; }

14. Bootstrap

Bootstrap is a massive web app framework from the fine folks of Twitter. It uses a 12 column, 960 pixel grid, and comes with built-in responsive design, a massive library of CSS and javascript functionality, and a cool assortment of icons.

I rarely use something like this, just because it’s so big and bloated for what I normally need. But I did Bootstrap to build an internal web app recently, and it sped up development time by quite a bit.

15. Go Code Things

If you’re new to web design, Go Code Things is a free WordPress theme I created to teach beginners how to build websites. Almost every line of CSS and HTML are document within the code itself, so you can learn by doing.

It’s a responsive layout built on HTML5 and CSS3, and comes with a simple icon pack to get you started.

Learning

16. A Practical Guide to Designing for the Web

If you’ve been doing this a long time, you might not get as much out of this book, but Designing for the Web by Mark Boulton is a great primer on all things graphic design for the web.

Mark covers grid-based layouts, typography, color theory and more. A lot of this information can be found on Mark’s blog, but having it all in a single resource is awesome.

17. Design View and Design Professionalism

These two websites, both by Andy Rutledge, could easily fill up a week of reading. In fact, I actually read everything posted on both of them while I was on vacation a few months ago.

If you’re truly in the design business, whether working for yourself, at an agency, or as an in-house designer in a company, Andy’s articles are a must read.

Bonus: 18. Dive Into HTML5

If you’re unfamiliar with HTML5, and looking to get started, this comprehensive book by Mark Pilgram is available in its entirety for free online. It’s written in (mostly) plain English, and provides a really nice overview of what’s new, what’s not, and how to get started.

Conclusion

In addition to everything listed above, my favorite set of tools are a pen and a sheet of paper. That’s where it all starts for me.

What are your essential web design resources?