Date : 04 Nov 2015

Web Design FundamentalsPlanning and Documentation

Design PhasesPhase 1 - Concept & Discovery

Phase 2 - Refine & Define

Phase 3 - Design & Develop & Test

Phase 4 - Launch

Phase 5 - Support, Maintenance

1. Concept & DiscoveryRationalize 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 It’s Not A Linear Process. And Testing Isn’t 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 it’s specific.

o They answer the question, “why am I here” / “what am I looking for”

o They don’t begin with “search for” (usually). We don’t 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. LaunchAfter Customer Acceptance & Staging, Production

5. Support and MaintenanceData. Data. Data.

Going Astray

Undefined milestones

Assumption about goals are off

Scope creep

You’re not listening

Last minute ‘hate’

Solution does not solve the problem

Building InterfacesDesign is evolution

Select a ToolStart: 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 What’s Wrong?

Info overload

Multiple states (without indication)

Busy!

Anything else?

Contact

Kathy E Gill

kegill at gmail or @kegill

http://faculty.u.washington.edu/kegill