Scribd
Upload
341 views

Web Design Fundamentals

The document outlines the phases of web design from concept and discovery through launch and maintenance. It discusses tasks for each phase such as defining goals, user testing, and information architecture. The document also provides tips for wireframing, selecting tools, and studying bad interfaces.

Uploaded by

Kathy E. Gill
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
341 views

Web Design Fundamentals

The document outlines the phases of web design from concept and discovery through launch and maintenance. It discusses tasks for each phase such as defining goals, user testing, and information architecture. The document also provides tips for wireframing, selecting tools, and studying bad interfaces.

Uploaded by

Kathy E. Gill
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 21

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

You might also like