form design
TRANSCRIPT
Goals for today
•Review
•Form mark up & accessibility
•Good form design
•Produce project goals
•Produce project color pallet
Wednesday, January 4, 12
“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
A layered approach to Web Design, focused on content,
accessibility & the user.
progressive enhancement
Wednesday, January 4, 12
•Color Theory
•Color Pallets
•RGB vs. CMYK
•Accessibility
•Image formats (GIF, JPEG, PNG 8/24/32)
•Serif vs. Sans-serif
Color & Typography
Wednesday, January 4, 12
•Types
•Examples
•HTML
•Voice in labeling
•Built site map
•Built wireframe
navigation
Wednesday, January 4, 12
•Minimize pain
•Show completion path
•Correct HTML
•Consider label placement
•Create data relationships
•Consistent communication (errors/help)
Form goals
Wednesday, January 4, 12
Form MarkUpBasic Information
E-mail:
More Information
Current Mood:
Submit
First and last, please
Are you happy? sad? what?
Name (required):
Wednesday, January 4, 12
Form accessibilityBasic Information
E-mail:
More Information
Current Mood:
Submit
First and last, please
Are you happy? sad? what?
Name (required):
Wednesday, January 4, 12
Form accessibilityBasic Information
E-mail:
More Information
Current Mood:
Submit
First and last, please
Are you happy? sad? what?
Name (required):
Wednesday, January 4, 12
Form accessibilityBasic Information
E-mail:
More Information
Current Mood:
Submit
<fieldset>
</fieldset>
<fieldset>
</fieldset>
First and last, please
Are you happy? sad? what?
Name (required):
Wednesday, January 4, 12
Form accessibilityBasic Information
E-mail:
More Information
Current Mood:
Submit
First and last, please
Are you happy? sad? what?
Name (required):
Wednesday, January 4, 12
Form accessibilityBasic Information
E-mail:
More Information
Current Mood:
Submit
<legend> </legend>
<legend> </legend>
First and last, please
Are you happy? sad? what?
Name (required):
Wednesday, January 4, 12
Form accessibilityBasic Information
E-mail:
More Information
Current Mood:
Submit
First and last, please
Are you happy? sad? what?
Name (required):
Wednesday, January 4, 12
Form accessibilityBasic Information
E-mail:
More Information
Current Mood:
Submit
First and last, please
Are you happy? sad? what?
Name (required):
Wednesday, January 4, 12
Form accessibilityBasic Information
E-mail:
More Information
Current Mood:
Submit
First and last, please
Are you happy? sad? what?
Name (required):
Wednesday, January 4, 12
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
Form accessibilityBasic Information
E-mail:
More Information
Current Mood:
Submit
First and last, please
Are you happy? sad? what?
Name (required):
Wednesday, January 4, 12
Form accessibilityBasic Information
E-mail:
More Information
Current Mood:
Submit<button type=”submit”> </button>
<input type=”submit” val=”submit”>OR
First and last, please
Are you happy? sad? what?
Name (required):
Wednesday, January 4, 12
•Clear
•Not too long
•Quick & guiding
•Groupings & meaningful organization
Good form design
Wednesday, January 4, 12
•Define 3 goals (unrelated to money)
•Choose a color palette (goal related)
•Background
•Links
•Text
•Accents
•Choose a font scheme
Client form
colrd.com colourlovers.com
Wednesday, January 4, 12
•HTML 5 Doctor
•LukeW.com
•Web Designer Wall
•Snook.ca
•456 Berea Street
Great sites to read
Wednesday, January 4, 12
Today is in the past
•Reviewed
•Form mark up & accessibility
•Good form design
•Produce project goals
•Produce project color pallet
Wednesday, January 4, 12