Bruke Atomic Design i Modern Web Development
Hvis det er noe jeg har lært å jobbe for et teknisk selskap, er det for å bygge et nettsted - en virkelig fantastisk, vakker og velfungerende nettside - en rekke forskjellige talenter og elementer må samles og fungere i harmoni. Noen ganger kan det føles som å jobbe på Babel-tårnet: en person siver seg gjennom en palett med hexekoder, gutta på tvers av rommet rattler av en alfabetssuppe med forskjellige kodende akronymer, og kontoadministratoren er ved siden av meg på telefonen forklarer hvordan du bruker et innholdshåndteringssystem til en kunde, alt mens jeg prøver å skrive denne artikkelen på vanlig engelsk.
Alle disse elementene trenger en måte å komme sammen uten å gå seg vill i kakofonien, og det er et relativt nytt konsept som virkelig har hjulpet oss med å jobbe bedre som et team: designere, utviklere, testere ... alle.
Det heter Atomisk Design .
Hva er Atomic Design?
Komponentene til Atomic Design ble hentet fra designeren Brad Frost Fascinasjon med kjemi; Atomer er den minste enheten, bindende til molekyler, som igjen danner mer komplekse organismer, og til slutt skaper all materie i universet.
Så, hvis vi er i den internasjonale romstasjonen, ser ned på hele prosjektet som helhet, her er den ferdige hjemmeside-arten til et nylig prosjekt vi brukte Atomic Design til, Route 93 Pizza Mill :
Route 93 Pizzas hjemmeside består av alle våre elementer som en enhetlig, funksjonell nettside. Nå, hvis vi plasserer nettstedet under et mikroskop, kan vi se sine granulære komponenter:
Atomer: Nedenfor er atomene til Route 93 Pizza Mills nettsted. Atomene er de grunnleggende byggeblokkene, for eksempel etiketter, formetiketter, knapper, fargepalett og skrifter. Selv om det ikke er veldig nyttig alene, er atomer ditt foreløpige referansepunkt - begynnelsen av etableringen.
Molekyler: Molekyler er der atomer blir satt på jobb - hvor den ferdige webdesignen begynner å føle seg håndfast. I molekylene for Route 93 kan du se fargepaletten, skrifttyper og ikonografi komme sammen i formfelt, bildeoverlegg og knapper. De er, som Frost setter det, verktøyet ditt til å "gjøre en ting og gjøre det bra."
Organer: Når vi kommer til organismer, kan vi lage hele bunnteksten for Route 93. Den kombinerer alle de nevnte komponentene til et brukbart, estetisk nettsted.
Grensesnittet inventar: nå som vi har alle ingrediensene, trenger vi en håndgripelig meny som skal ordne dem til noe fordøyelig; et dokument som inneholder alle de ovennevnte elementene som en lesbar, brukbar ressurs-et grensesnitt inventar.
Selv om noen organisasjoner kaller dette et mønsterbibliotek eller stilveiledning og bruker grensesnittinventar spesielt for å referere til en revisjon de har gjort på et eksisterende nettsted, bruker vi begrepet Grensesnittbeholdning for våre egne prosjekter (samt revisjoner av andre nettsteder) som en del av en kontinuerlig evalueringsprosess.
Fordi arbeidsflyten av Atomic Design etterlikner noe av et kylling-eller-egg-type dilemma, tar grensesnittoppgørelsen seg vanligvis noe organisk etter opprettelsen av hjemmesiden og en annen side av nettstedet, men ikke så lenge etter det. Da disse to startsidene tar form, sikrer designeren at elementene på begge er konsistente. For alle sider etterpå har de deretter muligheten til å tegne fra lageret. Dette gir en kanonisk kilde for hvordan visuelle stilarter skal brukes gjennom hele prosjektet, et bokstavelig felles språk, på engelsk i heksekoder, knappestiler, polstringsbredder etc. som utviklere og hele teamet kan referere til.
Ved å designe en grensesnittbeholdning med Atomic Design-prosessen, kan vi starte med primitive moduler og sette dem sammen i ferdige elementer. Denne prosessen forbedrer effektiviteten, kommunikasjonen mellom lagmedlemmer, og produserer et vakrere nettsted generelt.
Hva Atomic Design gjør for oss
Atomic Design hjelper oss begge til å oppdage solide "sannheter" om prosjektets design vi jobber med, samt å skape et felles ordforråd mellom sine kunstneriske og tekniske aspekter. Den oppfordrer til et mer robust system som forbedrer UX og gir en metode slik at designere kan følge utviklerens komponentbaserte retningslinjer samtidig som kreativiteten opprettholdes.
Selvfølgelig kolliderer utviklere fra bakken mens tilnærmingen til en kunstner vanligvis begynner i en mer nebulous form, som deretter stivner inn i en funksjonell nettside etter noen støping. Atomic Design oppfordrer - og krever designere til å jobbe fra grunnen også, for å gjøre alt grensesnittets komponenter konsekvent og målrettet på lavest mulig nivå.
Etableringen av dette fellesspråket, representert av grensesnittbeholdningen, sikrer at designere og utviklere ikke oppfinner nye løsninger på problemer som allerede er løst. For eksempel, hvis et nytt kontaktskjema er lagt til i et prosjekt, eksisterer de stilene som trengs for å opprette det skjemaet allerede, og kan lett bli ansatt for å bygge siden, og anser det unødvendig for designeren å legge til ytterligere innsats. Det tar ikke nødvendigvis arbeid bort fra designeren, men i stedet gjør det enklere for utviklere å raskt bygge løsninger i stedet for å kreve at designeren skal mock opp hver side eller organisme først. Designerens rolle blir da flyttet til noe mer som kunstretning etter at sidene er bygget. Disse konkrete "sannhetene" fjerner også behovet for å bruke designeren som dommer. Spørsmål som "er dette designvalget hensiktsmessig?" Eller "hvilken farge skal vi bruke på dette bestemte elementet?", Så vel som endringsendringer eller tillegg til en side, blir besvart av grensesnittbeholdningen.
Det felles språket går videre til kvalitetssikring også. Når jeg tester en nettside for både innhold og funksjonalitet, trekker jeg grensesnittbeholderen opp på skjermen min som en veiledning. Selv om det fremdeles er et designerverktøy og for det andre et utviklerverktøy, tillater det at alle i teamet kan delta med tillit til samtaler om design og konsistens, da vi sørger for at våre nettsteder er upåklagelig og klar til overlevering til klienten.
Konklusjon
For å sikre riktig utførelse av et prosjekt, spesielt noen av de større, finner vi ofte oss takling, kommunikasjon er nøkkelen; hvis du roper en rekke forskjellige ideer på tvers av rommet på hverandre, vil ingenting som er mulig, aldri komme av det. Atomic Design bidrar til å fungere som oversetter for disse ulike avdelingene og "språkene" som går med dem for å opprettholde konsistens i design. Det etablerer en modulær ressurs for teamet, noe som muliggjør sammenheng og resultater i effektiv vendingstid, færre feil og et mer polert ferdig produkt.