Projekt / Designsystem + UI för flera varumärken
Gemensamt Sketch-bibliotek
Ett gemensamt komponentbibliotek i Sketch som lät designers byta varumärke utan att bygga om gränssnittet från början.
Produktteam med flera varumärken
UI/UX-designer
Designsystem, UI för flera varumärken, Sketch
Vad behövde förändras?
Teamet saknade en gemensam huvudfil. Designers återskapade ofta egna komponentversioner och överlämningen till utvecklare blev lidande under tidspress. En mall behövde fungera för UI- och UX-designers över flera varumärken utan beroende av tillägg.
Mitt ansvar
Jag strukturerade det gemensamma Sketch-biblioteket och arbetsflödet med gemensamma komponenter, varumärkesstilar, responsiva symboler och dokumenterade regler. Originalpresentationen beskriver arbetet som avsett för ett team med UI- och UX-designers.
Så tog vi fram lösningen
Enas om ett arbetsflöde
Målet var en snabb och lättanvänd mall för alla varumärken som fungerade för både UI- och UX-designers. Den skulle öka enhetligheten, förbättra överlämningen till utvecklare, ta bort beroenden av tillägg och ge nya komponenter gemensamma regler.
Använd Sketchs inbyggda stilar
De främsta skillnaderna mellan varumärkena var färg, typsnitt och hörnradie. Gemensamma lager- och textstilar i Sketch gjorde det möjligt att ändra dem på varumärkesnivå och behålla komponenternas struktur.
Presentationen visar samma Explore-skärm med tre varumärkesuttryck.
Begränsa variation där det behövdes
Ett mindre urval av typsnittsvikter, storlekar och färger hjälpte designers att göra mer enhetliga val. Utvecklarna började använda samma namn på textvariabler, vilket kopplade designbesluten närmare implementationen.
Bygg från små delar
Biblioteket hade en atomär struktur från små gränssnittselement till kort och sidmallar. Det gjorde det enklare att uppdatera återkommande delar utan att bygga om varje skärm där de användes.
Gör överskrivningar hanterbara
Varumärkesfärger ändrades genom gemensamma stilar bredvid ritytorna. Symbolöverskrivningar fokuserade på text och ikoner, och låsta lager gjorde komplexa symboler lättare att använda.
Teamet dokumenterade också rutnät, marginaler, avstånd och sidproportioner så att nya komponenter kunde följa samma system.
Ett beslut som formade arbetet
Redigerbara färger som symbolöverskrivningar hade gett maximal lokal kontroll, men också långa och svårhanterliga listor. Gemensamma stilar hanterade varumärkesfärger, överskrivningar reserverades för text och ikoner och överflödiga lager låstes.
Vad förändrades?
- Ett gemensamt bibliotek för flera varumärken med återanvändbara komponenter och sidmallar.
- Ett snabbare sätt att sätta samman UX-flöden och förhandsvisa ett nytt varumärke över flera sidor.
- Dokumenterade regler för typografi, färg, avstånd, rutnät och symboler.
Konkreta exempel
- Samma gränssnitt visas med tre varumärkesuttryck.
- Källmaterialet innehåller typografi- och färgskalor, komponenthierarki och jämförelser av överskrivningar.
- Originaltexten beskriver flöden byggda på minuter och varumärkesförhandsvisningar på timmar i stället för dagar. Det är kvalitativa uppgifter, inte oberoende mätningar.
Den användbara förenklingen var inte samma utseende för varje varumärke. Det var en tillförlitlig struktur där varumärkesuttrycket kunde ändras utan att designers behövde återskapa produkten.