Hvad er et “grid”?

Paw Hermansen

24. marts 2010

Grid er det engelske ord for gitter. Når man vil sætte ting pænt op på en side, så er det en god ide at bruge et grid. Ideen med et grid er, at man deler siden op med streger på kryds og tværs. I firkanterne mellem stregerne kan man sætte et element, for eksempel tekst eller et billeder, og reglen er, at elementet skal følge størrelsen af firkanterne.

Det er i orden, at lade en lang tekst fylder flere firkanter eller at lave et stort billede, der fylder flere firkanter. Man må imidlertid ikke sætte et element, så det fylder en tredjedel af een firkant og halvdelen af firkanten ved siden af – alle elementer skal følge en eller flere firkanter. Tit kigger man dog mest på opdelingen i lige brede grid-spalter og tillader højden på et element at være anderledes end højden på firkanterne.

Eksempler på udnyttelse af et grid

At bruge et grid begrænser naturligvis den kunstneriske frihed. Til gengæld er det for det første nemmere altid at få et godt resultat, og for det andet er det nemmere at komme i gang, når man har et konkret gitter at hænge design-elementerne ind i. Og selv med begrænsninger har man rigtig mange muligheder som vist på illustartionen til venstre, hvor der vises tre eksempler på brug af det samme grid.

Hvis du synes, du er for begrænset i dit grid, så overvej at lave et bedre grid. Hvis du laver dobbelt så mange grid-spalter, får du meget større fleksibilitet. Det betyder, at du tillader for eksempel billeder at starte midt i spalter, og at du kan lave halv-spaltede billedtekster.

Et grid er ikke en lov men en hjælp

Et grid er et godt hjælpe-værktøj, men husk på, at det altid er designeren selv, der bestemmer, så hvis du har en bedre ide end at følge dit grid til punkt og prikker, så gør som du synes. Et grid er ikke en lov men en hjælp.

Brugen af grid kan se meget avis-agtig ud, men med lidt kreativitet behøver det ikke være sådan, som de følgende eksempler viser.

Eksempel 1: Printermix.dk webside

Eksempel 1: Printermix.dk følger et grid

Mange websider, heriblandt Printermix.dk, er bygget op over et grid. Ofte deler grid’et kun siden i spalter og ikke på den anden led – eventuelt bortset fra en fast header foroven og en fast footer forneden.

Nogle websider ændrer sin bredde, når brugeren ændrer bredden på sit browser-vindue. Sådanne websider designer man med et grid, der ændrer sin bredde på samme måde, man ønsker websiden skal.

Eksempel 2: Visitkort

Eksempel 2: Et visitkort

I Design Visitkort viser jeg, hvordan jeg designede et Printermix visitkort. Jeg delte visitkortet i et grid på otte felter på hver led, og holdt mig til reglerne for at bruge et grid.

Ofte bliver resultatet bedst, hvis man bruger et ulige antal felter specielt med hensyn til antallet af spalter. I eksempel 1 ovenfor har jeg for eksempel fem spalter. Et ulige antal viser sig typisk at give den bedste balance på siden. For visitkortet bryder jeg imidlertid med den regel, og jeg synes, at resultatet er Ok alligevel.

Eksempel 3: Urskiver

Eksempel 3: Urskiver

Felterne i et grid behøver ikke altid at være firkanter. En urskive, for eksempel, er rund, og her er det andre simple inddelinger, der er naturligst, som det ses på de to eksempler fra Design et ur.

Den første af de to viste urskiver er delt i et meget simpelt grid, der består af to halvdele på hver sin side af en linie mellem klokken et og klokken syv. Opdelingen forstærkes af at teksten står på forskellige leder i de to halvdele.

Den anden urskive er delt i tre felter med linier strålende ud fra urets midte. Jeg har lavet to små felter og et stort, men man kan ligeså godt lave tre lige store felter, eller man kan lægge felterne på skrå, eller man kan lave flere felter.

I hvert fald viser urskiverne, at et grid ikke altid behøver at være firkanter. Brug fantasien og tilret de teknikker, du kender, til det problem, du gerne vil løse.

Kommentarer

Endnu ingen kommentarer til Hvad er et “grid”?. Du er meget velkommen til at komme med dine kommentarer, forslag eller nye ideer.

Skriv en kommentar