Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

[process] Notes on... the Web site design process by Mind Map: [process] Notes
on... the Web site
design process
4.0 stars - 1 reviews range from 0 to 5

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

books

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

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

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

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

brief

what is this about

the project springboard

the starting point document

various forms

parts

summary

the problem, problem definition, designer's role

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

audience, tasks

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

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

budget

timetable

context constraints

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

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

tools

SWOT analysis

moodboards

links

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

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

http://iainstitute.org/tools/

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

research

what is this about

who the hell is that guy?

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

qualitative

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

observations, shadowing, current Web site content, users, customer visits

other tools, competitive research, card sorting, usability testing

quantitative

questionaire

database

Google Analytics

tracking, clicks, ClickHeat, http://www.labsmedia.com/clickheat/, mouse movements, mouseflow.com, userfly.com, eyes

deliverables

personas, are about, behavior patterns, spolecne charakteristicke rysy v chovani lidi, motivations, goals (and maybe then tasks), made from real data, improves communicaiton within the team, ad-hoc/provisional personas

optional, custom reports, mind maps, diagrams, mood boards, graphs, usability reports, redesign

design

what is this about

design without the design

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

tools

wireframes, sketchbooks, black ink, software, OmniGraffle, Protoshare, iPlotz, Balsamiq

competitive analyses

concept models

design patterns

usability studies

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

ideas

mood boards

mind maps

idea sessions, brainstorming, scamper, the four r's

deliverables

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

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

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

site maps

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, paper, HTML, Flash

solution

what is this about

polish, please!

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

deliverables

visual framework, layout framework, typography, colors, icons

screen designs

production

what is this about

switch to factory mode

well, this is just another story

Prevedeni konecneho navrhu reseni do podoby produkcnich sablon.

o cem to je

udrzovatelny kod

neprustrelny kod

nahrazovani pisem

HTML 5 a mikroformaty

CSS 3

progressive enhancement

kompatibilita napric prohlizeci