Web Design Fundamentals

Planning and Documentation

Date : 03 Feb 2014

Design Phases
Phase 1 - Concept & Discovery Phase 2 - Refine & Define Phase 3 - Design & Develop & Test Phase 4 - Launch Phase 5 - Support, Maintenance

1. Concept & Discovery

Rationalize what this project is about. Think First, Design Second.

Conceptualize

Define Terms (what is it, what does it need to do) Understand Needs & Goals Know Risk & Competition Analysis. Ask why. Design direction and early brainstorming. Be open to every option.

Concept Stage Essential Tasks

Develop a concise development roadmap with a timeline

needs assessment and a budgetary analysis, to keep everyone on the same page.

Talk to people!

2. Refine and Define

Objectives (for user and business)

Specific Goals (what this project offers)

Users

Scope
Functionality (input, response) Branding and Copyright Resources: AIFIA

3. Design, Develop, Test

Its Not A Linear Process. And Testing Isnt An Add On. Neither is Usability.

Users

Personas Scenarios/tasks

Staged user testing

Expert analysis Iterate!

What are user tasks?

A task states what a user wants to do but does not say how the user would do it. And its specific. o They answer the question, why am I here / what am I looking for

o They dont begin with search for (usually). We dont to to Google or Bing because we want to search for something. We go because <?>
Examples o Find yoga classes near my office on Tuesday evening o Figure out the best health insurance plan for my dad o Find the cheapest flight to San Francisco Bay area that fits my schedule o Find a career counselor who is covered by my insurance

Information Architecture

Sorts complex information

Provides positive task flow (click -> found!)

Solves user needs (mental model) Organizes what you have to present (content model) Helps develop site features Ensure design meets requirements

Functional Testing

ID and Correct Bugs Cross Browser Testing (includes mobile) Server Testing (Load) Design, Functional Sign off Customer Acceptance

4. Launch
After Customer Acceptance & Staging, Production

5. Support and Maintenance

Data. Data. Data.

Going Astray

Undefined Milestones Assumption about goals are off Scope creep Youre not listening

Last minute hate

Solution does not solve the problem

Building Interfaces
Design is evolution

Select a Tool
Start: Pen and Paper to create a sketch.

Who Needs Wireframes?

Designers : To discuss ideas, critique work Business People : To understand effects Managers : To understand approach Developers : To understand how it works

Interfaces

Identify common areas (nav, content, etc) Change gears to focus on:

Color

Spacing, Weight, Grid

Typography Imagery Initial Code

Study Bad Interfaces

Whats Wrong? Info overload

Multiple states (without indication)

Busy!

Contact

Kathy E Gill kegill at uw dot edu http://faculty.u.washington.edu/kegill