Hur man skapar en stilguide: Börja med ett UI-ramverk

Frågor och svar med AdRolls UX Designer om varför vi gjorde det och vad vi lärde oss

Det här blogginlägget är det första i en serie som kröniserar stilguidens resa, från skapandet, till att ge ett moget UI-ramverk för våra team och så småningom destillera en unik röst och ton för våra produkter.

Hej! Jag är Arya Srinivasan, en UX-forskare på AdRoll. Jag satte mig ned med Mason Lee, en UX-designer som arbetade med AdRolls API-produkt för ursprungliga annonser, för att prata om hans arbete med att utveckla AdRolls stilguide.

Arya: För att starta saker, varför startade du stilguideprojektet? Vad var problemet som behövde lösas?

Frimurer: Problemet var konstruktionsinkonsekvens, både mellan produkter och inom en enda produkt. Till exempel en knapp som ska se lika ut överallt men faktiskt varierar i färg, typsnitt vikt och kantstil.

Knapparna ser annorlunda ut i individuella designers håravfall och våra applikationer.

AdRolls snabba tillväxt innebar att vi var fokuserade på snabbhet. Vi är nu ett större företag med flera produkter, så som designer tror jag att det är viktigt för oss att betona konsekvens i hur vi presenterar våra produkter: genom designen.

För att fokusera på design behövde vi först fixa befintliga inkonsekvenser. UX-designers här fokuserar vanligtvis på en eller två produkter, så för att få vårt team att tänka på designen på alla produkter, skapade jag ett vecka “UI Smackdown” -möte för att diskutera UI-riktlinjer.

I varje möte tittade vi på designinkonsekvenser för att besluta om en enda design. Efter några möten frågade designers fortfarande mig om rätt färg eller stoppning, etc. Vi behövde ett centralt dokument med alla svar, så jag byggde vårt UI-ramverk i Sketch som en resurs för designers. När vi inser att det saknas en komponent eller vill inkludera en ny komponent diskuterar vi den och lägger till den i master UI Framework-filen.

Arya: Du nämnde att du vill att AdRoll ska vara ett designcentriskt företag - vad menar du med det?

Murare: Jag vill att AdRoll ska sätta design i framkant så att det är en konkurrenskraftig differentierare - erkänd av kunderna som en väldesignad produkt som verkligen löser deras behov.

Arya: Vilka var dina omedelbara mål för stilguiden? Har du en långsiktig vision för det här projektet?

Murare: Mitt kortsiktiga mål är att ha designkonsistens mellan designers genom att standardisera våra UI-komponenter. Jag vill att designers ska tala samma språk när de pratar design. Till exempel i en modal eller dropdown bygger ingenjörer baserat på hur designern föreslår. Om designelementen skiljer sig mellan designers, kommer ingenjörerna att göra samma element på olika sätt.

Mitt halvtidsmål är att ha den här stilen definierad i vår kod i "RollUp", AdRolls interna UI-komponentbibliotek. Om vi ​​har ett fördefinierat formatmall, behöver alla våra ingenjörer göra det att kopiera det. Formgivare och ingenjörer kan tala samma språk.

Arya: Har du stött på några problem när du skapade stilguiden? Hur löste du dem?

Murare: Ett av de största hinderna var att få inköp från människor över hela produktgrupper. För att få alla involverade inrättade jag ett möte med en tydlig lista över dagordningsposter att täcka. Jag presenterade inkonsekvenser i design, till exempel olika rullgardinsmenyer mellan produkter. Att tillhandahålla visuella bevis utlöser samtal, och i slutändan bryr sig människor om sin produkt och vill ha konsistens.

En annan utmaning var att besluta om reglerna. När man talar om att standardisera en komponent, bör den vara tillämplig var som helst, i alla sammanhang. Du måste tänka på alla kanter. Komponenten måste vara flexibel, men samtidigt funktionen komplett så att den är lättanvändbar, förbrukningsbar och tillämplig.

Här är ett exempel på vår stilguide flexibilitet. Vårt första beslut för utfyllningen i den här nedrullningsfilen för geografisk målning var för stor, så vi reviderade stilguiden för att redogöra för detta användningsfall.Före (vänster), Efter (höger)

Jag vill faktiskt utropa ytterligare en utmaning! Namnge kan vara svårt. Som jag sa tidigare vill jag att designers och ingenjörer ska tala samma språk, men detta måste göras noggrant. För något så enkelt som en dropdown har vi faktiskt flera varianter (en med kryssrutor, en annan med kryssrutor och ett textblock, och ett annat är en standardmeny med dropdown). Hur namnger vi tre olika dropdowns så att det finns en universell förståelse av vilka är vilka?

Semantiken är utmanande; vår namngivning måste vara meningsfull. Vi använde några coola samarbetsverktyg för att få enighet när vi beslutar om ett namn. Till exempel hjälpte Wake oss att samla in alla öppna frågor och frågor, diskutera lösningar, övervaka UI: s Smackdown-beslut och fortsätta samtalet med det större produktteamet genom en integration med Slack.

Hur vi använde Wake för att diskutera inkonsekvenser i UI och samarbeta om komponentregler.

Arya: Finns det något unikt med AdRolls användargränssnitt, som du måste tänka på när du skapade stilguiden?

Murare: Vår instrumentbräda är mycket datatung. Dessutom ger kampanjskapande flödet annonsörer en massa spakar att dra. För att tillgodose behoven hos mindre erfarna annonsörer strävar vi efter att ha effektiva standardinställningar. I våra produkter har komponenterna komplexa funktioner men ser enkla ut och är enkla att använda.

Arya: Är det några saker du önskar att du visste när du började skapa stilguiden?

Frimurer: Jag önskar att jag hade en djupare förståelse för hur alla våra produkter fungerar från början. Vi delar till exempel hur vår respektive produkt fungerar i vårt veckovisa designkritikmöte, så jag vet hur SendRoll (vår e-post-målgruppsprodukt) fungerar på ytan, men jag har inte den djupa kunskapen om SendRoll som det är designer. Jag tror att nyanserad förståelse av produkten definitivt hjälper när jag arbetar med stilguiden, eftersom jag då har en bättre förståelse för alla potentiella användningsfall.

Arya: Så vad är det bästa sättet att uppnå den gemensamma förståelsen för en designers process och deras produkt?

Murare: Även om vi verkligen är inriktade på att leverera våra produkter, gör vi ett bra jobb med att dela vår designprocess i vårt veckovisa designkritikmöte. Jag tror att vi kan bli bättre på att stänga slingan efter varje möte - hur integrerade designern feedback från mötet? När produkten har skickats och använts av våra annonsörer kan vi också dela hur annonsörer använder produkterna baserat på insyn från analys.

Arya: Fanns det några resurser som du hänvisade till när du arbetade med detta projekt?

Murare: Jag läste Atomic Design av Brad Frost, forskade på nätet och pratade med andra UX-designers på MeetUps. Om du tror att ett visst företag praktiserar bra design, är det ganska troligt att de har pratat om sin stilguide någonstans online.

Arya: Vad är statusen för vår stilguide?

Murare: Jag har fångat och granskat alla UI-element som vi använder i våra olika produkter och grupperat dem i fundament, komponenter, mönster och sidor, som kommer att fungera som en källa till sanningen för våra UI-design.

Du kan kolla in grundläggande och komponent UI-element på Dribbble. Om du känner till Atomic Design grupperade jag nivåerna "atom" och "molekyl" i vad jag kallar "komponenter". Till exempel, genom att kombinera formtitel och input gör det enkelt för andra designers att enkelt kopiera ett ifylld form fält.

Tack för att du läser!

Se upp för dessa kommande ämnen när vi utvecklar vår stilguide:

  • Hur en UI-ram förenklar samarbetet
  • Utveckla nya stilmallar baserade på UI-ramverket
  • Hur man bygger en Style Guide-webbplats
  • Resan till att hitta vår röst och ton