Hvordan vi bruger komponentbaseret design

Heavyweight er et digitalt designstudie i Amsterdam til målorienterede startups, virksomheder og agenturer. Vi skriver om vores oplevelser med at designe apps, websteder, platforme og systemer.

Komponentbaseret design tales ofte om i sammenhæng med store, komplekse projekter. I denne artikel gør vi sagen for, at det også kan være meget fordelagtigt for mindre projekter og teams. Hos Heavyweight bruger vi komponentbaseret design til hvert projekt - stort eller lille.

Først og fremmest tip vi vores hat til Brad Frost, som bogstaveligt talt skrev bogen om Atomic Design. Han introducerede os til ideen om, at vi faktisk ikke designer websider eller app-skærme, men faktisk designer designsystemer.

Vi fandt imidlertid, at den metaforiske karakter af Atomic Design forårsagede en vis forvirring blandt vores klienter. Især de abstrakte navnekonventioner kan være lidt skræmmende. Derfor definerede vi vores eget tag på det; Komponentbaseret design, der låner stærkt fra andre store designere - selvfølgelig.

Lad os dykke ind: Hvad er det?

I det væsentlige er Component Based Design den praksis at opdele UI i mindre, mere håndterbare dele med klare navne. Hver af disse dele falder i en af ​​seks forskellige grupper.

1. Identitet

Den første af disse seks grupper er Identitet. Heri definerer vi projektets centrale brandelementer. Typografier, typografi, primære og sekundære farver er alle omhyggeligt specificeret. Bagefter bruges disse i hele projektet.

2. Elementer

Den anden gruppe definerer projektets mindste genanvendelige dele: elementer. Et par velkendte eksempler på elementer er ting som: knapper, links, input, drop-downs osv. Hver af dem er defineret sammen med alle deres tilstande; såsom knapper, markør og deaktiverede knapper. Vores mantra er: Definer en gang, genanvendes gennem hele projektet.

3. Komponenter

Den tredje gruppe arbejder sig op i skala, og det er komponenter. Når man arbejder på at designe apps og web-designs, er de fleste blokke på skærmen Komponenter. En komponent kan være noget, der bruger mindst et par elementer. Ting som kort, helte og navigationsmenuer er traditionelle eksempler på komponenter. De behøver dog ikke nødvendigvis at se modulære ud.

Når vi designer komponenter, opretter vi også versioner af det til hver af projektets responsive størrelser (eller breakpoints) med det samme. På denne måde behøver vi aldrig at backtrack til skærme, vi har designet for uger siden, og få dem til at passe på en smartphone bagefter. De responsive mål aftales på forhånd med kunden, og hver komponent er designet i overensstemmelse hermed.

4. Kompositioner

At gå op i skala igen, den fjerde gruppe er Kompositioner. En sammensætning er en del, der har flere komponenter inde i sig. De definerer, hvordan komponenter i det skal opføre sig.

Nedenfor er et eksempel på et simpelt kolonnelayout. Dette er en meget enkel sammensætning. Det definerer kun noget hvidrum omkring sammensætningen, en titel og hvordan komponenterne inde er skal sløjfe. Jordnødder!

5. Layout

Den femte gruppe, Layout, er en mere abstrakt samling af designprincipper. Heri defineres mængderne af hvidrum, gitre og indpakninger. Ved at definere dem sådan, er det let for andre designere at komme ind i et projekt og bruge de eksisterende stilarter og retningslinjer.

6. Sider

Den sidste gruppe er de faktiske sider (eller skærmbilleder) af projektet. Hver side består af et arrangement af kompositioner og komponenter.

Alle de underlige undtagelser er defineret på sideniveau. Lad os sige, at kontaktsiden skal have en blå baggrund, fordi vores venner i marketingafdelingen siger det ... Vi tilføjer det kun på sideniveau.

Eksempel

Lad os se på et meget simpelt eksempel på komponentbaseret design.

Lad os sige, at vi sælger billetter til en eller anden begivenhed. Der er tre forskellige billetter tilgængelige. Hver af billetterne er repræsenteret på samme måde med et begrænset antal elementer inde i - i dette tilfælde en knap og noget tekst. Dette betyder, at en billet skal repræsenteres som en komponent: Ticket-komponenten.

Lad os nu sige, at vi vil have de tre billetter på vores hjemmeside i et enkelt layout med tre kolonner. Det er her vi beslutter at designe en komposition: Tickets-kompositionen. Denne sammensætning specificerer, at hver af billetkomponenterne skal have et rum imellem dem og en titel over dem.

To dage efter projektets lancering ønsker klienten at tilføje tekst til billetterne og siger, at de er udsolgt. Dette betyder, at vi kun skal opdatere Ticket-Component og sende den videre til udviklerne. Hurtig som en cricket!

Læs mere: Hvordan vi designer komplekse systemer ved hjælp af komponentbaseret design.

Skitse

Det er ingen hemmelighed, at Sketch hurtigt er blevet go-to applikationen til UI og UX design. Brug af Sketchs tekstformer, symboler og tegnebræt gjorde det muligt for os at finjustere vores komponentbaserede design-arbejdsgang enormt. Vi udviklede en vidunderlig Sketch-skabelon, der har alle disse principper indbygget, så vi hurtigt kan starte et projekt hurtigt.

At bruge lidt mere tid på at definere alle dine tekstformater sparer samlet set meget tid.

Afslutter

Kort sagt, komponentbaseret design giver os mulighed for hurtigt at designe mange skærme, der er lette at vedligeholde og opdatere med nye funktioner. Flere designere kan arbejde på det samme projekt unisont, fordi alt er klart defineret.

Hvis du nød dette, kan du overveje at dele denne artikel - det hjælper virkelig!

Følg vores komponentbaserede design på Dribbble.
Inspiration & bag kulisserne på Instagram & Twitter.

Tror du, at denne designtilgang er den rigtige til din næste app, hjemmeside eller komplekse system? Lad os tale om det over kaffe i Amsterdam.