Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Form design

  1. 1. Form Design Wednesday, January 4, 12
  2. 2. Goals for today •Review •Form mark up & accessibility •Good form design •Produce project goals •Produce project color pallet Wednesday, 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 Ajax Wednesday, 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 Process Wednesday, January 4, 12
  7. 7. the design process •Define •Structure •Design •Build & Test •Launch Wednesday, January 4, 12
  8. 8. Review: Color & Typography Wednesday, 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-serif Wednesday, January 4, 12
  10. 10. Review: Navigation Wednesday, January 4, 12
  11. 11. navigation •Types •Examples •HTML •Voice in labeling •Built site map •Built wireframe Wednesday, January 4, 12
  12. 12. Forms Wednesday, 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? Submit Wednesday, 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? Submit Wednesday, 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? Submit Wednesday, 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> Submit Wednesday, 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? Submit Wednesday, 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? Submit Wednesday, 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? Submit Wednesday, 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? Submit Wednesday, 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? Submit Wednesday, 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? Submit Wednesday, 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 Design Wednesday, January 4, 12
  27. 27. Good form design •Clear •Not too long •Quick & guiding •Groupings & meaningful organization Wednesday, January 4, 12
  28. 28. Good form design Wednesday, January 4, 12
  29. 29. Wednesday, January 4, 12
  30. 30. Client form Wednesday, 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.com Wednesday, 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 Street Wednesday, January 4, 12
  34. 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. 35. next 2 classes •Review •Building & Designing Wednesday, January 4, 12
  36. 36. Slide Color Pallet Font: BEBas Neue Wednesday, January 4, 12
  37. 37. Concerns E-mail: timwright12@gmail.com Twitter: @csskarma AIM: csskarma Wednesday, January 4, 12

×