10 tips för bra webbdesign

Smaken är olika heter det ju, och det som uppskattas av vissa personer gillas inte alls av andra. Kan man ens säga vad som är en bra webbdesign? Det tycker vi - för på webben går funktionalitet och design hand i hand.

Vad är webbdesign?

I vår värld talar vi ofta om användarupplevelse, UX och UI. 

När man talar om UX (User eXperience) design syftar man på designarbete som förbättrar användarnas upplevelse av en tjänst eller produkt (vilket inte är detsamma som enbart den visuella designen). Det handlar om att man som användare ska förstå hur man ska använda en sajt, tjänst, app eller funktion, och inte behöva fundera eller uppleva problem längs vägen. 

UI (User Interface) betyder användargränssnitt och handlar om det faktiska visuella utseendet för en tjänst eller produkt, till exempel färger, knappar, grafik, bilder, men också om den uppfattning och känsla som detta ger användaren. 

En bra webbdesign är helt enkelt en design som fungerar bra för användaren - egentligen oavsett om man tycker att det är "snyggt" eller "fult",  inte gillar färgerna, typsnitten eller bilderna. Så jo, det finns bra och mindre bra webbdesign.

Unik design utifrån varumärke och grafisk profil

En bra webbdesign ska också rent visuellt utgå från och förstärka det egna varumärket - både utifrån hur man vill uppfattas och vem man är och den grafiska och visuella profilen.

Våra tips på bra webbdesign

Att designen ska vara responsiv och både fungera och se lika bra ut i alla skärmstorlekar är en självklarhet, och vi förespråkar också att den ska vara tillgänglighetssäkrad.

Nu när vi klarat av den lilla inledningen kommer här 10 tips för vad vi tycker är bra webbdesign:

• Ha en tydlig navigering utifrån behov. Om det bara behöver finnas fyra menyval - ha en tydlig toppmeny där valen syns hela tiden. behövs många olika nivåer med många menyval - gör en översiktlig megameny. 
• Låt knappar och andra vanliga element att fungera förutsägbart så att användare kan använda dem överallt utan att behöva tänka. 
• Använd typografi som passar för webben och som är lätt att läsa
• Gruppera innehåll och olika typer av data så att besökaren enkelt ser vad som hör ihop (tyvärr är det vanligt att det på många sajter i mobilvyer är svårt att se vilken text och länk som hör till vilken bild när man scrollar neråt).
• Använd ett antal utvalda färger som passar ihop - gärna med någon tydlig accentfärg för exempelvis viktiga val och knappar. Det blir lätt spretigt och svårt att få överblick om det är för många olika färger.
• Använd animationer och rörliga element på rätt sätt och överanvänd det inte. Det kan ge ett stökigt intryck och det är svårt för användaren att se vad du vill lyfta fram.
• Lyft upp det viktigaste först på en sida och låt djupare information komma längre ner. Tänk på att användaren inte alltid börjar på startsidan.
• Ha alltid en tydlig avsändare - vem är ni och var kan man kontakta er. 
• Var inte rädd för extra luft i designen eller för att låta användarna scrolla. "Luft" i designen kan även användas som ett sätt att gruppera innehåll, och för att skapa en angenämare upplevelse för besökaren (UX). Motsatsen till luft kan vara "Wall of text", något som man kan uppleva som överväldigande.
• Var konsekvent!

En liten not: Det kan ju vara så att ett varumärke VILL och SKA sticka ut och vill uppfattas som oförutsägbara och disruptiva - då kan man kasta alla tipsen ovan överbord och tänka tvärtom. Göm länkar i rörligt innehåll och låt besökaren få överraskas av vad som händer när de scrollar eller klickar och av vad som döljer sig bakom varje länk.

Bonustips!

Vår webbdesigner letar ofta inspiration på webben - ibland är det bra att titta på exempel för olika delar (exempelvis en navigering, en sidfot, ett bildspel). Och det kan även vara ett bra sätt att tillsammans hitta både rätt preferensramar och känsla men även rätt ambitionsnivå.

Här är några av hans länkar att hitta inspiration på:

• Inspirationssajt som sällan gör en besviken, ägd av Adobe: www.behance.net
• Och såklart kan man hitta inspiration på gamla Pinterest: pinterest.com
• awwwards.com är en klassiker, men innehåller skiftande kvalitet. Fiska försiktigt.
• Ibland kan man få inspiration av bara bilder: butdoesitfloat.com
• Och ibland kan det vara helt korrekt att stj... låna inspiration från konkurrenternas hemsidor.