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

you@email.com

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

you@email.com

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

you@email.com

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

you@email.com

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

you@email.com

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

you@email.com

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

you@email.com

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

you@email.com

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

you@email.com

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

you@email.com

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

you@email.com

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

ConcernsE-mail: timwright12@gmail.com

Twitter: @csskarma

AIM: csskarma

Wednesday, January 4, 12