Form DesignWednesday, January 4, 12
Goals for today                           •Review                           •Form mark up & accessibility                 ...
“Consider users over                                authors over                            implementors over             ...
What is progressive                             enhancement?Wednesday, January 4, 12
progressive enhancement                   A layered approach to Web                   Design, focused on content,         ...
Review: The Design ProcessWednesday, January 4, 12
the design process                           •Define                           •Structure                           •Design...
Review: Color & TypographyWednesday, January 4, 12
Color & Typography                           •Color Theory                           •Color Pallets                       ...
Review: NavigationWednesday, January 4, 12
navigation                           •Types                           •Examples                           •HTML           ...
FormsWednesday, January 4, 12
Form goals                      •Minimize pain                      •Show completion path                      •Correct HT...
Form MarkUp                           Basic Information                            Name (required):                       ...
Form accessibility                            Basic Information                             Name (required):              ...
Form accessibility                            Basic Information                             Name (required):              ...
Form accessibility         <fieldset>         Basic Information                             Name (required):              ...
Form accessibility                            Basic Information                             Name (required):              ...
Form accessibility               <legend>     Basic Information             </legend>                             Name (re...
Form accessibility                            Basic Information                             Name (required):              ...
Form accessibility                            Basic Information                             Name (required):              ...
Form accessibility                            Basic Information                             Name (required):              ...
Form accessibility   <label	  for=”name”>Name</label>   <input	  type=”text”	  id=”name”	  placeholder=”Enter	  your	  nam...
Form accessibility                            Basic Information                             Name (required):              ...
Form accessibility                                   Basic Information                                    Name (required):...
Good Form DesignWednesday, January 4, 12
Good form design                           •Clear                           •Not too long                           •Quick...
Good form designWednesday, January 4, 12
Wednesday, January 4, 12
Client formWednesday, January 4, 12
Client form                           •Define 3 goals (unrelated to money)                           •Choose a color palett...
The why.Wednesday, January 4, 12
Great sites to read                           •HTML 5 Doctor                           •LukeW.com                         ...
Today is in the past                           •Reviewed                           •Form mark up & accessibility          ...
next 2 classes                           •Review                           •Building & DesigningWednesday, January 4, 12
Slide Color Pallet                             Font: BEBas NeueWednesday, January 4, 12
Concerns                E-mail: timwright12@gmail.com                Twitter: @csskarma                AIM: csskarmaWednes...
Upcoming SlideShare
Loading in...5
×

Form design

2,471

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,471
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Form design

  1. 1. Form DesignWednesday, January 4, 12
  2. 2. Goals for today •Review •Form mark up & accessibility •Good form design •Produce project goals •Produce project color palletWednesday, January 4, 12
  3. 3. “Consider users over authors over implementors over specifiers over theoretical purity” - Jeremy Keith, @adactio Author: HTML5 for Web Designers & Bulletproof AjaxWednesday, January 4, 12
  4. 4. What is progressive enhancement?Wednesday, January 4, 12
  5. 5. progressive enhancement A layered approach to Web Design, focused on content, accessibility & the user.Wednesday, January 4, 12
  6. 6. Review: The Design ProcessWednesday, January 4, 12
  7. 7. the design process •Define •Structure •Design •Build & Test •LaunchWednesday, January 4, 12
  8. 8. Review: Color & TypographyWednesday, January 4, 12
  9. 9. Color & Typography •Color Theory •Color Pallets •RGB vs. CMYK •Accessibility •Image formats (GIF, JPEG, PNG 8/24/32) •Serif vs. Sans-serifWednesday, January 4, 12
  10. 10. Review: NavigationWednesday, January 4, 12
  11. 11. navigation •Types •Examples •HTML •Voice in labeling •Built site map •Built wireframeWednesday, January 4, 12
  12. 12. FormsWednesday, January 4, 12
  13. 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. 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? SubmitWednesday, January 4, 12
  15. 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? SubmitWednesday, January 4, 12
  16. 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? SubmitWednesday, January 4, 12
  17. 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> SubmitWednesday, January 4, 12
  18. 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? SubmitWednesday, January 4, 12
  19. 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? SubmitWednesday, January 4, 12
  20. 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? SubmitWednesday, January 4, 12
  21. 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? SubmitWednesday, January 4, 12
  22. 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? SubmitWednesday, January 4, 12
  23. 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. 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? SubmitWednesday, January 4, 12
  25. 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. 26. Good Form DesignWednesday, January 4, 12
  27. 27. Good form design •Clear •Not too long •Quick & guiding •Groupings & meaningful organizationWednesday, January 4, 12
  28. 28. Good form designWednesday, January 4, 12
  29. 29. Wednesday, January 4, 12
  30. 30. Client formWednesday, January 4, 12
  31. 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.comWednesday, January 4, 12
  32. 32. The why.Wednesday, January 4, 12
  33. 33. Great sites to read •HTML 5 Doctor •LukeW.com •Web Designer Wall •Snook.ca •456 Berea StreetWednesday, January 4, 12
  34. 34. Today is in the past •Reviewed •Form mark up & accessibility •Good form design •Produce project goals •Produce project color palletWednesday, January 4, 12
  35. 35. next 2 classes •Review •Building & DesigningWednesday, January 4, 12
  36. 36. Slide Color Pallet Font: BEBas NeueWednesday, January 4, 12
  37. 37. Concerns E-mail: timwright12@gmail.com Twitter: @csskarma AIM: csskarmaWednesday, January 4, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×