Form design

3,425 views
3,152 views

Published on

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

No Downloads
Views
Total views
3,425
On SlideShare
0
From Embeds
0
Number of Embeds
3
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

×