form design
DESCRIPTION
TRANSCRIPT
Form Design
Wednesday, January 4, 12
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
What is progressive enhancement?
Wednesday, January 4, 12
A layered approach to Web Design, focused on content,
accessibility & the user.
progressive enhancement
Wednesday, January 4, 12
Review: The Design Process
Wednesday, January 4, 12
•Define
•Structure
•Design
•Build & Test
•Launch
the design process
Wednesday, January 4, 12
Review: Color & Typography
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
Review: Navigation
Wednesday, January 4, 12
•Types
•Examples
•HTML
•Voice in labeling
•Built site map
•Built wireframe
navigation
Wednesday, January 4, 12
Forms
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
Good Form Design
Wednesday, January 4, 12
•Clear
•Not too long
•Quick & guiding
•Groupings & meaningful organization
Good form design
Wednesday, January 4, 12
Good form design
Wednesday, January 4, 12
Wednesday, January 4, 12
Client form
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
The why.
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
next 2 classes•Review
•Building & Designing
Wednesday, January 4, 12
Slide Color Pallet
Font: BEBas Neue
Wednesday, January 4, 12
