Design process

The Design Process & AnalysisTuesday, December 13, 11

Goals for today •Review •Look at the design process •SEO, clients perception, pro tips •Usability testing •Branding •Be not burnt out.Tuesday, December 13, 11

What is Progressive Enhancement?Tuesday, December 13, 11

A layered approach to Web Design, focused on content, accessibility & the user.Tuesday, December 13, 11

HTML - Structure CSS - Presentation JS - BehaviorTuesday, December 13, 11

The Design ProcessTuesday, December 13, 11

Overview •Deﬁne •Structure •Design •Build & Test •LaunchTuesday, December 13, 11

DefineTuesday, December 13, 11

Define •Identifying goals •Identifying target audience •Interviewing users •Requirement gatheringTuesday, December 13, 11

StructureTuesday, December 13, 11

Structure •Content Inventory •Site map/data ﬂow •WireframingTuesday, December 13, 11

Structure Site map home projects about client form conﬁrmation project X data outputTuesday, December 13, 11

Structure Data ﬂow submit form email database data output APITuesday, December 13, 11

Structure Site map home projects project project project contact aboutTuesday, December 13, 11

Structure Wireframing •Information Architecture •Design layoutTuesday, December 13, 11

Structure WireframingTuesday, December 13, 11

DesignTuesday, December 13, 11

Design •Color scheme •Design comps •Interaction prototypes •Design review •Client changesTuesday, December 13, 11

Design colorsTuesday, December 13, 11

Design design comp Interaction modelTuesday, December 13, 11

Design Interaction model optionsTuesday, December 13, 11

Design Design reviewTuesday, December 13, 11

Design Redo it.Tuesday, December 13, 11

Build & TestTuesday, December 13, 11

Build & Test •Font-end •Browser Test •Back-end (CMS installation) •Bug tracking •Final presentation to clientTuesday, December 13, 11

Build & Test Front-end codingTuesday, December 13, 11

Build & Test Front-end coding 1.HTML 2.CSS 3.JavaScriptTuesday, December 13, 11

Build & Test Back-end (CMS installation)Tuesday, December 13, 11

Build & Test Bug tracking & QA ...Tuesday, December 13, 11

Build & Test Final presentation to clientTuesday, December 13, 11

LaunchTuesday, December 13, 11

Launch Dev -> Test -> Prod FTP vs. live edit SVN & GITTuesday, December 13, 11

MaintenanceTuesday, December 13, 11

Maintenance ﬁxing stu when it breaks (it always does)Tuesday, December 13, 11

Tuesday, December 13, 11

[ take a break, they’ve had enough ]Tuesday, December 13, 11

Search Engine Optimization (SEO)Tuesday, December 13, 11

SEO http://www.youtube.com/watch?v=hF515-0TdukTuesday, December 13, 11

SEO •Content •Semantic/meaningful HTML •Page weight •+1’s •LinksTuesday, December 13, 11

SEO <meta name=”keywords” content=”[a list of keywords]”>Tuesday, December 13, 11

SEO •Web Standards •Je rey ZeldmanTuesday, December 13, 11

Usability Testing your designTuesday, December 13, 11

TestingTuesday, December 13, 11

BrandingTuesday, December 13, 11

Meaningful Logo DesignTuesday, December 13, 11

Whitespace in Logo DesignTuesday, December 13, 11

Guild of Food WritersTuesday, December 13, 11

Today is in the past •Reviewed •Looked at the design process •SEO, clients perception, pro tips •Usability testing •BrandingTuesday, December 13, 11

Next Class •Color Wheel •Color Theory •Communicating with color •Typography •Font DesignTuesday, December 13, 11

Concerns E-mail: timwright12@gmail.com Twitter: @csskarma AIM: csskarmaTuesday, December 13, 11

Design process

by Tim Wright on Dec 13, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 2

Statistics

Design process — Presentation Transcript