Grafisk hierarki/grid

Den grid som är vald, består av 8 kolumner som vardera är 87 px breda. Marginalen mellan dessa kolumner är 20 px. Utanför de yttersta kolumnerna är marginalen 10 px
Anledningen till att man jobbar efter grids är att alla objekt ska ha en storlek som förhåller sig proportionerligt till övrigt innehåll och detta hjälper till att skapa balans, struktur och tydlighet.
 

Hur man använder sig av griddens kolumner

Dessa 8 kolumner går att kombinera i olika konstellationer beroende på syfte. Exempelvis om man ska ha en vänsternavigation, en yta för innehåll (rubrik, ingress, brödtext och bild) samt puffar så kan man kombinera kolumnerna så att 2 kolumner används till navigationen, 4 till innehållet och 2 till puffen. Om man använder samma upplägg för hela applikationen eller webbplatsen blir dessutom objekten återanvändbara på olika sidor ex. en puff som används på undersidan kan enkelt få plats på startsidan. Infällda bilder i innehållsdelen (som består av 4 kolumner) kan till exempel ha storleken av 1 kolumn och texten flödar runt bilden. Allt detta för att skapa balans, struktur och tydlighet i informationen man presenterar. Marginalerna är alltid samma, 20 pixlar, mellan kolumnerna även om man har slagit ihop två (87+20+87 = 2 kolumner). En kolumn kan också delas upp på mitten om behov finns.
 
Objekt som påverkas av kolumnen är t.ex. bilder, textytor, navigationen, puffar och i de flesta fall hur olika objekt linjerar med varandra.
Kontakt MSB.se

Fredrik Höglund
010-240 51 46
fredrik.hoglund@msb.se