Opretter et design-systemsprog…

Det ser ud som det nuværende brusord i designbranchen, og alle vil have et. Men hvordan nøjagtigt kan et produkt drage fordel af at have et levende, åndedrættende designsprog? Jeg vil prøve at nedbryde de grundlæggende, så du kan forstå, hvorfor det er nødvendigt.

"Oprettelse af et underliggende sprog vil forene vores designfilosofier og -metoder på tværs af vores platform."

Så hvorfor har vi brug for et designsprog?…

Der er to måder at se på det fra et internt og eksternt perspektiv.

Indre:
Det skaber et holistisk perspektiv for at sikre, at vi alle overholder de samme metoder og mønstre som et team. Hvert teammedlem skal være på linje med det koncept, vi reklamerer for, og skal være i stand til at referere til designprincipperne mod ethvert projekt, de i øjeblikket arbejder på. Hovedmålet med et designsprog er at skabe fokus og klarhed for designere. Et designsprog er som ethvert sprog. Hvis der er nogen forvirring, vil det medføre en sammenbrud i kommunikationen.

Udvendig:
At have et sammenhængende designsprog skaber harmoni inden for en platform. For tilskuere skaber standardiserede farver, interaktioner og mønstre en følelse af fortrolighed og sikkerhed. Et godt planlagt og godt udført designsprog er nøglen til en glædelig oplevelse. For eksempel, hvis du går ind i en Starbucks i Island, vil du genkende en masse lignende ting som dine lokale Starbucks ned ad vejen. Kendskab giver brugeren en følelse af komfort og sikkerhed. At indføre designbegrænsninger for individuelle elementer i en platform skaber konsistens på et højere niveau.

Et vellykket designsprog vil:

  • Fokus: lad designeren fokusere tydeligt på det aktuelle projekt snarere end at blive omdirigeret af andre distraktioner.
  • Klarhed: lad designeren tænke klart over vores designopfattelser såvel som designbegrænsningerne på plads på tværs af platformen.
  • Tillid: Lad designeren have fuld tillid til det, de designer, og at det er på linje med andre i teamet.
  • Konsistens: skab konsistens på tværs af produktet, hvilket igen skaber en sikker, velkendt oplevelse på tværs af platformen.
  • Effektivitet: skab forståelse på tværs af holdene, hvilket betyder mindre tidskrævende koncentration om de mindre vigtige detaljer.

Grundlæggende, hvis dine designere er fokuserede og forstår designsproget, vil det give dem selvtillid, hvilket igen vil hjælpe virksomheden på et højere niveau, da det skaber konsistens og effektivitet.

Bygger fundamentet ...

Designprincipper
Når vi har solide designprincipper på plads, som hele teamet har bidraget til, sikrer vi, at vi alle overholder de samme metoder og mønstre som et team. Hvert teammedlem skal være på linje med det koncept, vi reklamerer for, og skal være i stand til at referere til designprincipperne mod ethvert projekt, de i øjeblikket arbejder på.

Toneleje
Det er vigtigt at skabe en ensartet stemme til vores produkt. Hver designer (eller hvem der er involveret) skal være opmærksom på den tilgang, der er nødvendig, når man skriver indhold. At have konsistent indhold er en meget stor del af at skabe en ensartet brugeroplevelse, og alle designere bør forsøge at justere alt indhold i overensstemmelse hermed.

Holdværdier
Hvordan arbejder vi sammen som et team? Det er vigtigt, at alle trækker i samme retning, og alle er enige om, at de valgte værdier er vigtige for at skabe et lykkeligt arbejdsmiljø.

Der er naturligvis en hel masse flere elementer, du kan etablere for at skabe et grundlæggende fundament for din designidentitet. Ovenstående er kun toppen af ​​isbjerget. Hver virksomhed er forskellig, så føl dig fri til at udvide det så meget som du mener er rigtigt at forklare metoderne for din tilgang.

Visuel identitet ...

Oprettelse af den visuelle identitet er ikke noget, der oprettes natten over. Det tager tid. Nogle gange er det så klart som dagen, hvad der er nødvendigt, andre gange tager det tid, før byggestenene falder på plads. Når det først er på plads, er det vigtigt, at grundlæggende indfanges og dokumenteres på et højt niveau. Sådan som brug af farve, typografi og ikonografistil er nøglen til at skabe konsistens på tværs af en platform.

  • farver
    Hvad bruges farvepaletten på platformen? Forklar hvordan, hvor og hvorfor vi bruger visse farver.
  • Typografi
    Hvilket skrifttype bruges på platformen? Sammenfatter reglerne om vægtning, størrelse, lodret justering osv.?
  • Ikonografi
    Hvad er den generiske stil for ikoner? Det vil forklare det rationelle med hensyn til, hvorfor vi har specifikke stilarter til forskellige ikonfamilier.
  • Grid / Layouts
    Hvilket gittersystem bruges på tværs af platformen? Forklar brugen af ​​gitteret og det høje niveau af vores layout.
  • Interaktioner
    Hvad forventer folk at se, når de interagerer med vores websted? Giv et overblik over vores standardinteraktioner.
  • Animationer
    Hvordan nærmer vi os animationer? Forklar årsagen til animationer på platformen og vores begrænsninger omkring brugen af ​​dem.
  • Designressourcer
    Et centralt punkt for aktiver, der let kan downloades til eksterne partnere. Farveprøver, logoer, ikonsæt osv.

De næste trin ...

Du er sandsynligvis fuldt ud klar over, hvor vigtigt et designsprog er inden for din platform, men siger til dig selv 'hvor skal jeg starte?' Denne artikel er temmelig højt niveau. Oprettelse af et designsprog går langt, langt dybere end hvad jeg har identificeret ovenfor. Oprettelsen af ​​styleguiden og til gengæld udviklingen af ​​et komponentbibliotek er udviklingen af ​​et designsystem.

Så her er en proces, som jeg har sammensat, som skal hjælpe dig med at fokusere på nøjagtigt, hvad der er nødvendigt for at få bolden til at rulle:

  • Foretag en UI-lagerrevision
    Før du starter noget, er det bedst at identificere, hvor inkonsekvent den nuværende bygning er. Dette fungerer på to måder. Det hjælper med at identificere årsagen til, hvorfor du gør det, til at identificere, hvor inkonsekvent alt er, men det skal hjælpe dig med at få opbakning til virksomheden, hvorfor du netop opretter designsystemet; at skabe konsistens på tværs af platformen. Brad Frost har sammensat en god artikel omkring, hvordan du går i gang med en UI-revision.
Et eksempel på en UI-revision
  • Prioriter dine UI-elementer
    Jeg er sikker på, at ethvert designteam har forskellige prioriteter med hensyn til hvad de føler er afgørende for at skabe konsistens, men der er generelt nogle elementer, der er kritiske for at skabe det grundlæggende. Synes godt om farver, typografi og ikonografi er et godt sted at starte. Arbejd tæt sammen med design- og udviklingsteamet for at oprette en liste over prioriteter, der er baseret på din UI-revision. Dette skulle vejlede din køreplan i en overskuelig fremtid. Jeg har fundet at bruge et Trello-bord som en måde at holde en prioritetsliste opdateret er en fantastisk måde at arbejde på. Det giver dig mulighed for at 1) oprette din liste og indstille dem i en prioritetslinje, dvs. hvad skal du tackle først, og 2) giver dig mulighed for at spore nøjagtigt, hvor langt du er med hver komponent.
Et eksempel på et Trello-kort, der dokumenterer overgangen til en komponent i cyklussen
  • Start diskussioner med designteamet
    Så nu, hvor du har identificeret nøjagtigt, hvad du vil tackle først på prioriteringslisten, er det tid til at sætte sig sammen med designteamet for at få alle ideer og meninger omkring de første nødvendige komponenter. Der er forskellige tilgange til, hvem der ejer designsystemprojektet, men i dette tilfælde vil jeg tage det for eksempel, at der er en eneste designer, der er ansvarlig for kontrol med projektet. Dette betyder, at det er op til dig at diskutere alle aspekter af komponenten med de designere, der med tiden bruger designsprog. Dette er ekstremt vigtigt for at sikre, at designerne alle føler sig som om de har haft et input til, hvad der skabes.
  • Dokumenter alle forekomster
    Det er tid til at begynde at tage nogle beslutninger. Dokumenter, hvad du opretter, og sørg for, at du tager højde for alle nødvendige tilfælde. Det er vigtigt, at det, du skaber, ikke er en subjektiv beslutning. Du skal have begrundelse for, hvorfor du tager disse beslutninger, da det giver dig mulighed for at forklare dine beslutninger for designteamet nede på linjen.
Et eksempel på farvebrug
  • Se om det fungerer
    Det næste trin er at prøve dine beslutninger. Det er meget let at tage beslutninger på papir, men når du omsætter dem, kan det vise sig, at nogle beslutninger bare ikke fungerer. Prøv nogle eksempler på den nye stil ved hjælp af aktuelle designs.
  • Lås det ned
    Én, du er tilfreds med resultatet, og du har købt fra alle parter, det er tid til at låse det ned og uddanne resten af ​​teamet til, hvordan og hvorfor disse elementer skal bruges. Det er vigtigt at huske, at selvom du låser stylingen, at hvis du føler, at visse elementer ikke fungerer, så kan du ændre det, hvis det er nødvendigt.
  • Gå videre til det næste element
    Når du har uddannet teamet og har det godt med den viden, at designerne respekterer dine beslutninger, er det tid til at gå videre til det næste sæt elementer. Det er op til dig, hvor mange elementer du tager ad gangen, men du bør aldrig bide for meget. Det vil bare distrahere dig fra virkelig at fokusere på de mindre detaljer. Min udgangspræference ville være - Farver, typografi // Ikoner, inputfelter // Tabeller, lister // osv.

Når alle er uddannet til, hvad den nye stil er, er det vigtigt, at alle designer og udviklere implementerer stilarterne korrekt.

Ugentlige checkins er vigtige for at overvåge stilvalg for at sikre, at alle arbejder på de samme designbeslutninger. Brug af produkter som Craft by Invision hjælper virkelig med at skabe konsistens, når man går videre.

Hvordan man måler succes…

Designsproget er ikke en succes, før virksomheden begynder at bruge det og finde værdi i det.

Eksempler på designsprog ...

  • Shopify Polaris 🗣 ⚒
  • Mixpanel-produkt Styleguide ⚒
  • Atlassisk designsprog 🗣 ⚒
  • Salesforce Lightning Design System 🗣 ⚒
  • Pusher kamæleon ⚒
  • IBM Design Language 🗣 ⚒
  • Lost My Name Design System ⚒
  • Sky Toolkit ⚒
  • Drejelig ⚒
  • Office UI-stof ⚒
  • IBM Carbon ⚒
  • Intuit Harmony 🗣 ⚒
  • Cloudflare ⚒
  • Marvel Styleguide ⚒
  • VMware Clarity Design System ⚒
  • Mailchimp Indhold Styleguide 🗣
  • Mailchimp mønstre ⚒
  • Lonely Planet Rizzo ⚒
  • Co-op designmanual

Her er også en case study, som jeg oprettede til en nylig designoverhaling, som jeg var involveret i: https://www.behance.net/gallery/34224289/Ryanair-Design-Centre

”Den største eksistentielle trussel mod ethvert system er forsømmelse” - Alex Schleifer, VP for design hos Airbnb

Du er velkommen til at vælge min hjerne (eller hvad der er tilbage af det) på:

// Twitter // Dribbble // Behance // Portfolio site //