Har du æstetisk sans - og meninger om design - 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ængder, skriftstørrelser og layout?
Vil du være med i arbejdsprocessen, er det ikke uden betydning, hvordan du griber arbejdsprocessen an.
Dy kan arbejde smart og spare massevis af timer på designprocesen - eksempelvis ved at lade være med at designe alle sider.
Der er forskel på at lave designet - og layoute sider
Vente med at designe de enkelte sider.
Start med at fastlægge designets overordnede linjer.
Del designet op i moduler:
- Hvordan skal tekstmoduler se ud?
- Hvordan skal de forskellige overskrifttyper se ud?
- Hvordan skal knapper se ud?
- Hvordan skal faktabokse se ud?
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.
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. Dig, der overvejende har styr på, hvad der er pænt.
Guiden inspirerer dig i øvrigt til lave vigtige udkast til webdesign på en helt særlig måde.
Den handler derfor også om hvordan det kan gøres billigt, hurtigt og effektivt.
Dårlige arbejdsprocesser kan gøre det urimeligt tidskrævende at designe et website.
Du får derfor også et par råd om, hvad du skal passe på, hvis du involverer en grafisk designer (og programmør) i designprocessen. Det kan nemlig sagtens få dit budget til at løbe løbsk. Særligt hvis designeren ikke er vant til at arbejde i det system, der skal bruges til dit website.
Webdesign er 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.
Undgå at tidsforbrug og budget løber løbsk
Mange designere vælger så komplekse detaljer, at man skal håndkode. Og det tager tid.
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?
Man kan sy en nydelig kjole af ganske få stykker stof - og det behøver ikke tage mange minutter at sy stykkerne sammen.
Men en kjole kan også designes, så der skal bruges rigtige mange stykker stof, adskillige syteknikker og en erfaren dameskrædder.
Er du mere kreativ end teknisk?
At lave webdesign til et moderne webite kan gøres ganske enkelt. Men det kan også snildt ende som en omfattende affære. Mere end de fleste umiddelbart forestiller sig. Webdesign 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.
