1. Date : 04 Nov 2015 Web Design Fundamentals Planning and Documentation

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

3. 1. Concept & Discovery Rationalize what this project is about. Think First, Design Second.

4. 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.

5. 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!

6. 2. Refine and Define ✤ Objectives (for user and business) ✤ Specific Goals (what this project offers) ✤ Users ✤ Scope ✤ Functionality (input, response) ✤ Branding and Copyright ✤ Resources: AIFIAAIFIA

7. 3. Design, Develop, Test It’s Not A Linear Process. And Testing Isn’t An Add On. Neither is Usability.

8. Users ✤ Personas ✤ Scenarios/tasks ✤ Staged user testing ✤ Expert analysis ✤ Iterate!

9. 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

10. 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

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

12. 4. Launch After Customer Acceptance & Staging, Production

13. 5. Support and Maintenance Data. Data. Data.

14. Going Astray ✤ Undefined milestones ✤ Assumption about goals are off ✤ Scope creep ✤ You’re not listening ✤ Last minute ‘hate’ ✤ Solution does not solve the problem

15. Building Interfaces Design is evolution

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

17. Who Needs Wireframes? ✤ Designers : To discuss ideas, critique work ✤ Business People : To understand effects ✤ Managers : To understand approach ✤ Developers : To understand how it works

18. Interfaces ✤ Identify common areas (nav, content, etc) ✤ Change gears to focus on: ✤ Color ✤ Spacing, Weight, Grid ✤ Typography ✤ Imagery ✤ Initial Code

20. Study Bad Interfaces ✤ What’s Wrong? ✤ Info overload ✤ Multiple states (without indication) ✤ Busy! ✤ Anything else?

21. Contact ✤ Kathy E Gill ✤ kegill at gmail or @kegill ✤ http://faculty.u.washington.edu/kegill http://faculty.u.washington.edu/kegill