Vad är Atomic Design System Methodology?

Designers måste bygga komplicerade gränssnitt som fungerar bra i en mängd olika skärmstorlekar och sammanhang. Detta har förändrat hur designers närmar sig designprocessen.

Atomisk design är en sidbyggnadsteknik för att skapa framgångsrika användargränssnitt från grunden. Denna teknik inspirerades av naturvetenskap - atomer är de grundläggande byggstenarna i all materia, och två eller flera atomer förenas för att bilda molekyler.

Istället för att utveckla samlingar av webbsidor börjar atomdesign med de grundläggande användargränssnittskomponenterna som kallas atomer (knappar, menyalternativ och så vidare) och skapar successivt hela användargränssnittet.

Vad är egentligen Atomic Design?

Atomic Design är ett visuellt identitetssystem som använder atomer, molekyler, varelser, mallar och sidor för att separera hela processen att bygga visuella system på ett mer strukturerat sätt.

Till exempel är en söksikon och en inmatningsruta två distinkta atomer. Sätt ihop dem för att skapa en sökruta, och du har en molekyl. Du har precis skapat en mall genom att infoga platshållare för blockinnehåll under sökfältet. Fyll i tomrummen med innehållstext och foton för att skapa en hel sida.

Vem uppfann atomdesignmetoden?

Designer Brad Frost utvecklade atomdesignprocessen för att hjälpa designers att skapa återanvändbara UI-system. Han arbetar som webbdesigner, talare, författare och konsult. ”Atomic Design”, hans bok, presenterar processen för att utveckla och upprätthålla effektiva visuella identitetssystem.

Vilka är de fem stadierna av atomdesign?

Atomdesign, som vetenskap, börjar med den minsta förekomsten av någon onlinesida:

1. Atomer

Atomer är de minsta komponenterna på en webbplatssida. Atomer är grundläggande HTML-komponenter som erbjuder de minsta enheterna på en webbsida, till exempel knappar, etiketter och inmatningsfält, i atomdesign. Teckensnitt, färgpaletter och animationer är alla atomer.

2. Molekyler

Atomer förenas för att bilda molekyler, som är de näst minsta grupperingarna på en webbplatssida. En bloggprenumerationsruta som består av en fältetikett, ett inmatningsfält och en knapp är ett exempel på en molekyl.

3. Organismer

Organismer är samlingar av molekyler som samlas för att producera mer sofistikerade organismer. Organismen är vilken designsekvens som helst som förekommer på internetsidor i gränssnittstermer.

En webbplatssidas sidhuvud och sidfot består av två eller flera molekyler, vilket gör dem båda varelser. Sökfältet är ett exempel på en molekyl som kan användas för att skapa en rubrikkomponent.

4. Mallar

I det fjärde steget i atomtekniken börjar webbplatssidor ta form. Mallar är samlingar av varelser som arbetar tillsammans för att konstruera strukturen på en sida.

När vi tittar på en hemsida kan vi se de sidhuvud- och sidfotsorganismer som vi började med. Dessa arter arbetar tillsammans med andra för att bilda hemsidamallen, som illustreras i figuren ovan.

Mallar är användbara eftersom de garanterar att komponenterna i ett visuellt identitetssystem visas och fungerar korrekt. Atomiska designmallar kan ses som ett sidskelett.

5. Sidor

Designers har alla delar de behöver för att bygga upp sidor för en webbplats användargränssnitt efter de första fyra faserna.

Om de föregående fyra stegen följdes framgångsrikt tillåter det sista steget designers att lägga till foton, text och andra element för att få en känsla av hur användargränssnittet kommer att se ut.

Sidans slutliga utseende avgör om webbplatsen är redo att gå live eller om utvecklaren måste gå tillbaka och göra justeringar av tidigare designkomponenter.

Bygga visuella identitetssystem med Atomic Design

Atomdesignprocessen hjälper till att skapa en sammanhängande varumärkesidentitet på ett så delbart och effektivt sätt som möjligt.

Ja, alternativa sätt kan användas för att skapa ett visuellt identitetssystem. Atomtekniken leder dock inte till avsevärt minskat arbete för systemets övriga interna team.

Vad är egentligen ett visuellt identitetssystem?

Ett användargränssnittssystem är ett visuellt identitetssystem, ofta känt som ett designsystem. Det är inte bara för designers och utvecklare att samarbeta närmare och på ett väldokumenterat sätt; det är också för team att samarbeta närmare och på ett väldokumenterat sätt.

Det ger designers och utvecklare tillgång till visuella stilguider, typografisystem, färgsystem, tokens, mallar, komponentbibliotek som innehåller dokumenterade och kodade bitar som kan återanvändas, designmönster, röst- och tonriktlinjer och mycket mer.

Designsystemet som framkommer från atommetoden inkluderar alla komponenter som används samt deras medföljande koder. Både designers och utvecklare kan dra nytta av detta verktyg.

Varför atomdesign?

Det är effektivt i sig att bryta ner stora projekt i mallar, organismer och molekyler. Atomisk design hjälper designern att fokusera på mindre detaljer medan han fortfarande ser den bredare bilden - webbapplikationens användargränssnitt. Detta hjälper designers att undvika att bygga samma komponent två gånger, vilket sparar tid och uppmuntrar en kultur av återanvändbarhet.

Mer konsekvent webbplatskod

Atommetoden ger utvecklare de gränser de behöver för att korrekt implementera befintliga komponenter.

Utvecklare har ett enhetligt språk och struktur eftersom designkomponenter följer ett tillvägagångssätt som atomdesign.

Atomdesign är också fördelaktigt för alla utvecklare som har tilldelats ett nytt projekt. Utvecklingsteam kan helt enkelt identifiera mellan designkomponenter eftersom de alla är strukturerade och bör matcha alla mockups för nya webbplatssidor.

Design är det bästa stället att använda atomtänkande.

Atomdesign är en process för att skapa skalbara, begripliga och effektiva visuella identitetssystem. I slutet av dagen, att ha en källa till sanning för alla kreativa ansträngningar för nya webbplatssidor utvecklar en kultur av konsistens som många webbplatser idag saknar.

Flera UX/UI-designers i SnapStacks team är angelägna om att tillhandahålla de bästa lösningarna. Kontakta oss på contact@snapstack.cz eller via våra sociala medier om du behöver sådant material.

Ha en underbar resten av din vecka.

‍