Brug af atomdesign i moderne webudvikling
Hvis der er noget, jeg har lært at arbejde for et teknologibedrift, er det for at opbygge en hjemmeside - en virkelig fantastisk, smuk og velfungerende hjemmeside - en lang række forskellige talenter og elementer skal samles og arbejde i harmoni. Sommetider kan det føles som at arbejde på Tårnet i Babel: en person siver gennem en palette af hexekoder, gutterne på tværs af rummet raser af en alfabet suppe med forskellige kodende akronymer, og kontoadministratoren sidder ved siden af mig på telefonen forklarer, hvordan man bruger et content management system til en kunde, alt sammen mens jeg forsøger at skrive denne artikel på almindelig engelsk.
Alle disse elementer har brug for en måde at komme sammen, uden at noget går tabt i cacophonyen, og der er et relativt nyt koncept, der virkelig har hjulpet os til at fungere bedre som et team: designere, udviklere, testere ... alle.
Det hedder Atomisk Design .
Hvad er Atomic Design?
Komponenterne for Atomic Design blev afledt af designer Brad Frost Fascination med kemi; atomer er den mindste enhed, bindende til molekyler, som igen danner mere komplekse organismer, og skaber til sidst alt materie i universet.
Så hvis vi er i den internationale rumstation, kigger vi ned på hele projektet som helhed, her er den færdige hjemmeside kunst til et nyt projekt, vi anvendte Atomic Design til, Route 93 Pizza Mill :
Route 93 Pizzas hjemmeside består af alle vores elementer som en samlet, funktionel hjemmeside. Nu, hvis vi placerer webstedet under et mikroskop, kan vi se dets granulære komponenter:
Atomer: Nedenfor er atomerne til Route 93 Pizza Mills hjemmeside. Atomer er de grundlæggende byggesten, som f.eks. Tags, formularer, knapper, farvepaletten og skrifttyper. Selvom de ikke er meget nyttige på egen hånd, er atomer dit foreløbige referencepunkt - begyndelsen af din skabelse.
Molekyler: molekyler er hvor atomer er sat til arbejde - hvor det færdige website design begynder at føle sig håndgribeligt. I molekylerne for Route 93 kan du se farvepaletten, skrifttyperne og ikonografien komme sammen i formularfelter, billedoverlejringer og knapper. De er, som Frost sætter det, dit værktøj til at "gøre en ting og gøre det godt."
Organer: Når vi ankommer til organismer, kan vi oprette hele fodfoden til Route 93. Den kombinerer alle de førnævnte komponenter til et brugbart, æstetisk websted.
Interface Inventory: Nu hvor vi har alle ingredienserne, har vi brug for en håndgribelig menu, som kan ordne dem til noget fordøjeligt; et dokument, der indeholder alle ovenstående elementer som en læsbar, brugbar ressource-en grænsefladeinventar.
Mens nogle organisationer kalder dette et mønsterbibliotek eller en stilguide og bruger grænsefladeinventariet specifikt til at henvise til en revision, de har gjort på et eksisterende websted, bruger vi begrebet Interface Inventory til egne projekter (samt revisioner af andre websteder) som en del af en løbende evalueringsproces.
Fordi arbejdsstrømmen af Atomic Design efterligner noget kylling-eller-æg-type dilemma, tager grænsefladeinventariet normalt form noget organisk efter oprettelsen af hjemmesiden og en anden side af hjemmesiden, men ikke for længe efter det. Da disse to indledende sider tager form, sikrer designeren, at elementerne på begge er konsistente. På alle sider derefter har de evnen til at trække ud af opgørelsen. Dette skaber en kanonisk kilde for, hvordan visuelle stilarter skal anvendes i hele projektet, et bogstaveligt fælles sprog, på engelsk, på hexekoder, knapstile, polstring af bredder mv., Som udviklere og hele teamet kan henvise til.
Ved at designe en Interface Inventory med Atomic Design processen kan vi starte med primitive moduler og samle dem i færdige elementer. Denne proces forbedrer effektiviteten, kommunikationen mellem holdmedlemmer og skaber en smukkere hjemmeside samlet.
Hvad Atomic Design gør for os
Atomic Design hjælper os begge til at opdage solide "sandheder" om projektets design, vi arbejder på, samt skabe et fælles ordforråd mellem dets kunstneriske og tekniske aspekter. Det tilskynder til et mere robust system generelt, der forbedrer UX og giver en metode, så designere kan overholde udviklerens komponentbaserede retningslinjer samtidig med at kreativiteten bevares.
Udviklerne kører naturligvis fra bunden, mens en kunstners indfaldsvinkel normalt begynder i en mere nøgen form, som derefter størkner ind i en funktionel webside efter en del støbning. Atomic Design opfordrer og -designere til at arbejde fra bunden også, for at gøre alle grænsefladens komponenter konsistente og målbevidste på det lavest mulige niveau.
Oprettelsen af dette fælles sprog, repræsenteret af grænsefladebeholdningen, sikrer, at designere og udviklere ikke opfinder nye løsninger på problemer, der allerede er løst. Hvis f.eks. En ny kontaktformular er tilføjet til et projekt, eksisterer de stilarter, der er nødvendige for at oprette formularen, og kan nemt bruges til at opbygge siden og anser det unødvendigt for designeren at lægge yderligere indsats. Det tager ikke nødvendigvis arbejde væk fra designeren, men i stedet gør det lettere for udviklere hurtigt at opbygge løsninger i stedet for at kræve, at designeren mocker hver side eller organisme først. Designerens rolle bliver så skiftet til noget mere som kunstretning efter siderne er blevet bygget. Disse håndgribelige "sandheder" fjerner også behovet for at bruge designeren som dommer. Spørgsmål som "er dette design valg forsætligt?" Eller "hvilken farve skal vi bruge på dette særlige element?" Samt ændringer i sidste øjeblik eller tilføjelser til en side besvares af grænsefladeinventarien.
Det fælles sprog handler også om kvalitetssikring. Når jeg tester en webside for både indhold og funktionalitet, trækker jeg grænsefladeinventariet op på min skærm som en vejledning. Selv om det frem for alt er et designerværktøj og for det andet et udviklerværktøj, tillader det, at alle i teamet kan deltage med tillid til samtaler om design og konsistens, da vi sørger for, at vores websteder er upåklagelige og klar til overdragelse til kunden.
Konklusion
For at sikre en korrekt gennemførelse af et projekt, især nogle af de større, vi ofte finder os selv at tackle, kommunikation er nøglen; hvis du råber en række forskellige ideer på tværs af lokalet på hinanden, er det ikke muligt at komme med noget. Atomic Design hjælper med at fungere som oversætter for disse forskellige afdelinger og de "sprog", der følger med dem, for at opretholde konsistens i design. Det etablerer en modulær ressource for holdet, hvilket giver mulighed for sammenhæng og resultater i effektiv vendingstid, færre fejl og et mere poleret færdigt produkt.