Forms, forms, forms: so often overlooked in design. In this post, we are pleased to release the Form Design Cheat Sheet, created by Joe Leech and released for Smashing Magazine and its readers. This crib sheet contains an Omnigraffle template, as well as Photoshop (PSD) and PDF examples for you to download and use as you wish. Print out the sheet, stick it to your wall, send it to clients, and just generally help make everyone’s forms a bit better.
The designers of the crib sheet have spent years designing and testing forms, and they’ve decided to summarize the most common problems and issues that come up in their projects.
The crib sheet presents best practices for a variety of Web form issues:
- Variety of fields (simple, optional, etc.);
- Layout and examples;
- Page-level error handling;
- Password strength;
- Currency values;
- Inline validation;
Download The Crib Sheet For Free Link
The crib sheet is released under a Creative Commons license. You can use it in all of your projects for free and without any restrictions. Please link to this article if you would like to spread the word. You may modify the theme as you wish. We know you’ll find it useful in your next project!
- Large preview4 (PNG, 1.9 MB)
- Download the compressed package5 (ZIP, 0.7 MB)
- The release notes on the developer’s website
Thank you, guys. We appreciate your work and your good intentions!
Further Reading on SmashingMag: Link
- An Extensive Guide To Web Form Usability6
- Useful Ideas And Guidelines For Good Web Form Design7
- Forms On Mobile Devices: Modern Solutions8
(al) (fi) (il)
- 1 http://creativecommons.org/licenses/by-sa/3.0/
- 2 http://files.smashingmagazine.com/wallpapers/images/form-crib-sheet/full_preview.png
- 3 http://files.smashingmagazine.com/wallpapers/images/form-crib-sheet/full_preview.png
- 4 http://files.smashingmagazine.com/wallpapers/images/form-crib-sheet/full_preview.png
- 5 http://files.smashingmagazine.com/wallpapers/images/form-crib-sheet/form-crib-sheet.zip
- 6 https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/
- 7 https://www.smashingmagazine.com/2011/06/useful-ideas-and-guidelines-for-good-web-form-design/
- 8 https://www.smashingmagazine.com/2010/03/forms-on-mobile-devices-modern-solutions/