Form design

  • 1,979 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,979
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Form DesignWednesday, January 4, 12
  • 2. Goals for today •Review •Form mark up & accessibility •Good form design •Produce project goals •Produce project color palletWednesday, January 4, 12
  • 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. 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 ProcessWednesday, January 4, 12
  • 7. the design process •Define •Structure •Design •Build & Test •LaunchWednesday, January 4, 12
  • 8. Review: Color & TypographyWednesday, 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-serifWednesday, January 4, 12
  • 10. Review: NavigationWednesday, January 4, 12
  • 11. navigation •Types •Examples •HTML •Voice in labeling •Built site map •Built wireframeWednesday, January 4, 12
  • 12. FormsWednesday, 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? SubmitWednesday, 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? SubmitWednesday, 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? SubmitWednesday, 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> SubmitWednesday, 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? SubmitWednesday, 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? SubmitWednesday, 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? SubmitWednesday, 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? SubmitWednesday, 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? SubmitWednesday, 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? SubmitWednesday, 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 DesignWednesday, January 4, 12
  • 27. Good form design •Clear •Not too long •Quick & guiding •Groupings & meaningful organizationWednesday, January 4, 12
  • 28. Good form designWednesday, January 4, 12
  • 29. Wednesday, January 4, 12
  • 30. Client formWednesday, 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.comWednesday, 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 StreetWednesday, January 4, 12
  • 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. next 2 classes •Review •Building & DesigningWednesday, January 4, 12
  • 36. Slide Color Pallet Font: BEBas NeueWednesday, January 4, 12
  • 37. Concerns E-mail: timwright12@gmail.com Twitter: @csskarma AIM: csskarmaWednesday, January 4, 12