Design systemarkitekturdiagrammer

Et visuelt ordforråd til sammenhæng mellem systemer, produkter og mærker

Så mange virksomheder præsenterer økosystemer langt mere komplekse end "et designsystem, alle vores produkter." Mere og mere har jeg fundet diskussioner på tværs af grupper og systemledere udfordrende. Indtil videre har jeg manglet ordforrådet til hurtigt at vise og lære bredden af ​​disse mange systemer, og hvordan de betjener forskellige interne kunder med forskellige funktioner.

Denne artikel foreslår et visuelt ordforråd for mærker, systemer og produkter. Ordforrådet betegner et designsystemets forskellige output, dokumentation, vedtagelse og organisatoriske grænser. Afslutningsvis illustreres ordforrådet ved hjælp af et komplet, scenariebaseret eksempel.

Symboler

Systemarkitekturdiagrammer bruger symboler (diamanter, cirkler og firkanter) til at angive objekter (henholdsvis systemer, produkter og brandidentiteter).

System som Diamond

Hver diamant repræsenterer et eksplicit eller implicit designsystemfunktionssæt, herunder men ikke begrænset til en defineret visuel stil anvendt på en eller flere UI-komponenter, der tilbydes som design- og / eller kodeaktiver.

Titel- og beskrivelsesetiketter vises valgfri øverst til højre ved 45 graders rotation. Mens man kan justere etikettens placering, når der vises et diagram, viste denne standard sig mindst sandsynligt, at den kommer i konflikt med objekter og stik.

Systemværktøjer — Design aktiver og kode - som halvdiamanter

Hvert system tilbyder designaktiver (såsom Sketch, Figma eller Invision Studio), et kodebibliotek eller begge dele. Derfor er systemdiamanten opdelt for at angive, om den tilbyder designaktiver (en rød D i symbolets venstre halvdel), kode (en blå C i symbolets højre halvdel) eller begge dele til dets kunder.

Designretningslinjer og kodehenvisning som diamantbaggrund

De fleste designsystemer dokumenterer eksempler visuelt og - hvis den er tilgængelig - koden, der bruges til at producere dette resultat. Imidlertid tilbyder ikke alle designsystemer dybere designretningslinjer og kodehenvisninger. Begge kommunikeres normalt via et godt designet, webbaseret websted. Derfor angiver gule baggrundsbilleder på venstre og højre side af systemdiamanten tilgængeligheden af ​​henholdsvis designretningslinjer og kodereference.

For eksempel leverer IBM Carbon, Shopify Polaris, Morningstar, REI Cedar (afsløring: Jeg har bidraget til de sidstnævnte to) detaljerede designretningslinjer og kodehenvisninger. Derfor vil hver indeholde en fuld gul diamant bag F & U-output.

På den anden side tilbyder Financial Times Origami kodehenvisning uden designretningslinjer. Googles materiale havde længe leveret rigelige designretningslinjer uden kode, skønt det for nylig blev ændret med deres mere løst koblede retningslinjer og kode i forskellige arkitekturer på et meget bredere sted.

Salesforce Lightning Design System tilbyder temmelig begrænset designvejledning, blandet i ellers kodecentrisk komponentdokumentation. Derfor vil jeg - modvilligt indikere - at dets websted mangler detaljerede designretningslinjer.

Produkter som cirkler

Diagramforbindelser mellem et designsystem og dets kunder er vigtigt. Nogle betragter muligvis ikke deres arbejde som et "produkt" i sig selv. Ikke desto mindre repræsenterer en cirkel enhver digital oplevelse (eller del deraf) produceret af et team, der kunne vælge at indføre et system.

For eksempel kan en e-handelsoplevelse have forskellige firkanter til hvert trin i processen: startside, søgeresultater, landings- og kategorisider, produktsider, indkøbskurv, kasse, ordrestatus & returner og kontoprofil. Hver blev repræsenteret tydeligt i et diagram.

Produktmængde som badges

For økosystem med mange produkter skal du konsolidere til et symbol, der repræsenterer mange, og angive mængde med en badge.

Produktadoptionsstatus som farve

Produktanvendelse af et system er uregelmæssig. Brug derfor farve til at angive status som vedtagelse ved hjælp af systemkode (sort), indlejring af systemdesignet i et produkts tilpassede kode (grå) eller ikke vedtage systemet overhovedet (hvidt).

Disse kan også konsolideres ved hjælp af badges til mængde.

Stik, linjer top-til-bund

Vertikale stik fra top til bund repræsenterer produkt (er) afhængigt af system (er). Mens venstre-til-højre og radiale skærme giver forskellige muligheder (især radial "skønhed"), forbedrer orientering fra top til bund den visuelle effektivitet, gør forståelsen hurtigere og letter produktionen og vedligeholdelsen.

Linjer drejer via afrundede 90 graders vinkler. Lige eller lysbuede stik, der er overlappet og sammenlagt med andre stik og genstande, hvilket gør præsentationen rodet og ruter sværere at følge.

Disse diagrammer hænger tæt sammen med afhængighedsdiagrammer, der afslutter stik med en pil. Feedback tyder dog stærkt på, at diagrammets lodrette orientering indebar retning. ”Pile rod med diagrammet,” hævdede mine kolleger. Derfor skal du stole på en linjes enkle, lavere kontrastfarve for at forbinde objekter.

Mærkeidentiteter som kvadrater

Det er underholdende til tider at se proces til designsystemer forskrækket, når de mindes om, at deres system ikke er toppen af ​​pyramiden. Hvert (digitalt) designsystem, jeg har arbejdet, arver visuelle essenser - farve, typografi, illustration - og andre egenskaber fra en eller flere mærkeidentiteter, der styres ud fra et brand eller marketingteam. Mærker er repræsenteret som en firkant.

Flere mærker som forældre til et system

Visning af mærker er nyttigt til at fremstille mange identiteter understøttet af et enkelt system. For eksempel har et Marriott-designsystem inkorporeret regler for forskellige hotelegenskaber som Courtyard, Renaissance og JW Marriott.

Organisatoriske grænser som kolonner

Ingen arkitektur af designsystemer i hele virksomheden er komplet uden en angivelse af den / de organisationsenhed (er), som hver betjener. Disse kan have form af domæner, stammer og squads. Eller måske forretningsområder. Eller dele af en kundes rejse. Ligegyldigt hvordan din virksomhed deler dets arbejde og teams, hvis det er af nogen skala, har det divisioner.

Jeg har valgt at bruge lilla grænser, der er stiplet og tykkere end linjer, der forbinder noder. Derudover mærker en eller to niveauer lilla etiketter, der er orienteret på diagrammets baseline, tydeligt hvert område.

eksempler

For at se det visuelle ordforråd i aktion præsenterer jeg en række eksempler understøttet af beskrivende historier for at sætte kontekst og afsløre udfordringer på højt niveau, som det eller de pågældende systemer står overfor.

Eksempel: Et centralt system med formidlere

Denne designsystemarkitektur angiver et anerkendt, enkelt system, som alle digitale produkter er afhængige af. Nogle produkter anvender systemet direkte. I andre tilfælde er systemet formidlet af teams, der tilbyder React– og Vue-baserede JavaScript-oversættelser af dets vanilje HTML & CSS-bibliotek.

Designsystemets team anerkendte den arkitektoniske redundans og kompleksitet, hvilket førte deres næste generation af arbejde med at tilbyde webkomponenter for at afhjælpe behovet for sådanne oversættelser.

Eksempel: Små banker og forsikringsselskaber

Mange forsikringsselskaber og banker organiserer digitale produktteams, når tragten flyder fra. Com-markedsføring gennem salgstragte, der får kunder til at servicere oplevelser for at styre transaktioner, såsom henholdsvis et krav og pengeoverførsel. Dette kan resultere i mindst to designsystemer, der opdeler mindst .com og servicerer, hvis ikke også et tredje system til strømme, der får kunder i det spaltede rum mellem.

Eksempel: Software-as-a-Service (uddannelse)

Overvej en softwareportefølje under et moderselskabs paraply. Deres system opstod via en redesign af deres flagskibstilbud: indhold og interaktive medier som pensum.

Efter at flagskibene blev rullet ud, anvendte teams systemet til krydsproduktværktøjer (godkendelse, hjemmeside, dashboard (er), søgning og kontostyring) og administrative konsoller, hvor undervisere administrerede studerendes data og adgang. Med succes voksende begyndte de at se hen imod en søskenhed, der producerede brugerdefinerede, hvidmærkede websteder til kunderne.

Eksempel: Forretningsenheder efter kundetype

Et firma organiserede digitale teams i produktudviklingsenheder, der hver især betjener forbrugere, arbejdsgivere og deres ansatte og store institutioner inden for deres felt. Som et resultat opstod forskellige systemer i hver enhed.

Systemhold delte praksis og værktøjer, men forblev autonome til at betjene forskellige kunder optimalt. Dette hjalp med at undgå udfordringer, som for tidligt at konvergere et designsprog, der endnu ikke var prioriteret.

Eksempel: Software-as-a-Service (Enterprise)

Et softwarevirksomhed etablerede et stærkt centraliseret system med vedtagelse på tværs af alle flagskibs- og sekundærprodukter. Når det er sagt, fortsatte den med en separat designdokumentationsoplevelse bortset fra dets universelt anvendte kodede komponenter. Nogle nøgleprodukter udvidede systemet, hvad enten designere fra produkter A & B administrerer Sketch-biblioteker eller en ingeniør, der opretholder komponentkode til hendes teams. Derudover vil en potentiel erhvervelse udløse diskussion om integration på produkt-, system- og brandniveau.

Du kan downloade Sketch-filen med symboler og eksempler, der vises her.