[process] Notes on... the Web site design process

Get Started. It's Free
or sign up with your email address
[process] Notes on... the Web site design process by Mind Map: [process] Notes on... the Web site design process

1. books

1.1. Comminicating Design http://www.communicatingdesign.com/

1.2. A Practical Guide to Designing for the Web http://designingfortheweb.co.uk/

1.3. Designing for Interaction http://www.designingforinteraction.com/

1.4. About Face 3 http://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111/

2. brief

2.1. what is this about

2.1.1. the project springboard

2.1.2. the starting point document

2.1.3. various forms

2.2. parts

2.2.1. summary

2.2.2. the problem problem definition designer's role

2.2.3. goals primary secondary short term long term bussines goals goals vs. means

2.2.4. audience tasks

2.2.5. constraints redesign technical requirements need for ads brand considerations current content competitors ...

2.2.6. deliverables deliverables, not research designer should choose an appropriate research tool examples personas wireframes code mockups layout visual design

2.2.7. budget

2.2.8. timetable

2.3. context constraints

2.3.1. a single project in a few parts sub-briefs idea briefs using not the same deliverables for every single part

2.3.2. timetable vs. agile timetable not applicable keep being keen on deadline deliverable driven progress

2.4. tools

2.4.1. SWOT analysis

2.4.2. moodboards

2.5. links

2.5.1. http://www.jayhollywood.com.au/the-creative-brief-a-designer’s-best-friend/

2.5.2. http://www.adobe.com/resources/techniques/resources/index.html

2.5.3. http://iainstitute.org/tools/

2.5.4. http://www.smileycat.com/miaow/archives/000226.php

3. research

3.1. what is this about

3.1.1. who the hell is that guy?

3.1.2. Collecting, updating and presenting information about users' needs, habits, experience and capabilities.

3.2. qualitative

3.2.1. interviews stakeholders users (and customers) users' feedback subject matter experts expert analyses usability problems one-on-one focus groups

3.2.2. observations shadowing current Web site content users customer visits

3.2.3. other tools competitive research card sorting usability testing

3.3. quantitative

3.3.1. questionaire

3.3.2. database

3.3.3. Google Analytics

3.3.4. tracking clicks ClickHeat mouse movements mouseflow.com userfly.com eyes

3.4. deliverables

3.4.1. personas are about behavior patterns motivations, goals (and maybe then tasks) made from real data improves communicaiton within the team ad-hoc/provisional personas

3.4.2. optional custom reports mind maps diagrams mood boards graphs usability reports redesign

4. design

4.1. what is this about

4.1.1. design without the design

4.1.2. Vizualizace informaci ziskanych vyzkumem do podoby prvotnich navrhu a prototypu blize definujicich vysledny produkt.

4.2. tools

4.2.1. wireframes sketchbooks black ink software OmniGraffle Protoshare iPlotz Balsamiq

4.2.2. competitive analyses

4.2.3. concept models

4.2.4. design patterns

4.2.5. usability studies

4.2.6. design patterns http://www.welie.com/patterns/ http://developer.yahoo.com/ypatterns/ http://patterntap.com/

4.3. ideas

4.3.1. mood boards

4.3.2. mind maps

4.3.3. idea sessions brainstorming scamper the four r's

4.4. deliverables

4.4.1. scenarios employs personas describes user using the system zahrnuji okolnosti z bezneho zivota nepopisuji obrazovku lze zapisovat k personam ale netyka se to jiz researche

4.4.2. requirements / tasks lists the result of scenarios & the personas' goals

4.4.3. wireframes, framework layout (macro design) grid header, footer panes, sidebars controls and widgets (micro design) button bars admin features breadcrumbs custom features

4.4.4. site maps

4.4.5. optional storyboards fancy scenarios Brown je v personach uvadi jako behavior flow charts / task flows vizualizovane tasky rozhodovaci stromy use cases vizualizovane tasky prototypes interactive wireframes cheap testing tools

5. solution

5.1. what is this about

5.1.1. polish, please!

5.1.2. Prechod od modelu a prototypu ke navrhu konecnych obrazovek a vytvoreni visualniho frameworku.

5.2. deliverables

5.2.1. visual framework layout framework typography colors icons

5.2.2. screen designs

6. production

6.1. what is this about

6.1.1. switch to factory mode

6.1.2. well, this is just another story

6.1.3. Prevedeni konecneho navrhu reseni do podoby produkcnich sablon.

6.2. o cem to je

6.2.1. udrzovatelny kod

6.2.2. neprustrelny kod

6.2.3. nahrazovani pisem

6.2.4. HTML 5 a mikroformaty

6.2.5. CSS 3

6.2.6. progressive enhancement

6.2.7. kompatibilita napric prohlizeci