Grid
Vores visuelle udtryk er bygget op omkring et grid, så vi kan skabe sammenhæng og konsistens på tværs af materialer. Griddet guider dig til, hvordan du skal placere billeder, tekster og det femte element, så vores materialer altid er on brand.
Tag et kig på eksemplerne her og læs beskrivelsen af definitionen på vores grid længere nede.
Layouts med grid
Opbygning af grid
Vores brand grid indeholder to forskellige grids, der er lagt ovenpå hinanden – tekstgrid og det femte element grid. Det femte element grid forholder sig altid til udregningen af tekstgriddet, så derfor defineres tekstgriddet først. Læs med her for en uddybende forklaring.
Tekstgrid (rød)
Start med at definere margin og gutter på dit tekstgrid.
Tekstgriddet kan laves i enten 6, 12 eller 24 spalter afhængig af format. Vi bruger 12 spalter som udgangspunkt – 6 til små og meget smalle formater og 24 til store samt ekstra brede formater.
På den måde opnår vi en mere fleksibilitet i størrelsen på det femte element, som altid skal følge det femte element griddet.
Det femte element grid (blå)
Definer herefter dit femte element grid.
Gutterværdien fra dit tekstgrid divideres med to og lægges til på ydersiden af din margin på dit tekstgrid. Derved finder du din margin på det femte element griddet.
Øvrige guides i det femte element griddet placeres i midten af gutter på dit tekstgrid.
Samlet grid
Her ser du de to grids samlet, som du skal placere tekst, det femte element og billeder efter.
Hvis du bruger billede i sammenhæng med et femte element, placerer det sig altid ift. det femte element grid.
Hvis du derimod eksempelvis placerer to billeder ved siden af hinanden med tekst under og har brug for mellemrum (gutter) imellem dine spalter, placerer billeder sig ift. tekstgriddet.
Logo forholder sig som udgangspunkt altid til tekstgriddet, men der kan som ved alt andet være undtagelser fra reglen – hvis det giver mere mening i det enkelte tilfælde.
Eksempler
Vi har foruddefineret en række grids i forskellige formater, så du kan tage udgangspunkt i dem, når du skal i gang med at designe nye materialer. Herunder kan du se specifikationer på A4 bredformat, A4 højformat, social media formater og web. Derudover kan du finde yderligere grids i arbejdsfiler på konkrete materialer, der allerede er produceret.
A4 højformat
Format: 210 x 297 mm
Tekstgrid (rød)
Margin
Top: 10 mm
Bund: 10 mm
Venstre: 12,5 mm
Højre: 12,5 mm
Kolonner
Antal: 12
Gutter: 5 mm
Spaltebredde: 10,833 mm
Det femte element grid (blå)
Margin
Top: 10 mm
Bund: 10 mm
Venstre: 10 mm
Højre: 10 mm
Kolonner
Antal: 12
Gutter: 0 mm
Spaltebredde: 15,833 mm
A4 bredformat
Format: 297 x 210 mm
Tekstgrid (rød)
Margin
Top: 10 mm
Bund: 10 mm
Venstre: 12,5 mm
Højre: 12,5 mm
Kolonner
Antal: 12
Gutter: 5 mm
Spaltebredde: 18,083 mm
Det femte element grid (blå)
Margin
Top: 10 mm
Bund: 10 mm
Venstre: 10 mm
Højre: 10 mm
Kolonner
Antal: 12
Gutter: 0 mm
Spaltebredde: 23,083 mm
SoMe square
Format: 1080 x 1080 px
Tekstgrid (rød)
Margin
Top: 69 px
Bund: 69 px
Venstre: 97,5 px
Højre: 97,5 px
Kolonner
Antal: 6
Gutter: 57 px
Spaltebredde: 100 px
Det femte element grid (blå)
Margin
Top: 69 px
Bund: 69 px
Venstre: 69 px
Højre: 69 px
Kolonner
Antal: 6
Gutter: 0 mm
Spaltebredde: 157,5 px
SoMe story
Format: 1080 x 1920 px
Safe area: gråt område
(som ikke bør indeholde
vigtig tekst og grafik)
Tekstgrid (rød)
Margin
Top: 250 px
Bund: 250 px
Venstre: 97,5 px
Højre: 97,5 px
Kolonner
Antal: 6
Gutter: 57 px
Spaltebredde: 100 px
Det femte element grid (blå)
Margin
Top: 250 px
Bund: 250 px
Venstre: 69 px
Højre: 69 px
Kolonner
Antal: 6
Gutter: 0 mm
Spaltebredde: 157,5 px
SoMe landscape
Format: 1200 x 628 px
Tekstgrid (rød)
Margin
Top: 24 px
Bund: 24 px
Venstre: 37 px
Højre: 37 px
Kolonner
Antal: 12
Gutter: 26 px
Spaltebredde: 70 px
Det femte element grid (blå)
Margin
Top: 24 px
Bund: 24 px
Venstre: 24 px
Højre: 24 px
Kolonner
Antal: 12
Gutter: 0 px
Spaltebredde: 96 px
Website
Format: 1536 px bred
Tekstgrid (rød)
Margin
Venstre: 48 px
Højre: 48 px
Kolonner
Antal: 12
Gutter: 24 px
Spaltebredde: 98 px
Det femte element grid (blå)
Margin
Venstre: 24 px
Højre: 24 px
Kolonner
Antal: 12
Gutter: 0 px
Spaltebredde: 122 px