Upload
leon-hudson
View
216
Download
0
Tags:
Embed Size (px)
Citation preview
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