Sådan bruges wireframes med designsystemer

Foto af Med Badr Chemmaoui på Unsplash

I mine 10 år som UX-designer er et af de hyppigste spørgsmål, jeg er stillet om wireframes, hvor meget visuel detalje, der skal lægges i dem.

Der er en attraktiv elegance ved en enkel sort / hvid skitse, men det kan undertiden føre til huller i den fælles forståelse af, hvordan det endelige produkt virkelig ser ud.

Trådrammer lyser i de tidlige faser af produktudviklingen, når ideation og hurtig iteration værdsættes mest. Men hvad der gør dem ideelle til denne fase forhindrer dem også i den næste fase, når pixelpræcision og visuelle detaljer kræves til implementering.

Som et resultat forsøger mange mennesker (jeg har været skyld i dette) at integrere finkornede og æstetiske detaljer i deres wireframes ved at indstille skrifttyper, tilføje farver og bruge andre visuelle effekter.

Dette kan ofte føre til forvirring, når disse prototo-high-fidelity wireframes bruges som implementeringsspecifikationer og sendes "over muren" til udviklingsholdet. De fleste wireframing-værktøjer er ikke optimerede til at skabe artefakter, der ligner og føles som et færdigt produkt. Alligevel er det tidskrævende at skabe polerede gengivelser af hver skærm eller en prototyp af høj kvalitet, og det kan måske ikke oversættes godt til det endelige produkt alligevel.

Men er der en anden måde?

Der er det bestemt! En måde, hvor du kan holde dine wireframes lav tro, men alligevel opnå den stærke fælles forståelse af det implementerede udseende og fornemmelse.

Design systemer til redning

Et alternativ til at skubbe wireframes ud over deres grænser er at holde dem lav tro, og lade et andet værktøj gøre arbejdet med at specificere udseendet og fornemmelsen.

I denne artikel forklarer jeg, hvorfor i det mindste for webapplikationer og websteder er et fremragende værktøj til dette job et designsystem.

Lad os definere, hvad et designsystem er, inden du dykker ind.

Ligesom deres forløber, stilguider, definerer designsystemer applikationens udseende og fornemmelse. De går dog et skridt videre, idet de ofte definerer adfærd også og støttes af arbejdskode.

Store virksomheder har brugt designsystemer i lang tid. Indtil for nylig var de for arbejdskrævende for mindre virksomheder, da de ofte krævede dedikerede designere og udviklere, der arbejdede uden for de primære produktteams.

Her er et eksempel fra IBM Carbon Design System, der viser udseende og kode for knapper.

Carbon Design System knapper

Designsystemets landskab ændrede sig, efter at Bootstrap-rammen blev frigivet i 2011. Det er et gratis startkit til webudvikling, der leverer kompatible, robuste HTML-skabeloner og generelt flot CSS-stilarter, der kan tilpasses dit brand.

Det leveres med sine egne gitter- og typografidefinitioner samt stilarter til knapper, formularer og mere. Kort sagt kræver det meget af det hårde arbejde at starte et webprojekt og sørge for, at det fungerer på tværs af browsere.

Bootstrap og andre rammer som den er blevet brugt som fundament for designsystemer til mindre virksomheder, der ikke har ressourcer til at opbygge deres egne.

Som du kan se nedenfor, ligner Bootstrap meget virksomhedsdesignsystemer som vist ovenfor.

Bootstrap knapper

Design Systems + Trådrammer i praksis

Den største fordel ved at parre et designsystem med et wireframing-værktøj er, at det kan frigøre dig fra at bekymre dig om udseende, fornemmelse og opførsel, når du wireframing. Alligevel giver de pixel-perfekte gengivelser af de endelige produktkomponenter.

Når du allerede ved, hvordan en knap (eller fane, menu osv.) Ser ud, og hvordan dens statusovergange vil være, når du klikker på den, behøver du ikke at style den i din wireframe. Sort og hvid og Balsamiq Sans er helt fint.

At have et designsystem til at henvise til kan give dig mulighed for at hoppe direkte fra wireframes til kode uden at lade den endelige vision være ubegrænset.

Sådan kan du parre dem sammen. Du finder ud af, at de kommer godt overens sammen!

Hvis du allerede har et designsystem, fantastisk. Hvis ikke, kan du starte med en tilpasset download af Bootstrap eller Foundation. Det næste trin er at oprette en kortlægning mellem det og kontrollerne i dit wireframing-værktøj.

En kortlægning betyder dybest set at udvikle en delt aftale om “dette betyder det”. Du kan gøre dette ved at oprette et dokument, der viser disse kortlægninger eller ved blot at have et møde med design- og udviklingsholdene omkring en skærm for at finde ud af det.

Her er et eksempel på, hvordan du muligvis kan kortlægge nogle Balsamiq-kontroller til Bootstrap-komponenter (du kan også starte med Bootstrap Wireframes To Go-biblioteket).

Enkel kortlægning af wireframe-kontroller til kodede UI-kontroller
Bemærk: Det er ok at bruge noget farve, men det skal kun bruges så meget som nødvendigt for at indikere tilstande og valg, f.eks.

At have denne form for kortlægning betyder, at udviklere ikke længere er nødt til at spekulere på, om farverne i wireframe formodes at blive brugt i deres kode. De kan bare oversætte i hovedet, at en blå knap i wireframe faktisk betyder en grøn knap i brugergrænsefladen (hvis det er den farve, du bruger), og at brødkrum, der er adskilt med> tegnet, faktisk skal adskilles med / tegnet i appen , for eksempel.

Du kan også udvide dit designsystem ved at oprette dine egne Balsamiq-kontroller som symboler til kortlægning til andre komponenter i dit bibliotek, som dette:

Balsamiq-symboler, der er kortlagt til at designe systemkomponenter

Denne kortlægning kan udvikle sig og vokse med tiden, når behov og designsprog ændres i din organisation.

Her er et simpelt eksempel, der viser, hvordan en afsluttet wireframe kan se ud, når den er bygget sammen med et designsystem.

Bemærk: Blåt i wireframe behøver ikke at betyde blåt i det færdige produkt.
Oprettet i BalsamiqOprettet med kode

Trådramme til arbejdskode uden yderligere designartefakter imellem!

At have et designsystem betyder også, at du genbruger den samme kode på tværs af alle dele af din applikation, så forskellige udviklere producerer den samme brugergrænseflade, hvilket fører til bedre standarder og konsistens. Og hvis designsystemet bliver opdateret, behøver wireframes ikke at ændres.

Endelig kan designere stole mere på lagerkontrollerne inde i værktøjet i stedet for at bruge timer på at prøve at gentage udseendet på egen hånd, så både design- og udviklingscyklusserne forkortes.

Resumé

Intet fungerer naturligvis for alle. Denne tilgang er ikke garanteret at fungere for alle projekter eller organisationer. For eksempel er det bedre egnet til interne teams.

Klienter uden for din organisation er mere tilbøjelige til at se en model med høj trofasthed. De fleste af startdesignsystemerne er også til webbaserede produkter. Systemskabeloner og eksempler på desktop- og mobilapplikationsdesign er mindre almindelige.

Til sidst og måske vigtigst af alt, skal du have en god kommunikation mellem design- og udviklingsteams for denne tilgang til arbejde.

Meget af den fælles forståelse af forbindelsen mellem wireframes og designsystemer skabes ved at have en samtale om det. Hvis du annoncerer det via e-mail eller blot sender det på dit intranet, fungerer det sandsynligvis ikke. Vandfald og fjerne fjernteam, der prøver dette, går måske ikke så godt.

Når det er sagt, giver det mange fordele for mange hold, såsom:

  • Sparer tid, når wireframing
  • Intet misforhold mellem wireframe og virkelighed
  • God til Lean / Agile-metodologier, hvor leverancer ikke behøver at være så formelle
  • God til små teams og startups uden mange ressourcer (især når du bruger rammer)
  • Forskellige kompetencer kan anvendes til forskellige designområder (f.eks. Visuelle designere og udviklere til designsystemet, interaktionsdesignere eller PM'er for wireframes)
  • Designprocesser (wireframes vs. oprettelse af design system) kan udføres uafhængigt, hvilket resulterer i færre flaskehalse
  • Mere UI-konsistens på tværs af produktet

Flere designsystemressourcer

  • Design Systems Gallery
  • “Designing Design Systems”
  • “Kom godt i gang med mønsterbiblioteker”
  • Introduktion til atomisk design
  • Mønster Lab Design Systemværktøj
  • Ressourcer til webstilsvejledning