This document summarizes a presentation on form design. It discusses reviewing goals for the day which include form markup and accessibility, good form design, and producing project goals and a color palette. It then covers topics like progressive enhancement, the design process, color and typography, navigation, and form goals, markup, and accessibility. Guidelines for good form design are provided. The presentation concludes by discussing client forms, recommended design resources, and plans for future classes.
2. Goals for today
•Review
•Form mark up & accessibility
•Good form design
•Produce project goals
•Produce project color pallet
Wednesday, January 4, 12
3. “Consider users over
authors over
implementors over
specifiers over
theoretical purity”
- Jeremy Keith, @adactio
Author: HTML5 for Web Designers & Bulletproof Ajax
Wednesday, January 4, 12
9. Color & Typography
•Color Theory
•Color Pallets
•RGB vs. CMYK
•Accessibility
•Image formats (GIF, JPEG, PNG 8/24/32)
•Serif vs. Sans-serif
Wednesday, January 4, 12
13. Form goals
•Minimize pain
•Show completion path
•Correct HTML
•Consider label placement
•Create data relationships
•Consistent communication (errors/help)
Wednesday, January 4, 12
14. Form MarkUp
Basic Information
Name (required):
First and last, please
E-mail:
you@email.com
More Information
Current Mood:
Are you happy? sad? what?
Submit
Wednesday, January 4, 12
15. Form accessibility
Basic Information
Name (required):
First and last, please
E-mail:
you@email.com
More Information
Current Mood:
Are you happy? sad? what?
Submit
Wednesday, January 4, 12
16. Form accessibility
Basic Information
Name (required):
First and last, please
E-mail:
you@email.com
More Information
Current Mood:
Are you happy? sad? what?
Submit
Wednesday, January 4, 12
17. Form accessibility
<fieldset> Basic Information
Name (required):
First and last, please
E-mail:
you@email.com </fieldset>
<fieldset> More Information
Current Mood:
Are you happy? sad? what? </fieldset>
Submit
Wednesday, January 4, 12
18. Form accessibility
Basic Information
Name (required):
First and last, please
E-mail:
you@email.com
More Information
Current Mood:
Are you happy? sad? what?
Submit
Wednesday, January 4, 12
19. Form accessibility
<legend> Basic Information </legend>
Name (required):
First and last, please
E-mail:
you@email.com
<legend> More Information </legend>
Current Mood:
Are you happy? sad? what?
Submit
Wednesday, January 4, 12
20. Form accessibility
Basic Information
Name (required):
First and last, please
E-mail:
you@email.com
More Information
Current Mood:
Are you happy? sad? what?
Submit
Wednesday, January 4, 12
21. Form accessibility
Basic Information
Name (required):
First and last, please
E-mail:
you@email.com
More Information
Current Mood:
Are you happy? sad? what?
Submit
Wednesday, January 4, 12
22. Form accessibility
Basic Information
Name (required):
First and last, please
E-mail:
you@email.com
More Information
Current Mood:
Are you happy? sad? what?
Submit
Wednesday, January 4, 12
23. Form accessibility
<label
for=”name”>Name</label>
<input
type=”text”
id=”name”
placeholder=”Enter
your
name
here”>
<label
for=”email”>E-‐mail</label>
<input
type=”email”
id=”email”
placeholder=”Enter
your
e-‐mail
here”>
Wednesday, January 4, 12
24. Form accessibility
Basic Information
Name (required):
First and last, please
E-mail:
you@email.com
More Information
Current Mood:
Are you happy? sad? what?
Submit
Wednesday, January 4, 12
25. Form accessibility
Basic Information
Name (required):
First and last, please
E-mail:
you@email.com
More Information
Current Mood:
Are you happy? sad? what?
<button
type=”submit”> Submit </button>
OR <input
type=”submit”
val=”submit”>
Wednesday, January 4, 12
31. Client form
•Define 3 goals (unrelated to money)
•Choose a color palette (goal related)
•Background
•Links
•Text
•Accents
•Choose a font scheme
colrd.com colourlovers.com
Wednesday, January 4, 12
33. Great sites to read
•HTML 5 Doctor
•LukeW.com
•Web Designer Wall
•Snook.ca
•456 Berea Street
Wednesday, January 4, 12
34. Today is in the past
•Reviewed
•Form mark up & accessibility
•Good form design
•Produce project goals
•Produce project color pallet
Wednesday, January 4, 12
35. next 2 classes
•Review
•Building & Designing
Wednesday, January 4, 12