1. Form Design
Wednesday, January 4, 12

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

4. What is progressive
enhancement?
Wednesday, January 4, 12

5. progressive enhancement
A layered approach to Web
Design, focused on content,
accessibility & the user.
Wednesday, January 4, 12

6. Review: The Design Process
Wednesday, January 4, 12

7. the design process
•Define
•Structure
•Design
•Build & Test
•Launch
Wednesday, January 4, 12

8. Review: Color & Typography
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

10. Review: Navigation
Wednesday, January 4, 12

11. navigation
•Types
•Examples
•HTML
•Voice in labeling
•Built site map
•Built wireframe
Wednesday, January 4, 12

12. Forms
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

26. Good Form Design
Wednesday, January 4, 12

27. Good form design
•Clear
•Not too long
•Quick & guiding
•Groupings & meaningful organization
Wednesday, January 4, 12

28. Good form design
Wednesday, January 4, 12

29. Wednesday, January 4, 12

30. Client form
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

32. The why.
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

36. Slide Color Pallet
Font: BEBas Neue
Wednesday, January 4, 12

37. Concerns
E-mail: timwright12@gmail.com
Twitter: @csskarma
AIM: csskarma
Wednesday, January 4, 12