Webdesign case stage #4: Designet

Jeg har nu gennemført en bruger- og behovsanalyse, fået styr på informationsarkitekturen og hvad de forskellige sider skal indeholde med wireframes. Det er nu tid til at gå i gang med designet. Jeg har haft idéer til designet helt fra starten, da jeg automatisk begynder at forestille mig hvordan det vil se ud og det er nu tid til at lave nogle mock-ups.

Inspiration

Jeg bruger ofte pinterest til at finde inspiration og jeg har lavet en masse pinboards med forskellige enmer, som jeg bruger til at huske på de ting jeg har set på nettet. Man kan også bruge pinterest til at få idéer fra andres pins.

En flot skrifttype kan sætte hele stilen for et design og jeg finder ofte inspiration på Myfonts.com og i deres nyhedsbreve.

Adobe kular kan man få inspiration til design farvepaletten. Man kan fx på basis af en eller to farver fra et logo få idéer til andre farver man kan bruge sammen med.

Moodboard

Jeg starter altid med at lave et moodboard, der viser de farver, fonte, former, texturer og typer af billeder jeg vil bruge. Man skal kunne få et indtryk af designet udfra et moodboard fx hvor stor er overskrifter i forhold til andet indhold, hvordan bruger man farverne sammen, hvor store er billederne o.s.v.

FF-mood-design-board

Mockup

Det er en god ide at lave en et par forskellige mock-ups af designet i Photoshop til at vise kunden. Det er en relativ hurtig og billig måde at vise hvordan sitet kommer til at se ud og hvor call-to-action er på de forskellige sider, før man udvikler det. Det er også lettere at forklare en udvikler hvad der skal laves når man kan vise det med en mock-up.

Jeg havde på forhånd snakket med kunden om forskellige ting, som designet skulle indeholde, så som muligheden for at have en slider med store billeder, animation, kontakt form, kort, en overskuelig måde at vise alle medarbejdere, blog og så skulle designet være responsivt. Jeg viste at sitet skulle laves i WordPress og brugte i stedet tiden på at finde det rette WordPress tema, som var fleksibelt nok til at jeg kunne lave alle de ting som kunden gerne ville have.

Her er en tidlig version af designet, som stadig er under udvikling.

ffe-design