Here are the files from our last class. We have already built the form, this class we will be styling it.
Some guidelines in designing forms:
- Chunk related fields in logical groupings so the user can process the form more easily
- When the form is long and has a lot of fields for typical information (name, address, etc), be sure to design it to it ifs a vertical list. That way the user has only one way to go.
- Make sure the labels of the form files stand out bolding or alternate colors can help.
- If the information you are asking for is atypical, make the labels left-justify so that the user can scan them without being interrupted by form fields.
- Alternately, you can lay the form labels out so they are flush right, thereby they are right up against the form fields to which they refer.
- Use background colors and hairlines sparingly: every visual element you add could detract from the page’s main layout, the form.
- Keep your design clean and simple.
Some articles you may find interesting:
Web Application Form Design
Luke Wroblewski | January 22, 2005
Web Form Design: Modern Solutions and Creative Ideas
Vitaly Friedman | April 17th, 2008