Grids

Grids skapar ramen inom vilken innehåll kan placeras. Gridens kolumner och mellanrum styr hur innehållet kan placeras på den givna ytan.

Open

Grid för Mobile, Tablet, Desktop och Desktop Wide

Innehållsförteckning

Komponentkällor

1177

 

 

Inera

 

 

Designspecifikation

För att standardisera designarbetet och underlätta för så väl design- och konceptprocesserna som för utvecklingen av gränssnittet så används ett sk. gridsystem. Gridsystemet består av kolumner (columns) och mellanrum (gutters). Detta underlättar när man jobbar med responsivitet och där innehållet ska gå att tillgodogöra sig på bästa sätt på olika skärmstorlekar.

Kolumner, bredd och marginaler

• Grids ser likadana ut oavsett varumärke.

• Griden vi använt är baserad på 12 kolumner för dator och tablet, samt övergår till 6 kolumner för mobil.

• Både innehållsytan och de yttre marginalerna anpassas dynamiskt efter skärmens storlek.

  • Mobile: Innehållsyta cirka 288 px, med 16 px marginal på vardera sida.

  • Tablet: Innehållsyta cirka 736 px, med 16 px marginal på vardera sida.

  • Desktop: Innehållsyta cirka 1264 px, med 88 px marginal på vardera sida.

  • Desktop Wide: Innehållsyta cirka 1392 px, med 24 px marginal på vardera sida.

• För bredare gränssnitt som är fluid (att layouten växer och krymper dynamiskt i takt med skärmens bredd) har vi en maxbredd på 1920 px för att säkerställa god läsbarhet och undvika att innehållet blir obekvämt brett på stora skärmar. Detta ger en mer kontrollerad och användarvänlig upplevelse oavsett skärmstorlek.

• I Figma finns olika grids för olika ändamål:
  Desktop, Desktop Wide (främst för adminsystem, där innehållet har mindre marginaler), Tablet och Mobil.
  
  

Open

Desktop Grid

 

Open

Desktop Wide Grid

 

Open

Mobile Grid

 

Breakpoints

I design är komponenter anpassade till antingen desktop grid eller mobilt grid. I kod använder vi oss av tre olika breakpoints enligt storleksmodellen small, medium och large:

• Default >1024px

• Medium <1024px >640px

• Small <640px

Exempel på Desktop Grid och Desktop Grid Wide

Desktop Grid har idag marginalen 88 px på vardera sida. I Desktop Grid Wide minskar marginalen till 24 px för att kunna nyttja mer yta på bredden. De exempel som finns under detta avsnitt visar hur samma gränssnitt i en admin-tjänst förändras baserat på vilket grid som används.

Open

Desktop Grid (till vänster) och Desktop Grid Wide (till höger)

Open

Desktop Grid (till vänster) och Desktop Grid Wide (till höger)

Feedback

Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.