Designsystem och komponentbibliotek · Lektion

Mellanrum, layout och ikonografi

Utveckla regler för mellanrum och rutnätslayouter samt skapa en skalbar ikonuppsättning för att bevara visuell harmoni i alla designer.

Lektion 2 av 411 steg

Mellanrum, layout och ikonografi är en gratis lektion i Designsystem och komponentbibliotek på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Designsystem och komponentbibliotek, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Designsystem och komponentbibliotek innehåller totalt 4 lektioner.

Visuell harmoni för användare

Har ni någon gång lagt märke till hur vissa appar helt enkelt känns "rätt" att använda? Ofta beror det på genomtänkta designval.

I den här lektionen utforskar vi tre grundpelare för visuell harmoni: konsekvent avstånd, effektiv layout och tydlig ikonografi. Dessa delar samverkar för att skapa en förutsägbar och behaglig användarupplevelse.

Det vita utrymmets kraft

Avstånd, även kallat "vitt utrymme" eller "negativt utrymme", är det tomma området mellan designelement.

Det förbättrar läsbarheten genom att separera innehåll.
Det vägleder användarens blick och skapar visuell hierarki.
Det minskar den kognitiva belastningen och får gränssnitt att kännas mindre röriga.

Tänk på det som luften runt innehållet!

Skapa ett avståndssystem

För att uppnå konsekvens använder designsystem ofta en basenhet för alla avståndsvärden. Ett vanligt val är 8 pixlar (8px) eller 4 pixlar (4px).

Alla marginaler, paddings och mellanrum blir sedan multiplar av denna basenhet (till exempel 8px, 16px, 24px och 32px). Det skapar en förutsägbar rytm och säkerställer att elementen alltid linjerar snyggt.

/* Example using an 8px base unit */
.card {
  padding: 16px; /* 2 * 8px */
  margin-bottom: 24px; /* 3 * 8px */
}

.button {
  margin-right: 8px; /* 1 * 8px */
}

Inre och yttre avstånd

Det är viktigt att förstå skillnaden mellan padding och margin.

Padding är utrymmet inuti ett element, mellan innehållet och kanten.
Margin är utrymmet utanför ett element, som separerar det från andra element.

Genom att använda dem korrekt kan ni styra hur elementen samspelar visuellt.

<style>
  .box {
    border: 1px solid blue;
    background-color: lightblue;
    width: 100px;
    height: 50px;
    margin: 10px; /* Space outside the box */
    padding: 20px; /* Space inside the box */
  }
</style>
<div class="box">Content</div>

Strukturera ert innehåll

Layout syftar på hur element arrangeras på en sida. En bra layout gör innehållet lätt att skanna och förstå och vägleder användarna genom informationen.

Den definierar hur olika sektioner, komponenter och textblock placeras i förhållande till varandra och skapar en tydlig visuell hierarki och ett tydligt flöde.

Rutnätet: Designens ryggrad

Grid-system är ramverk som hjälper designers och utvecklare att placera innehåll på ett konsekvent och strukturerat sätt. Vanligtvis delar de in en sida i kolumner och rader.

Ett vanligt exempel är ett grid med 12 kolumner. Den flexibla strukturen möjliggör många olika innehållslayouter samtidigt som allt hålls justerat.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 equal columns */
    gap: 16px; /* Gutter between columns */
    border: 1px dashed gray;
  }
  .col-4 {
    grid-column: span 4; /* Element spans 4 columns */
    background-color: #e0e0e0;
    padding: 8px;
  }
</style>
<div class="grid-container">
  <div class="col-4">Item 1</div>
  <div class="col-4">Item 2</div>
  <div class="col-4">Item 3</div>
</div>

Layouter för alla skärmar

En viktig aspekt av moderna layouter är responsivitet. Det innebär att designen ska anpassas och se bra ut på alla skärmstorlekar, från små telefoner till stora datorskärmar.

Grid-system och flexibla regler för avstånd är grundläggande för att bygga responsiva gränssnitt. De gör det möjligt för element att omorganiseras, ändra storlek eller staplas när det tillgängliga skärmutrymmet förändras.

Ikoner: universella visuella signaler

Ikoner är små grafiska symboler som representerar åtgärder, objekt eller idéer. De är kraftfulla verktyg i ett designsystem eftersom:

De förmedlar betydelse snabbt, ofta snabbare än text.
De sparar skärmutrymme, särskilt på mobila enheter.
De förbättrar navigeringen och gör det lättare för användare att känna igen funktioner.

En väl vald ikon kan säga mer än tusen ord!

Skarpa ikoner i alla storlekar

För att ikoner ska se bra ut på alla enheter måste de vara skalbara. Två populära format säkerställer detta:

SVG (Scalable Vector Graphics): Vektorbaserade, vilket innebär att de inte blir pixliga när de skalas. Mycket flexibla.
Ikonteckensnitt: Samlingar av ikoner som levereras som ett teckensnitt. Enkla att färgsätta och ändra storlek på med CSS, men begränsade när det gäller komplexitet.

SVG föredras vanligtvis tack vare sin flexibilitet och kvalitet.

<!-- Example of an SVG icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>

Kontroll av avstånd och layout

Testa dina kunskaper om hur avstånd och layout bidrar till en bra användarupplevelse.

Besvara frågan i den interaktiva lektionen

Bemästra visuella grunder

I den här lektionen har vi gått igenom hur avstånd, layout och ikonografi är avgörande för att skapa visuellt harmoniska och användarvänliga gränssnitt.

Konsekventa avstånd skapar en visuell rytm.
Grid-layouter organiserar innehåll och bidrar till responsivitet.
Skalbara ikoner ger tydliga visuella signaler.

Dessa element utgör grunden för ett starkt visuellt språk i alla designsystem.

Gratis att börja

Lär dig Designsystem och komponentbibliotek med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Mellanrum, layout och ikonografi” gratis?

Ja – hela texten till ”Mellanrum, layout och ikonografi” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Designsystem och komponentbibliotek, kan Ni uppgradera till CoddyKit PRO. Kursen i Designsystem och komponentbibliotek innehåller totalt 4 lektioner.

Vad lär jag mig i ”Mellanrum, layout och ikonografi”?

Utveckla regler för mellanrum och rutnätslayouter samt skapa en skalbar ikonuppsättning för att bevara visuell harmoni i alla designer. Ni övar på Designsystem och komponentbibliotek med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Designsystem och komponentbibliotek?

Du behöver inga förkunskaper. Utbildningen i Designsystem och komponentbibliotek på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Mellanrum, layout och ikonografi”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Designsystem och komponentbibliotek-lektionen?

Ja. Varje Designsystem och komponentbibliotek-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Designsystem och komponentbibliotek