Form design

Download Form design

Post on 17-Aug-2014

2.242 views

Category:

Devices & Hardware

2 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • Form DesignWednesday, January 4, 12
  • Goals for today Review Form mark up & accessibility Good form design Produce project goals Produce project color palletWednesday, January 4, 12
  • Consider users over authors over implementors over speciers over theoretical purity - Jeremy Keith, @adactio Author: HTML5 for Web Designers & Bulletproof AjaxWednesday, January 4, 12
  • What is progressive enhancement?Wednesday, January 4, 12
  • progressive enhancement A layered approach to Web Design, focused on content, accessibility & the user.Wednesday, January 4, 12
  • Review: The Design ProcessWednesday, January 4, 12
  • the design process Dene Structure Design Build & Test LaunchWednesday, January 4, 12
  • Review: Color & TypographyWednesday, January 4, 12
  • 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
  • Review: NavigationWednesday, January 4, 12
  • navigation Types Examples HTML Voice in labeling Built site map Built wireframeWednesday, January 4, 12
  • FormsWednesday, January 4, 12
  • Form goals Minimize pain Show completion path Correct HTML Consider label placement Create data relationships Consistent communication (errors/help)Wednesday, January 4, 12
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Form accessibility Name E-mail Wednesday, January 4, 12
  • 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
  • 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 OR Wednesday, January 4, 12
  • Good Form DesignWednesday, January 4, 12
  • Good form design Clear Not too long Quick & guiding Groupings & meaningful organizationWednesday, January 4, 12
  • Good form designWednesday, January 4, 12
  • Wednesday, January 4, 12
  • Client formWednesday, January 4, 12
  • Client form Dene 3 goals (unrelated to money) Choose a color palette (goal related) Background Links Text Accents Choose a font scheme c