Så gör man en snygg webbplats
10 steg till en bättre design

Bakom denna djärva rubrik finns många goda tips och råd, men få är generella då skönheten ligger i betraktarens öga som man brukar säga. Vi har iallafall försökt hitta det vi anser är grundläggande i en bra webbdesign och lutar oss mot en artikel på ajaxflakes.com, en blog om modern webdesign.

Idag används ordet web 2.0 flitigt, men trots ordets många definitioner och otydlighet så sammanfattar det känslan i den design vi förespråkar på ett bra sätt. Ajaxflakes.com ger en bra definition på vad de menar med web 2.0 design: en nytillkommen formskola inom webbdesign knuten till de förändringar som webben genomgår idag mot starkare sociala strukturer och större interaktivitet . Man kan även se en annan trend mot ett rikare mediainnehåll (filmer och flashapplikationer), men denna inrikning har vi inte tagit upp här då den skiljer sig så mycket från övrig webbdesign och skulle behöva sin egen artikel.

Vad är då snygg web 2.0 design? En funktionell, social och interaktiv design? I slutändan handlar det om ett bra helhetsintryck som naturligtvis är större än de ingående delarna. Det kommer man aldrig ifrån. Men för att underlätta att nå fram till en bra design har vi fokuserat på antal punkter värda att ta fasta på. Det blir ingen formel för den ultimata webbdesignen och det går inte att följa punkterna slaviskt för att få en snygg webbplats. Tipsen utgör istället viktiga komponenter på väg mot en design som känns modern, är funktionell och attraktiv.

1. Enkelhet

Detta är det absolut viktigaste inom web 2.0 design. Men enkelhet är inte detsamma som torftighet eller extrem minimalism. Istället ska sidorna utformas med några få välarbetade element. Man kan uttrycka det som att man bör ta bort så mycket onödig information och effekter som möjligt, men det som finns kvar ska man arbeta noggrant med och göra så genomarbetat som möjligt. Jämför gärna med heminredning - nårga få vackra möbler ger bättre intryck än både många mindre vackra möbler eller för den sakens skull många vackra möbler som bara slåss om uppmärksamheten.

Se besökarens uppmärksamhet som en ändlig resurs - ju mer du lägger in i designen som inte uppfyller syftet destå mer av användarens uppmärksamhets slösas också på detta.

2. Centrerad layout

Webbplatser vars sidor ligger i mitten av webbläsaren har blivit lite av en trend idag. Det är inte bara en stilfråga utan en sida som ligger centrerad upplevs som enklare, rakare och ärligare. Man tar plats mitt i besökarens fokus och levererar sitt budksap på ett tydligt sätt.

Ibland fyller sidorna upp hela webbläsaren i sidled, oavsett hur bred eller smal man gör webbläsarfönstret. Men även i detta upplägg utgår man från mitten på webbläsaren och bygger sidan till webbläsarens kanter. Ajaxflakes.com sammanfattar idén om centrerad layout med att rekommendera att alltid positionera sidorna centrerat, om det inte finns något speciellt skäl till att inte göra det.

3. Få kolumner

Få kolumner knyter an tanken om enkelheten. Antalet kolumner som används på webbplatser har fallit under de senaste åren. Från ett snitt på fyra till tre eller färre. För mycket information förvirrar ögat, blir svårtillgänglig och informationsflödena börjar störa varandra. Få kolumner upplevs också som tydligare och rakare i kommunikationen. Man bör alltid ställa sig frågan - hur många kolumner, flikar eller boxar behöver vi verkligen för att föra fram vårt budskap. När hela webbplatsens design går mot enkelhet i form, sidpositionering och annat bör inte detta motverkas av för många kolumner och för mycket information.

Man kan däremot delvis komma undan att tvingas ha få kolumner med hjälp av design. Finns t.ex. en vertikal undermeny kan rätt designelement ändå skilja bort den från sidans övriga textkolumner. Samma gäller för en kolumn med banners eller informationspuffar. Då kan det vara möjligt att använda fyra kolumner, men det är inte alltför enkelt att åstadkomma detta.

4. Tydligt sidhuvud

Att ha en stort och tydligt sidhuvud är idag mycket populärt. Idén är visserligen inte ny, men den används nu mer än någonsin. Bildskärmar och skärmupplösningar blir större och formgivare tar för sig av den nya ytan med stora sidhuvuden. Sidhuvudet marknadsför logotypen, varumärket, och ger stadga åt hela sidan. Avsändaren, den som ligger bakom webbplatsen, blir tydlig.

Sidhuvudet talar om att här börjar sidan och allt som kommer sedan kan ta stöd i det tydliga taket. Sidhuvudet kan dessutom utnyttjas till grafiska ikoner och effekter (glöm bara inte enkelheten!) för att stärka intrycket av en väldesignad genomarbetad sida.

Många webbplatser har dessutom en horisontell meny i samband med sidhuvudet. Denna kan antingen läggas högst upp i sidhuvudet eller underst. I det senare fallet ligger logotypen överst vilket ger ett något mer fokuserat intryck och menyn är lättare att hitta. I sidhuvudet placeras också gärna generella och centrala funktioner som ska finnas tillgängliga på webbplatsens alla sidor.

5. Enkel navigation

Denna punkt är relativt uppenbar. Navigationen på en webbplats ska vara lätt att hitta, förstå och nå. Använd tydliga menylänkar med hjälp av färgval och stor text. Markera vilken länk i menyn som är aktiv. Använd gärna vanlig text för att skriva länkarna, inte text som bild. Tydligheten gäller även för alla länkar på sidorna. Markera dem konsistent med färgval, understykning eller andra grafiska element. En länk behöver inte vara standardblå och understuken med solid linje. Bara det är uppenbar att det är en länk det är frågan om och att man inte bryter den stil man har valt för sidan.

Många sidor har undermenyer som även de behöver vara tydliga. Låt dina besökare förstå var de befinner sig i trädstrukturen. Placera eventuella undermenyer på samma ställe på sidorna och använd grafiska effekter för att markera aktiva menyval.

6. Tillvaratagen sidarea

Ett intressant begrepp som definierades av Edward Tufte är "data ink" och motsvarande "non-data ink ". Här ses sidans pixlar som en areal, lite som en bit mark, där man mäter hur mycket av ytan som används för att föra fram buskapet och kommunikationen och hur mycket som används till effekter, detaljer och annat som inte kommunicerar ut budskapet. Tufte skapar ett ratio mellan data ink och non-data ink, vilket kan mäta effektiviteten i en design. Ju högre del data ink destå troligare är det att designen är effektiv.

Det finns många exempel på hur sidor översållats med häftiga skuggningar, små linjer, ramar i ilika nivåer osv. Intrycket kan bli häftigt och intensivt, men kommunikationen blir dålig. Man slösar helt enkelt med besökarens uppmärksamhet vilken bara finns i en begränsad mängd. Ett exempel på för mycket non-data ink ges på Ajaxflakes.com: sidan http://www.yaxay.com/ använder många pixlar på effekter och överarbetade ytor och linjer.

7. Stor och liten text

Balansen mellan stor och liten text har förändrats under åren. Förut var micro-typsnitt vanliga och rubrikerna var något större varianter av brödtexten. Idag är det istället vanligt att använda mycket stora typsnitt för rubriker och ingresser. Med större yta har fler möjligheter skapats och rubriker sätts i stora grader. För att motverka att det inte får plats med lika mycket text får författaren hålla sig kort vilket också vässar kommunikationen. Budskapet blir rakare och mer direkt. Rubriksättningen blir större och djärvare och det verkar också mot en tydligare kommunikation.

Denna utveckling skapar också en bättre balans mellan kommunicerande innehåll, data ink, och utfyllnad, non-data ink. Din text och det du vill säga hamnar mer i fokus. Det blir lättare att läsa dina budskap och dina texter. Även på sämre skärmar, platta skärmar i solljus, handdatorer, mobiler, når ditt budskap bättre fram.

8. Välarbetade ytor

Detta är en mer svårdefinierad punkt. Problemet grundar sig i att en datorskärm är en relativt stum och stel yta. Varje pixel lyser [förhoppningsvis] i samma styrka och med sitt ljus blir pixlarna inte beroende av omgivande ljus. Ett papper å andra sidan är en levande yta. Hur klorblekt det än är reflekterar pappret det omgivande ljuset och är aldrig lika vitt över hela ytan. Den är heller nästan aldrig 100% vit. De små nyanserna är vi vana vid eftersom hela den fysiska världen är full av dem. På skärmen försvinner detta helt och allt blir lika framträdande, lika starkt, lika exakt. Resultatet är att det känns livlöst och omänskligt.

När man då gör en form för en webbplats är det viktigt att motverka denna stelhet och livlöshet. De block och ytor som sidan består av kan ges svaga toningar, mycket små rundningar, skuggor, högdagrar och annat för att skapa liv. Det är dock mycket lätt att snubbla och vräka på för mycket. Då blir resultatet inte subtilt och därmed overkligt för oss. Återigen har det artificiella tagit över och vi upplever det som onaturligt.

Arbeta därför försiktigt på att mjuka upp dina ytor med subtila effekter. Reflektioner, glaskänsla, välvningar, speglingar kan alla användas med varsam hand. Rätt utnyttjat kan den stumma känslan i skärmgrafiken minimeras.

9. Grafiska effekter

De grafiska effekterna är godislådan i web 2.0 designen. De välarbetade ytorna i förra punkten slår an detta. Det finns en rad komponenter att använda sig av - ikoner, toningar, fylliga ikoner, polerade bordsytor/reflektioner, skuggor, blanka knappar och blickfångande stjärnor med erbjudanden. Det generella för dessa effekter är att de måste vara välarbetade, hellre få och välgjorda än många sämre som bråkar om uppmärksamheten.

Ikoner ska vara lätta att känna igen och designade med detaljer och mjuka toningar. Ikoner ersätter inte menylänkar, men när sidorna blir renare och enklare så finns större utrymme för avancerade ikoner som kan förstärka viktig information. De polerade borden är också nära överanvändning på moderna webbplatser, men det är ett enkelt sätt att skapa en tredimensionell djupkänsla i en platt miljö. Skuggor lyfter fram innehållet. En sida med skuggor längs kanterna står ut bättre mot bakgrunden. Knappar görs ofta blanka med reflektioner och högdagrar vilket också ger en fysisk känsla, lite som om det faktiskt gick att ta på knappen. Stjärnor används som slags etiketter för att föra fram erbjudanden. De utformas också ofta med toningar, blänk och skuggor för att verka realistiska. Nästan som om man faktiskt satt ett blankt klistermärke på sidan.

Det finns många fler effekter än dessa och alla bör användas varsamt. Effekterna är som efterrätten i designen, ögongodiset. Man kan inte bara ta en stor portion effekter utan det behövs en bättre grund att stå på. Men när grunden är lagd är det mycket trevligt att avsluta med nåt sött.

10. Målgruppsanpassning

En apekt som inte blir belyst på Ajaxflakes.com är målgruppsanpassningen. Visserligen är detta inget hanfast designgrepp men all design måste anpassas till den målgrupp man vänder sig till. Alla tidigare nämnda tumregler för att åstadkomma en bra webbdesign är underkastade målgruppsfokuset. Är du en myndighet som mer eller mindre vänder sig till hela svenska folket eller en fin restaurang som riktar sig till kräsna gourméer, blir det naturligtvis skillnad i hur du använder ovanstående punkter. En myndighet kanske tonar ner effekterna och detaljerna för att ge ett mer stadigt och pålitligt intryck, medan restaurangen satsar mer på sobra toningar och tilltalande ikoner för en exklusivare känsla. Kopplingen mellan form och målgruppskommunikation får vi kanske djupdyka i längre fram i en annan artikel.