Bryta ner systemet med Atomic Design
under utveckling
För att göra ett designsystem modulärt och skalbart behöver man bryta ner komponenter i deras byggstenar. Detta skapar möjlighet att designers kan bygga ihop system i deras projekt med förutsättningar och krav/behov som dom har. De grundläggande byggstenarna utgår ifrån den grundläggande dokumentobjektmodellen som finns i HTML.
Det finns en metodik som heter “Atomic Design” som är framtagen av Brad Frost som är ett bra upplägg när man ska bygga skalbara designsystem i kombination med grafiska riktlinjer.
“När jag letade efter inspiration och paralleller kom jag tillbaka till kemi. Tanken är att all materia (vare sig fast, flytande, gas, enkel, komplex, etc.) består av atomer. Dessa atomenheter binds samman och bildar molekyler, som i sin tur kombineras till mer komplexa organismer för att till slut skapa all materia i vårt universum. På liknande sätt består gränssnitt av mindre komponenter. Det betyder att vi kan bryta hela gränssnitten ned i grundläggande byggstenar och arbeta därifrån. Det är den grundläggande kärnan i atomkonstruktion.”
-Brad Frost
Nivåer inom Atomic Design
Atomer
Molekyler
Organismer
Mallar
Sidor
1. Atomer
Atomer är de grundläggande byggstenarna av materia. Tillämpade på webbgränssnitt är atomer våra HTML-taggar, till exempel en formetikett, en inmatning eller en knapp.
Atomer kan också innehålla mer abstrakta element som färgpaletter, typsnitt och ännu mer osynliga aspekter av ett gränssnitt som animationer.
Som atomer i naturen är de ganska abstrakta och ofta inte särskilt användbara på egen hand. De är emellertid bra som referens i sammanhanget för ett bibliotek eftersom du kan se alla dina globala stilar och få en bra överblick.
2. Molekyler
Saker börjar bli mer intressanta och konkreta när vi börjar kombinera atomer tillsammans. Molekyler är grupper av atomer bundna samman och är de minsta grundläggande enheterna i en förening. Dessa molekyler har sina egna egenskaper och fungerar som ryggraden i våra designsystem. Till exempel är en formuläretikett, inmatning eller knapp inte för användbar av sig själva, men kombinerar dem tillsammans som en form och nu kan de faktiskt göra något tillsammans.
Att bygga upp molekyler från atomer uppmuntrar en ”gör en sak och gör det bra” mentalitet. Medan molekyler kan vara komplexa, är de som tumregel relativt enkla kombinationer av atomer byggda för återanvändning.
3. Organismer
Molekyler ger oss några byggstenar att arbeta med, och vi kan nu kombinera dem tillsammans för att bilda organismer. Organismer är grupper av molekyler som sammanfogas för att bilda en relativt komplex, distinkt del av ett gränssnitt.
Vi börjar bli allt konkretare. En kund eller beställare kanske inte är oerhört intresserad av molekylerna i ett designsystem, men med organismer kan vi se det slutliga gränssnittet börja ta form. Dan Mall använder elementcollage, som artikulerar idéer för några viktiga organismer för att underlätta klientsamtal och forma den visuella riktningen (allt utan att behöva konstruera fullständiga komps).
Organismer kan bestå av liknande och / eller olika molekyltyper. Till exempel kan en header organism bestå av olika komponenter som en logotyp, primär navigering, sökformulär och lista över sociala mediekanaler. Men en "produktnät" -organism kan bestå av samma molekyl (som eventuellt innehåller en produktbild, produktnamn och pris) upprepade om och om igen.
Att bygga upp från molekyler till organismer uppmuntrar att skapa fristående, portabla och återanvändbara komponenter.
4. Mallar
I mallfasen bryter vi vår kemi-analogi för att komma in på språk som är mer vettigt för våra kunder och vår slutliga produktion. Mallar består mestadels av grupper av organismer som sys samman för att bilda sidor. Det är här vi börjar se designen samlas och börja se saker in action.
Mallar är mycket konkreta och ger sammanhang till alla dessa relativt abstrakta molekyler och organismer. Mallar är också där kunder börjar se den slutliga designen på plats. Enligt min erfarenhet av att arbeta med denna metod börjar mallar livet som wireframes, men ökar med tiden sin fidelity för att till slut bli den slutliga leveransen.
5. Sidor
Sidor är specifika exempel på mallar. Här ersätts placeholder-innehåll med verkligt representativt innehåll för att ge en exakt bild av vad en användare i slutändan kommer att se.
Sidor är den högsta nivån av fidelity och eftersom de är de mest påtagliga är det vanligtvis där de flesta i processen tillbringar större delen av sin tid och vad de flesta reflektionerna kretsar kring.
Sidsteget är viktigt eftersom det är där vi testar designsystemets effektivitet. Genom att se allt i sammanhang kan vi gå tillbaka för att modifiera våra molekyler, organismer och mallar för att bättre hantera designens verkliga sammanhang.
Sidor är också platsen för att testa variationer i mallar. Till exempel kanske du vill formulera hur en rubrik som innehåller 40 tecken ser ut, men också visa hur 340 tecken ser ut. Hur ser det ut när en användare har en artikel i sin kundvagn kontra 10 artiklar med en rabattkod tillämpad? Återigen påverkar dessa specifika fall hur vi går igenom och konstruerar vårt system.