Your SlideShare is downloading. ×
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Form design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Form design

2,257

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,257
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
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

×