Grid for webdesign

I denne artikkelen tar jeg for meg mine tanker rundt bruk av gridsystemer i webdesign og hvordan man skal komme godt i gang med design av en nettside.

av Steinar Borø, Designer

Hva er grid?
I grafisk design sammenheng er grid et hjelpeinstrument for å sette tekst og bilder i system slik at det danner en komposisjon. Et gridsystem er et rutenett som hjelper deg å få elementer på linjer. Dette brukes også aktivt innen webdesign; et rutenett for å hjelpe designerne til å skape en god komposisjon.

Ved å bruke et gridsystem som en hjelper blir det lettere å få elementer på linjer og i system. En godt designet nettside med et gridsystem som utgangspunkt vil øke brukervennligheten. En bruker har mye lettere for å orientere seg når det er klare inndelinger og system i nettsiden.

Skjermstørrelse:
Sist jeg sjekket på http://marketshare.hitslink.com/ var det hele 35% som hadde en oppløsning på 1024x768. Dette betyr at du har et område på 974x650 piksler å designe din nye nettside på. Dette gir begrensinger og problemer. De fleste ferdige gridmalene du kan laste ned i dag (se linker i bunn) er basert på denne oppløsningen. Det vil si at gridmalen er 960 piksler bred og vil akkurat passe inn på en skjerm som har en oppløsningen på 1024 piksler i bredden.

En nettleser har som regel en adressebar, bokmerkefelt og diverse andre felter som dekker skjermen. Det du sitter igjen med da er maks 650 px i høyden. Høyden er likevel litt mer variabel, grunnet muligheten til å rulle opp og ned på en nettside. I dag er de fleste nettbrukere kjent med ordet scroll eller rullehjulet, så du kan lage nettsiden så lang du vil. Det du må tenke på er at du skal fange brukeren, si ditt budskap, på de 650 pikslene i topp. Klarer du det, forsetter brukeren å rulle seg nedover nettsiden din.  

Hvordan komme i gang
Det er mange metoder og teknikker for å designe/lage en nettside. Jeg tar kun for meg design biten; hvordan tegne opp skisser slik at utvikleren/programmereren forstår hva jeg har gjort. Grunnen til dette er at det er slik min situasjon er, så jeg har best kjennskap til dette.

Det første steget er å velge et gridsystem som du vil lage designet på. Da må du velge etter dine behov og kompetanse. Et gridsystem med få kolonner er enkelt å holde styr på, men gir begrensinger. Et gridsystem med kjempe mange kolonner gir mange muligheter, men er vanskelig å holde styr på. I denne artikkelen velger jeg det populære og velkjente 960gs med 16 kolonner (http://960.gs).

Denne gridmalen finner du til de fleste programvarer. Jeg foretrekker å skisse nettsiden opp i Photoshop. Det er mange grunner til det, men en av dem er at den er piksel-basert og vil gi meg et rimelig nøyaktig inntrykk av hvordan nettsiden blir. Ta foreksempel Illustrator som er et vektor-basert program, så vil du få problemer med halve piksler, unøyaktige mål og tekst. Dette kan du selvfølgelig ha kontroll på om du hadde gjort hele prosessen, fra skisse til publisering, men det er ikke tilfelle i denne artikkelen.

Ved å velge Photoshop blir alle mål, avstander, skriften riktig. Da kan du forvente å få samme resultat i retur når programmererne er ferdig med å prosessere skissene dine til ferdig nettside. Vi velger altså 960gs 16 kolonner for Photoshop.

Skisser og inspirasjon
Et godt tips er jo å ikke begynne rett i Photoshop. Jeg anbefaler å bruke en del tid på lete etter inspirasjon. Kanskje finnet et par nettsider som passer bra til det designet du skal gjøre og så la deg bli inspirert.

Inspirasjonssider som jeg bruker mye er følgende:
http://bestwebgallery.com/
http://cssmania.com/
http://cssillustrated.com/

Dette er samleportaler for nettsider som utmerker seg. Det finnes selvfølgelig mange flere sider som dette, men jeg faller stadig tilbake på disse sidene og finner veldig mye god inspirasjon.

Når inspirasjonsrunden er ferdig, liker jeg å forsette for hånd. Skisse opp nettside med enkle streker og bokser slik at du får disponert innholdet på en god og logisk måte. Dette er et viktig punkt. Det er mye lettere å endre på oppsettet på et ark enn i photoshop. Dessuten blir du ikke hengt opp i detaljer når du skisser for hånd, noe som er en fare når du jobber i photoshop.

Til sutt
Dette er kun en liten del av hva en webdesigner gjør. Det finnes mange gridmaler, det finnes mange måter å lage en nettside på. Dette er kun en av de mange måter for å en god start når du skal lage nettside. Rett under her ser dere en liten liste med linker til diverse ressurser på gridbasert webdesign. Denne vil hjelpe dere på vei til å ta ting et steg lengre enn denne artikkelen.

Ressurslinker:

http://960.gs/
- Gridmaler for Fireworks, Inkscape, Illistratorm OmniGraffle, Photoshop & Visio. Inkluderer også utskriftbare gridmaler til å skisse på, og CSS rammeverk.
 
http://gridder.andreehansson.se/
- 960gridder er en bookmark som du legger til i nettleseren din, som legger gridsystem om nettsiden du besøker. Veldig greit verktøy om du skal la deg inspirere av andre nettsider.

http://www.gridsystemgenerator.com/
- Grid system generator, gjør som navnet tilsier, den lager gridsystem for deg etter dine egne preferanser.

http://www.thegridsystem.org/
- Dette er den ultimate ressursen på gridsystem, og dette ifølge nettsiden selv.