Ontwerpsystemen Architectuurdiagrammen

Een visuele woordenschat om systemen, producten en merken te relateren

Zoveel ondernemingen presenteren ecosystemen veel complexer dan 'één ontwerpsysteem, al onze producten'. Ik vind steeds vaker discussies tussen groepen en systeemleiders een uitdaging. Tot nu toe ontbrak het mij aan de woordenschat om snel de breedte van deze vele systemen te tonen en te onderwijzen en hoe ze verschillende interne klanten bedienen met verschillende functies.

Dit artikel stelt een visuele woordenschat voor van merken, systemen en producten. De woordenschat geeft de verschillende output, documentatie, adoptie en organisatorische grenzen van een ontwerpsysteem aan. Tot slot wordt de woordenschat geïllustreerd aan de hand van een volledig, op scenario's gebaseerd voorbeeld.

Symbolen

Systeemarchitectuurdiagrammen gebruiken symbolen (diamanten, cirkels en vierkanten) om objecten aan te duiden (respectievelijk systemen, producten en merkidentiteiten).

Systeem, als Diamond

Elke diamant vertegenwoordigt een expliciete of impliciete functieset van het ontwerpsysteem, inclusief maar niet beperkt tot een gedefinieerde visuele stijl die wordt toegepast op een of meer UI-componenten die worden aangeboden als ontwerp- en / of codeactiva.

Titel- en beschrijvingslabels worden optioneel rechtsboven weergegeven bij een rotatie van 45 graden. Hoewel men de locatie van het label kan aanpassen wanneer een diagram verschijnt, bleek deze standaard het minst waarschijnlijk in conflict te komen met objecten en connectoren.

Systeemhulpmiddelen — Activa en code ontwerpen - als halve diamanten

Elk systeem biedt ontwerpelementen (zoals Sketch, Figma of Invision Studio), een codebibliotheek of beide. Daarom wordt de systeemdiamant gepartitioneerd om aan te geven of het ontwerpelementen (een rode D in de linkerhelft van het symbool), code (een blauwe C in de rechterhelft van het symbool) of beide aan zijn klanten aanbiedt.

Ontwerprichtlijnen en codeverwijzing als een diamantachtergrond

De meeste ontwerpsystemen documenteren voorbeelden visueel en - indien beschikbaar - de code die wordt gebruikt om dat resultaat te produceren. Niet alle ontwerpsystemen bieden echter diepere ontwerprichtlijnen en codereferentiemateriaal. Beide worden meestal gecommuniceerd via een goed ontworpen, webgebaseerde site. Daarom geven gele achtergronden aan de linker- en rechterkant van de systeemdiamant respectievelijk de beschikbaarheid van ontwerprichtlijnen en codereferentie aan.

IBM Carbon, Shopify Polaris, Morningstar, REI Cedar (openbaarmaking: ik heb bijgedragen aan de laatste twee) bieden bijvoorbeeld gedetailleerde ontwerprichtlijnen en codereferentiemateriaal. Daarom zou elk een volledige gele diamant achter de D & C-uitgangen bevatten.

Anderzijds biedt de Origami van Financial Times codeverwijzing zonder ontwerprichtlijnen. Google's materiaal bood al lang overvloedige ontwerprichtlijnen zonder code, hoewel dat onlangs is veranderd met hun meer losjes gekoppelde richtlijnen en code in verschillende architecturen van een veel bredere site.

Salesforce Lightning Design System biedt tamelijk beperkte ontwerprichtlijnen, gemengd in anders codegerichte componentdocumentatie. Daarom zou ik met tegenzin aangeven dat de site gedetailleerde ontwerprichtlijnen mist.

Producten als cirkels

Het is van essentieel belang dat verbindingen tussen een ontwerpsysteem en zijn klanten in kaart worden gebracht. Sommigen beschouwen hun werk mogelijk niet als een 'product'. Niettemin vertegenwoordigt een cirkel elke digitale ervaring (of een deel daarvan) die wordt geproduceerd door een team dat ervoor zou kunnen kiezen om een ​​systeem te gebruiken.

Een e-commerce-ervaring kan bijvoorbeeld verschillende squadrons hebben voor elke stap van het proces: startpagina, zoekresultaten, bestemmings- en categoriepagina ('s), productpagina, winkelwagentje, afrekenen, bestelstatus en retouren en accountprofiel. Elk zou duidelijk in een diagram worden weergegeven.

Producthoeveelheid als badges

Voor ecosystemen met veel producten, consolideer in één symbool dat veel vertegenwoordigt en geef de hoeveelheid aan met een badge.

Productadoptiestatus als kleur

Productacceptatie van een systeem is onregelmatig. Gebruik daarom kleur om de status aan te duiden als aannemen met behulp van systeemcode (zwart), het systeemontwerp insluiten in de op maat gemaakte code van een product (grijs) of helemaal geen systeem aannemen (wit).

Deze kunnen ook worden geconsolideerd met behulp van badges voor hoeveelheid.

Connectoren, lijnen van boven naar beneden

Verticale, van boven naar beneden connectoren vertegenwoordigen product (en) afhankelijk van het systeem / de systemen. Terwijl van links naar rechts en radiale displays verschillende mogelijkheden bieden (met name radiale "schoonheid"), verbetert de oriëntatie van boven naar beneden de visuele efficiëntie, versnelt het begrip en vergemakkelijkt productie en onderhoud.

Lijnen draaien via afgeronde hoeken van 90 graden. Rechte of gebogen connectoren overlappen elkaar en lopen samen met andere connectoren en objecten, waardoor de presentatie rommelig wordt en routes moeilijker te volgen zijn.

Deze diagrammen houden nauw verband met afhankelijkheidsdiagrammen die connectoren met een pijl afsluiten. Feedback suggereerde echter sterk dat de verticale oriëntatie van het diagram richtinggevoeligheid impliceerde. "Pijlen rommelig het diagram," beweerden mijn collega's. Vertrouw daarom op de eenvoudige, lagere contrastkleur van een lijn om objecten te verbinden.

Merkidentiteiten als vierkanten

Het is soms grappig om te zien dat professionals in ontwerpsystemen geschrokken zijn wanneer ze eraan worden herinnerd dat hun systeem niet de top van de piramide is. Elk (digitaal) ontwerpsysteem dat ik heb gewerkt, neemt visuele essentiële elementen (kleur, typografie, illustratie) en andere eigenschappen over van een of meer merkidentiteiten die worden beheerd vanuit een merk of marketingteam. Merken worden weergegeven als een vierkant.

Meerdere merken als ouders van één systeem

Het weergeven van merken is handig voor het weergeven van veel identiteiten die door één systeem worden ondersteund. In een Marriott-ontwerpsysteem zijn bijvoorbeeld regels opgenomen voor verschillende hotels, zoals Courtyard, Renaissance en JW Marriott.

Organisatorische grenzen als kolommen

Geen enkele architectuur van ontwerpsystemen binnen de onderneming is compleet zonder een indicatie van de organisatie-eenheid (eenheden) die door elk daarvan worden bediend. Deze kunnen de vorm aannemen van domeinen, stammen en squadrons. Of misschien branches. Of segmenten van de reis van een klant. Het maakt niet uit hoe uw bedrijf zijn werk en teams verdeelt, als het van enige schaal is, heeft het divisies.

Ik heb ervoor gekozen om paarse grenzen te gebruiken die onderbroken en dikker zijn dan lijnen die knooppunten verbinden. Bovendien labelen paarse labels met één of twee niveaus georiënteerd op de basislijn van het diagram elk gebied duidelijk.

Voorbeelden

Om de visuele woordenschat in actie te zien, presenteer ik een reeks voorbeelden die worden ondersteund door beschrijvende verhalen om context te plaatsen en uitdagingen op hoog niveau te onthullen waarmee de systemen in kwestie worden geconfronteerd.

Voorbeeld: een centraal systeem met tussenpersonen

Deze ontwerpsysteemarchitectuur verwijst naar een erkend, enkel systeem waarvan alle digitale producten afhankelijk zijn. Sommige producten nemen het systeem rechtstreeks over. In andere gevallen wordt het systeem bemiddeld door teams die op React– en Vue gebaseerde JavaScript-vertalingen van de vanille HTML & CSS-bibliotheek aanbieden.

Het ontwerpteamteam herkende de architecturale redundantie en complexiteit, wat leidde tot hun volgende generatie werk om webcomponenten aan te bieden om de behoefte aan dergelijke vertalingen te verlichten.

Voorbeeld: kleine banken en verzekeringsmaatschappijen

Veel verzekeringsmaatschappijen en banken organiseren digitale productteams terwijl de trechter stroomt van .com-marketing via verkooptrechters die klanten werven voor service-ervaringen om transacties te beheren, zoals respectievelijk een claim en geldoverboeking. Dit kan resulteren in ten minste twee ontwerpsystemen, ten minste .com splitsen en onderhoud, zo niet ook een derde systeem voor stromen die klanten werven in de gesplitste ruimte ertussen.

Voorbeeld: Software-as-a-Service (onderwijs)

Overweeg een softwareportfolio onder de paraplu van een moederbedrijf. Hun systeem is ontstaan ​​via een herontwerp van hun vlaggenschipaanbod: inhoud en interactieve media als curriculum.

Nadat de vlaggenschepen waren uitgerold, pasten teams het systeem toe op cross-producttools (authenticatie, startpagina, dashboard (en), zoeken en accountbeheer) en beheerconsoles waar docenten studentgegevens en toegang beheerden. Toen het succes groeide, begonnen ze te kijken naar een broer of zus die op maat gemaakte sites met witte labels voor klanten produceerde.

Voorbeeld: bedrijfseenheden per klanttype

Eén bedrijf organiseerde digitale teams in productontwikkelingseenheden die consumenten, werkgevers en hun werknemers en grote instellingen in hun vakgebied afzonderlijk dienden. Als gevolg hiervan kwamen in elke eenheid verschillende systemen naar voren.

Systeemteams deelden werkwijzen en tools en bleven toch autonoom om verschillende klanten optimaal te bedienen. Dit hielp uitdagingen te voorkomen, zoals het voortijdig converteren van een ontwerptaal die nog geen prioriteit had.

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

Een softwarebedrijf heeft een sterk gecentraliseerd systeem opgezet met acceptatie voor alle vlaggenschepen en secundaire producten. Dat gezegd hebbende, het bleef bestaan ​​uit een afzonderlijke ontwerpdocumentatie, los van de universeel toegepaste gecodeerde componenten. Sommige belangrijke producten breidden het systeem uit, of ontwerpers van producten A & B die Sketch-bibliotheken beheren of een ingenieur die componentcode voor haar teams onderhoudt. Bovendien zal een mogelijke acquisitie discussie op gang brengen over integratie op product-, systeem- en merkniveau.

U kunt het hier weergegeven schetsbestand van symbolen en voorbeelden downloaden.