20 Really Useful Cheatsheets for Web Designers

Whether you’re a Tokyo, San Francisco, or website design Toronto firm, it’s about time that web designers put away the old textbooks and endless technical manuals and used a better, more simple method of keeping track of information related to web design – some kind of reference that allows them to find what data they need quickly, without going through endless resources that wastes time and energy.

I am not the only person to think so, which is why an enormous number of cheatsheets have been created by people who are eager to provide such lists for other designers to reference quickly. Knowing the shortcuts and loopholes in web programming processes can help create a maximum effective and efficient computer professional. Degrees like an like an instructional technology certification are designed to teach students these shortcuts so that they can carry them on to the professional workplace

The problem is that there are so many, and a lot of them are not as complete or useful as they could be. That is why I went through hundreds to come up with a core list of 20 of the best, within five categories: usability, accessibility, CSS, typography and color.

Usability

1. Web Site Usability Checklist
When you need a really quick reference for usability testing, this is a good one. It has a simple, five-point system with full explanation that helps you to give your site an objective once-over.

2. The Essential Website Usability Checklist
A little more in depth, this checklist has 13 primary checks for you to look at. It covers the basics that are good for an initial usability test prior to sending in a first version of a site.

3. Practical Usability Testing
Dry and practical, this checklist takes you through every major step of a thorough usability scenario. From planning the test to checking the legalities, it has everything you need to make sure you don’t miss anything.

4. Top 10 Web Application Usability Guidelines and Checklist
Jayson Online created a simple list of 10 guidelines related to usability that are a little different from standard checklists. This is worth a read along with any others you might use, just to get another perspective.

5. Everyday Usability – 14 Point Checklist for Success
Kimberly Krause Berg wanted to give a guide of daily usability that could be applied to regular updates for the best results. This guide is short but should become a regular part of your routine if you want to ensure usability for every visitor, no matter when they come to your site.

Accessibility

6. W3C Cheat Sheet
This link provides multiple resources through tabs near the top, with an entire section dedicated to accessibility. It’s easy to read, with active links to find out more about each topic.

7. WCAG Cheat Sheet
This three-tiered priority system allows you to expand each topic for more information. It has a great, organized approach toward accessibility in website design.

8. Web Accessibility Checklist Wallpaper
This downloadable checklist wallpaper gives you a couple of the most important elements to keep in mind when making a truly inclusive page for special-needs users.

9. Web Content Accessibility Cheat Sheet
From the same website, this is a more complete cheatsheet that relates to the transition from 1.0 to 2.0 web design. It’s one of the most commonly used and shared cheatsheets on the subject.

CSS

10. Cascading Style Sheets (PDF)
This is an extremely useful, two-page resource about CSS, specifically, cascading style 1.0. It comes in a PDF and is a simple one to print out for easier use. It is out of date but still relevant when applied to updates.

11. CSS Cheat Sheet
Somewhat less helpful but still worth having around, this is a simple CSS style guide featuring basic commands on border, font, text and more.

12. CSS Level 1 and CSS-P Quick Reference Charts (PDF)
Another oldie but goodie, this provides users with a good foundation of terminology and descriptions for different properties that are still applied to updated versions of the CSS3.

13. CSS – A Guide for the Unglued
Are you on the verge of flipping your lid? That is a common feeling for the average web designer, especially when a project has proven problematic. That’s why this panic guide was made, to help simplify things and calm you down.

14. CSS Cheat Sheet
Superbasic, this is a single-page printout version of a cheatsheet. It basically covers the simple commands related to style, such as adding margins or capitalizing the first letter of each word. It’s great if you just want a quickie reference at which to glance.

15. Cascading Style Sheets (CSS 3) Quick Reference Guide (PDF)
This is a complete quick reference guide for CSS3, the most recent update of the coding style. Five pages long and in color, this PDF is better suited to save to your desktop than to print or bookmark.

16. Blueprint CSS Cheat Sheet
For those using Blueprint, here is a well made, if outdated, cheatsheet that can still give you the basics that you need for the program today.

Typography

17. Common Fonts to All Versions of Windows and Mac Equivalents
This is a quick reference for web designers about the different typography families and the equivalents between Windows and Apple. Because font so rarely changes in any meaningful way, this is still perfectly relevant despite being published in 2008.

18. Web Designer’s Font Card
An extremely expansive font sheet, you can download the free version or get the poster version to keep on your wall to glance at when you need to. It also has a color card. While I normally wouldn’t endorse a paid product, I think the poster chart is well worth the $10 it asks for.

Color

19. Web Safe Color Chart
A must-have for all web designers, this is a supersimple web-safe color chart. Not only does it show the colors and shades but it provides their color codes for easy use, as well. I was impressed by the way it’s presented in such a clear and concise manner.

20. Color Reference Guide (PDF)
This is a more updated version that gets some of the shades in that the other color guide missed. It also provides you with the color code to make it easier to apply them to a design. I love how it gets the intermediate shades that are very similar to the others but still gives a slightly different effect when used.

Conclusion

Yes, there is a lot to remember as a web designer, and it can be enough to make you want to put your head through a wall. But if you want to make it a little easier, all you need are a couple of references to have on hand. These quickie cheatsheets will go a long way toward simplifying the process for you and therefore save time and energy. Check them out!