Layout

Hur vi layoutar våra vyer är avgörande för hur vi upplevs. Nedan finns lite riktlinjer för hur vi bör förhålla oss rent formmässigt för att upplevas som enkla, pålitliga, mänskliga och härliga.

SJ ska upplevas som enkelt och okomplicerat. Vi arbetar med fokuserade vyer och flöden och är inte rädda för att ge utrymme åt det som är viktigt. Det innebär att vi är generösa med luft och att vi anpassar teckenstorlekar för att skapa en bra rytm och hjälpa ögat att fokusera på det som är viktigt. Undvik att pressa in för mycket på samma vy, tänk på att användaren ofta sitter på en liten mobilskärm och var inte rädd för att låta besökaren scrolla.

Bättre och sämre exempel på vyer:

Våra objekt är alltid lätt rundade. Det ger ett mjukare intryck och fungerar bra ihop med vår typografi och våra pigga varma färger. Det finns ingen fast radie, utan den anpassas efter objekt. Målet är att upplevas som mjuka men inte bulliga och barnsliga – undvik därför att ge objekten allt för stor rundning.

Bättre och sämre exempel på rundning:

Marginalerna i SJs digitala kanaler ökas eller minskas i steg om 8 px, där 16, 24 och 32 px är de vanligaste måtten. Vi strävar efter att använda liknande marginaler genomgående för att skapa mer konsekventa vyer vilket ger en lugnare upplevelse när man rör sig i våra digitala kanaler.

Vertikalt

Under 16 px, steg om 4 px: 0, 4, 8, 12 och 16.
Över 16 px, steg om 8 px: 16, 24, 32, 40, 48, etcetera.

Horisontellt

Steg om 8 px: 16, 24, 32, 40, 48, etcetera.

Använd Spacing-komponenten eller Spacing-tokens i Figma och React för att få till rätt mått och marginaler inom komponenter:

Använd Padding-komponenten eller Padding-tokens i Figma och React för att få till rätt avstånd i höjdled mellan komponenter:

Använd våra layoutmallar i Figma för att snabbt komma igång med att designa layouter för mobil, surfplatta och dator. Mallarna är byggda som komponenter, så om du vill lägga till komponenter i mallen behöver du först detacha instansen.