Har du æstetiske sans, vil du sikkert gerne være med til at bestemme, hvordan dit websites skal designes - måske vil du bare vælge farver og skrifttyper. Måske har du også meninger om linjelænger, skriftstørrelser og layout?
Du behøver ikke designe hele sider for at påvirke designet. Faktisk er det bedre at vente med at designe de enkelte sider. Start hellere med at fastlægge designets overordnede linjer.
Og husk, at pænt design er ikke nok. I dag, hvor alle og enhver kan bruge flotte designskabeloner til webdesign, skal der meget mere til.
Djævlen er gemt i detaljerne.
Pænt webdesign er ofte problematisk
Godt webdesign er meget mere end det æstetiske og synlige.
Lad mig vise dig et eksempel … for at inspirere dig til ikke kun at fokusere på at lave pænt design.
Det her vil nogle mene er pænt- guldfarvet håndskrift.
Men det er også dårligt design. Jeg ser problemer på stribe:
På mobil ser det således ud:
Når jeg ser “pænt design” på et website, kigger jeg altid “mellem linjerne”. For at spotte eventuelle problemer.
Jeg ser blandt andet disse problemer ved den guldfarvede skrift:
- Farvet tekst får folk til at tro, at det er et link, man kan klikke på
- Guldskriften er raffineret og elegant - men svær at læse, hvis man IKKE ved, hvad der står
- Håndskrift fanger ikke dem, der skimmer og skanner en side
- Overskriften signalerer feminin pynt og det kan have negativ effekt, hvis websitet skal sælge jordnære løsninger til både mænd og kvinder
- Skrifttypens finurlige detaljer fungerer ikke godt på små skærme
- Brødteksten er for lillle - den KAN læses, men flere vil give op
Ovenstående er blot ét af utallige eksempler på, at vi skal fokusere på andet og meget mere end “pænt”.
Lav webdesign - selvom du ikke er designer
Denne miniguide om webdesign er til dig, der mangler teknisk og praktisk viden om mobilvenligt webdesign til nutidige brugere.
Guiden inspirerer dig til at lave de første vigtige udkast til webdesign.
Den handler også om hvordan det kan gøres billigt, hurtigt og effektivt.
Smart design handler nemlig også om at bruge smarte arbejdsmetoder, når man layouter siderne.
Du får også et par råd om, hvad du skal passe på, hvis du involverer en grafisk designer (og programmør) i designprocessen. Det er nemlig ikke altid helt nemt. Særligt ikke, hvis grafikeren ikke er godt inde i det tekniske og praktiske.
Webdesign er nemlig langt fra som at pakke en gave i pænt papir. Det er ikke bare et lag man lægger på for at pynte indholdet.
Vi skal designe for at kommunikere og ikke bare for at dekorere.
Undgå at tidsforbrug og budget løber løbsk
Forkerte designmæssige valg kan nemt få tidsforbruget og budgettet til at løbe løbsk.
Mange designere vælger så komplekse detaljer, at det kræver professionel viden og erfaring at vedligeholde og udvikle websitet.
Mange vælger designmæssige løsninger, der er pæne - men upraktiske for besøgende og dyre at arbejde med.
Sådanne udfordringer kan du - om du vil - forebygge ved ikke bare at bruge smagsløg og æstetisk sans, når du vælger design.
Hvor bøvlet må dit design være at arbejde med?
At vælge design til sit website er som at købe en fin festkjole.
Vil du have masser af farver, flæser blonder og et vildt mix af spændende materialer?
Kan du leve med, at den skal sendes til professionel rens - eller foretrækker du, at den kan smides i vaskemaskine, hænges til tørre på bøjle og så er klar til brug?
Er du mere kreativ end teknisk?
At lave webdesign til et moderne webite er omfattende. Mere end de fleste umiddelbart forestiller sig. Og det er meget andet end kreativ leg med farver, billeder, ikoner og skrifttyper.
- Nogle trin i processen er komplekse og tekniske.
- Nogle handler primært om at træffe kreative valg.
Arbejdet kan derfor med stort fordel deles op i niveauer. Ofte er det også en fordel at lade flere om at løse opgaven.
De kreative beslutninger er mange fristet til selv at klare.
De tekniske og praktiske overlades derimod ofte til nørdede eksperter.
I gamle dage krævede det ligefrem en programmør at forvandle et kreativt designudkast til fungerende webdesign.
I dag findes der smarte værktøjer og metoder - skabeloner og pagebuildere - der kan gøre designprocessen nemmere, hurtigere og billigere end nogensinde. Det kræver så blot, at designudkastet matcher det valgte værktøj.
I denne guide fokuserer jeg på det kreative arbejde med webdesign. Og på de metoder, der er nyttige til at lave det kreative design:
- Mood board
- Style tile
Arbejdet med webdesign kan med fordel inddeles i forskellige niveauer, der stiller forskellige krav. At lave mood board og style tile er de to mest kreative trin i processen. Det er de trin, de fleste af mine kunder helst deltagere i.
- Et mood board handler om den overordnede stil og stemning. Det kræver ikke faglig viden at lave mood board til et website. Det kan eksempelvis være en collage af billeder, farver, skrifttyper …
- Et style tile viser byggeklodserne så at sige. Det er ikke design af hele sider, men eksempler på de dele i designet, der kombineres. Eksempelvis farvepalet og skrifttyper med eksempler på, hvordan de skal bruges i praksis.
De to elementer - mood board og style tile - er særligt nyttige, når websitet skal bygges ved at bruge en såkaldte pagebuilder.
Smarte genveje til godt design
Pagebuilder er et værktøj, der bruges til at lave det visuelle lag på hjemmesiden.
Den indeholder utallige halvfærdige delelementer, der kan mixes på utallige måder: tekstbokse og billedmoduler med forskellige funktioner. Knapper, ikoner, kontaktformular, billedgalleri etc. Alle de grundlæggende indstillinger er lavet til de forskellige moduler. Men stort set alt kan justeres: farver, skrifttyper, kolonner, billeder.
Tidsforbruget vil så ikke mindst afhænge af:
- Hvor mange detaljer skal justeres
- Hvor mange moduler skal bruges
- Skal alle sider designes forskelligt
Det kan altså blive nemt og hurtigt - hvis man tænker sig lidt om.
Men et kan også hurtigt vælte dit budget, hvis designeren er ligeglad med (eller ikke kender) de praktiske og tekniske udfordringer.
Tag hensyn til tidsforbruget
Starter man med mood board og style tile, er man klar til det praktiske og tekniske - bygge sider ved at samle moduler og lave alle de nødvendige indstillinger: få eller mange indstillinger.
Der er tre tungtvejende grunde til ikke at gå amok i designmæssige detaljer:
- Tidsforbruget kan løbe helt løbsk, hvis designet kræver mange forskellige indstillinger
- Websitet bliver langsommeligt at arbejde med og ændre på, hvis der er ændret på utallige unikke indstillinger
- Komplekst webdesign kan gøre det nødvendigt at involvere en professionel ved selv små forandringer
Jeg vælger som regel den mest enkle løsning
Selvom jeg kan ændre stort alt på mit eget website - og har kompetencerne til at gå amok i vilde designmæssige løsninger - vælger jeg oftest det mindst tidkrævende, det mindst bøvlede. For at gøre det hurtigt og nemt (og sjovt!) at lave det kreative arbejde.
Når jeg får udkast fra designere, er der ikke altid taget sådanne hensyn. Ofte fordi designeren ikke engang er klar over, hvad der er nemt og hurtigt at lave - og hvad der måske ligefrem er ekstremt tidkrævende.
Stil krav til din designers kompetencer
Måske har du (og/eller din designer) en helt klar mening om det æstetiske udseende, selvom I måske ikke har den store praktiske erfaring med at bygge et website. Måske mangler I ligefrem viden om mange af de udfordringer, man også skal have styr på for at lave godt webdesign:
- Værktøjernes muligheder og begrænsninger
- Brugernes digitale læsevaner, søgevaner og købsvaner
- Informationsstruktur (hvordan skal indhold inddeles)
- Adfærdsdesign (hvad påvirker digitale brugere)
- Content design (hvordan kan design påvirke indhold)
Godt webwesign handler om meget mere og meget andet end æstetisk design. Det er ligefrem risikabelt at fokusere på, om designet er pænt - for pænt er ikke nødvendigvis godt. Nogle gange er det ligefrem nødvendigt at gå på kompromis og fravælge det “pæne”.
Eksempler på pænt design, der ikke er godt design:
- Farve på overskrifter - det kan koste synlighed og klik
- Ingen farve på link
- For lille forskel på skrifttyper
- Brede tekstlinjer
- Lysegrå tekst
Mange er dygtige til at lave pænt design - men det er langt fra alle, der er inde i de utallige praktiske krav, man skal stille til et webdesign. Det er derfor ikke ualmindeligt, at jeg får designudkast med masser af farlige fejl og mangler.
Når du sender design til en webproducent (som mig) er det vigtigt, at du (eller din designer) tænker på det som udkast og forslag - ikke som en fiks og færdig løsning, der skal bruges uden justeringer.
Lav et overordnet udkast - et style tile
- Et style tile er et visuelt designværktøj (ofte en enkelt side), der definerer det overordende grafiske udtryk og designsprog for et digitalt projekt.
- Et style tile er ikke et design af de enkelte sider. Det fastlægger “kun” alle de overordnede og grundlæggende detaljer.
- Et style tile fungerer som en mellemting mellem et færdigt website layout og et stemningsfuldt moodboard.
- Et style tile foreslår overordnede rammer, som en webudvikler eller programmør kan bruge i arbejdet med at lave de enkelte sider - eller fravælge, hvis økonomi eller effekt ansporer til det.
Hvad skal et style tile indeholde
Et style tile kan fastlægge de helt overordnede rammer - men kan også gå i detaljer. Følgende er i mange tilfælde rigeligt til at komme i gang:
- Farvepalet: Primære og sekundære farver med tilhørende hex-koder. Med eksempler på, hvor og hvordan farverne skal anvendes.
- Typografi: Skrifttyper og formatering til henholdsvis overskrifter, mellemrubrikker, brødtekst, fakta-bokse, togglebokse etc.
- UI-elementer: Konkrete eksempler på knapper (f.eks. call-to-action-knapper), formularfelter og ikoner.
- Teksturer og mønstre: Forslag til baggrunde, streger eller grafiske mønstre.
- Logo: Virksomhedens logo.
Et style tile skal samle og vise de vigtigste visuelle byggesten - gerne på ét ark eller én side.
Når webproducenten går i gang med at omsætte designerens flotte udkast til virkelighed (i det valgte system) viser det sig meget ofte, at mange detaljer er ubrugelige eller besværlige i praksis. Alt for meget skal justeres - eller endog laves helt om.
Det kan blive voldsomt tidskrævende (dyrt, bøvlet og frustrerende for alle involverede) at korrigere et designudkast, der ikke i tilstrækkelig grad tager højde for virkelighedens udfordringer og behov.
Hvorfor bruger man style tiles?
Style tiles er især ideelt til den tidlige designfase. Fordi det hjælper med at afstemme forventninger, før der bruges tid på egentlig programmering og/eller indstillinger.
Fordele ved style tile:
- Mere konkret end et moodboard: Det viser præcise, konkrete designelementer frem for blot stemningsbilleder og farveklatter.
- Mindre låsende end et designudkast: Det viser stilelementer, men definerer ikke selve websitets faste layout. Det gør designarbejdet fleksibelt, så det lettere kan tilpasses forskellige skærmstørrelser. Webproducenten får mere frie hænder til at træffe fornuftsbaserede valg.
Moodboard
Et moodboard bruges typisk tidligt i processen til at fastlægge:
- Stemning
- Visuel retning
- Inspiration
- Billedstil
- Farveunivers
Et moodboard er ofte mere følelsesmæssigt end konkret.
Læs mere her om at lave mood board.
Når et style tile skal omsættes til praktisk design, kan det være en fordel at bruge metoden atomic Design som en del af arbejdsprocessen.
