Använda Atomic Design i Modern Web Development
Om det finns något jag har lärt mig att arbeta för ett tekniskt företag, är det för att bygga en webbplats - en riktigt fantastisk, vacker och fungerande webbplats - en mångfald olika talanger och element måste samlas och arbeta i harmoni. Ibland kan det kännas som att arbeta på Babeltornet: En person siktar genom en palett med hexkoder, killarna över rummet rattlar av en alfabetssoppa med olika kodande akronymer, och kontochefen ligger bredvid mig på telefonen förklarar hur man använder ett innehållshanteringssystem till en kund, samtidigt som jag försöker skriva den här artikeln på vanlig engelska.
Alla dessa element behöver ett sätt att komma ihop utan att gå vilse i kakofonin, och det finns ett relativt nytt koncept som verkligen har hjälpt oss att fungera bättre som ett team: designers, utvecklare, testare ... alla.
Det heter Atomic Design .
Vad är Atomic Design?
Komponenterna för Atomic Design härleddes från designer Brad Frost Fascination med kemi; Atomer är den minsta enheten, bindande i molekyler, som i sin tur bildar mer komplexa organismer, så småningom skapar allt materia i universum.
Så, om vi är i den internationella rymdstationen, tittar ner på hela projektet som helhet, här är den färdiga hemsidan för ett nytt projekt vi tillämpade Atomic Design på, Route 93 Pizza Mill :
Route 93 Pizzas hemsida består av alla våra element som en enhetlig, funktionell webbplats. Om vi placerar webbplatsen under ett mikroskop kan vi se dess granulära komponenter:
Atomer: Nedan finns atomer för Route 93 Pizza Mills hemsida. Atomen är de grundläggande byggstenarna, som taggar, form etiketter, knappar, färgpalett och teckensnitt. Även om de inte är särskilt användbara på egen hand, är atomer din preliminära referenspunkt - din skapelsens början.
Molekyler: molekyler är där atomer sätts på jobbet - där den färdiga webbplatsdesignen börjar känna sig konkret. I molekylerna för Route 93 kan du se färgpalett, teckensnitt och ikonografi samlas i formfält, bildöverlagringar och knappar. De är, som Frost säger det, ditt verktyg för att "göra en sak och göra det bra".
Organismer: När vi når fram till organismer kan vi skapa hela sidfoten för Route 93. Den kombinerar alla ovannämnda komponenter till en användbar, estetisk webbplats.
Gränssnittsinventariet: Nu när vi har alla ingredienserna behöver vi en konkret meny som ska ordna dem till något smältbart. ett dokument som innehåller alla ovanstående element som en läsbar, användbar resurs - en gränssnittsinventering.
Medan vissa organisationer kallar detta ett mönsterbibliotek eller en stilguide och använder gränssnittsinventarier för att specifikt hänvisa till en revision som de gjort på en befintlig webbplats använder vi begreppet gränssnittsinventarier för egna projekt (liksom revisioner av andra webbplatser) som en del av en kontinuerlig utvärderingsprocess.
Eftersom arbetsflödet för Atomic Design efterliknar något dilemma av kyckling eller ägg, tar gränssnittets inventering vanligtvis något organiskt ut efter att hemsidan har skapats och en annan sida på webbplatsen, men inte så länge efter det. Eftersom dessa två första sidor tar form, garanterar designern att elementen på båda är konsekventa. För alla sidor därefter har de sedan möjlighet att dra ur inventeringen. Detta skapar en kanonisk källa för hur visuella stilar ska tillämpas i hela projektet, ett bokstavligt gemensamt språk, på vanlig engelska, av hex-koder, knappstilar, vadderingsbredder etc. som utvecklare och hela laget kan referera till.
Genom att utforma en gränssnittsinventar med Atomic Design-processen kan vi börja med primitiva moduler och montera dem i färdiga element. Denna process förbättrar effektivitet, kommunikation mellan lagmedlemmar och producerar en vacker webbplats övergripande.
Vad Atomic Design gör för oss
Atomic Design hjälper oss både att hitta solida "sanningar" om projektets design vi jobbar med, samt skapa en gemensam ordförråd mellan sina konstnärliga och tekniska aspekter. Det uppmuntrar ett mer robust system som totalt förbättrar UX och ger en metod, så konstruktörer kan följa utvecklarnas komponentbaserade riktlinjer samtidigt som kreativiteten bibehålls.
Naturligtvis kodar utvecklare från grunden medan en konstnärs tillvägagångssätt vanligtvis börjar i en mer slarvig form som sedan solidifieras till en funktionell webbsida efter viss formning. Atomic Design uppmuntrar - och kräver designers att arbeta alltifrån grunden också, för att göra alla gränssnittets komponenter konsekventa och ändamålsenliga på lägsta möjliga nivå.
Införandet av detta gemensamma språk, som representeras av gränssnittsinventariet, säkerställer att designers och utvecklare inte uppfinnar nya lösningar på problem som redan har lösts. Till exempel, om en ny kontaktformulär läggs till i ett projekt, existerar de stilar som behövs för att skapa det formuläret enkelt och kan enkelt användas för att bygga sidan, och anser att det är onödigt för formgivaren att lägga fram ytterligare ansträngningar. Det tar inte nödvändigtvis arbete bort från konstruktören, utan gör det lättare för utvecklare att snabbt bygga lösningar istället för att kräva att konstruktören mockar upp varje sida eller organism först. Designerns roll flyttas sedan till något mer som konstriktning efter att sidorna har byggts. Dessa konkreta "sanningar" eliminerar också behovet av att använda designer som domare. Frågor som "är det här designalternativet avsiktligt?" Eller "vilken färg borde vi använda på det här elementet?" Liksom ändringar i sista minuten eller tillägg till en sida besvaras av gränssnittsinventariet.
Det gemensamma språket bedriver även kvalitetssäkring. När jag testar en webbsida för både innehåll och funktionalitet drar jag gränssnittsinventariet upp i min skärm som en guide. Trots att det är ett designerverktyg och för det andra ett utvecklingsverktyg gör det möjligt för alla i teamet att delta med förtroende för konversationer om design och konsistens, eftersom vi ser till att våra webbplatser är oklanderliga och redo att överlämnas till kunden.
Slutsats
För att säkerställa ett korrekt genomförande av ett projekt, i synnerhet några av de större som vi ofta finner oss att ta itu med, är kommunikation viktig. om du skriker en rad olika idéer över rummet på varandra, kommer någonting som inte är möjligt någonsin att komma av det. Atomic Design hjälper till att fungera som översättare för dessa olika avdelningar och "språk" som går med dem för att upprätthålla konsistens i design. Det skapar en modulär resurs för laget, vilket möjliggör koherens och resultat i effektiv vändning, färre misstag och en mer polerad färdig produkt.