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.
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.
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.
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.
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.
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.
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.
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.
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.
Jag hoppas att det dåliga vädret inte påverkar ditt humör idag. Det är fredag, några timmar till och du är tillbaka på soffan och tittar på sport eller Netflix. 😊 Hej kära läsare, det här är Jordan från SnapStack Solutions. Jag hoppas att du hade en produktiv vecka trots stormarna, och när det gäller mig själv har jag arbetat med en annan artikel för dig. Som du redan antar att döma av titeln talar vi den här veckan om testning, eller automatisk testning specifikt.
Läs mer
Har du någonsin undrat hur Python blev så populärt? Plötsligt används detta programmeringsspråk överallt och efterfrågan på Python-utvecklare ökar för varje dag.
Läs mer
Internet, en gång en revolutionerande digital gräns, har blivit en välbekant miljö för oss. Men under dess yta pågår ett seismiskt skifte - Web3, nästa iteration av internet, lovar att omdefiniera hur vi interagerar, handlar och skapar online. Det är en grundläggande förändring som rör sig bort från den centraliserade kontrollen av tekniska jättar och mot en mer decentraliserad, användarcentrerad miljö. Inget av detta skulle vara möjligt utan de viktigaste web3-teknologierna som vi kommer att diskutera nedan.
Läs mer
