Ontwerpers helpen zich aan een ontwerpsysteem te houden met Sketch

Bij Walmart Labs in Bentonville maakt ons interne ontwerpteam applicaties voor medewerkers (de naam van Walmart voor werknemers) in onze winkels, distributiecentra en bedrijfskantoren. We ontwerpen alles, van draagbare apparaten tot desktopsystemen, en de omgevingen van onze gebruikers variëren van helder verlichte kantoren tot magazijnen. Om onze medewerkers te helpen snel over meerdere digitale tools te schakelen, hebben we een systeem van gedeelde interactieve en visuele patronen ontwikkeld op basis van het materiaalontwerp van Google. Ons ontwerpsysteem is gebouwd in Sketch en dit bericht deelt lessen uit onze ervaring met het beheren van deze taal.

Waar te beginnen

Als u een ontwerper bent die een bibliotheek moet maken en beheren om anderen te helpen zich aan een ontwerpsysteem te houden, lees dan verder. We hebben het volgende nuttig gevonden bij het ontwerpen van digitale tools die meer dan 1 miljoen medewerkers in de VS gebruiken

Ontwerpconsistentie kan een uitdaging zijn in een bedrijfsomgeving, vooral met een divers publiek en verschillende gebruikscontexten. Het onthouden en correct gebruiken van alle specificaties kan overweldigend en tijdrovend zijn. Ontwerpers, zelfs doorgewinterde, moeten mogelijk voortdurend verwijzen naar ontwerpspecificaties. Dit kost waardevolle tijd in een al agressieve ontwerpcyclus.

Het antwoord? Breng het ontwerpsysteem naar de ontwerpers in hun ontwerptool.
Afbeelding tegoed: Walmart.

Onze ontwerpsysteembibliotheek - intern bekend als Ignite - is gebouwd in Sketch. We hebben Sketch gekozen, zodat ontwerpen zich geen zorgen hoeven te maken over de naleving van het ontwerpsysteem, in plaats daarvan kunnen ze zich concentreren op het ontwerpen van de ideale ervaring. Onze ontwerpers werken nauwkeuriger, efficiënter en consistenter met deze tool. Het stelt ontwerpers ook in staat om herbruikbare patronen uit de bibliotheek te maken en updates over te nemen wanneer de bibliotheek wordt bijgewerkt.

Enkele belangrijke kenmerken zijn:

  • Configureerbaar symbool voor elke component in het ontwerpsysteem
  • Richtlijnen als een genest symbool, opvulling en lettertypebehandeling
  • Aanpasbare tekst met andere elementen die reageren op de tekstlengte
  • Mogelijkheid om aangepaste kleuren, lettertypen en avatars toe te voegen zonder de symboolbibliotheek te wijzigen

Ontwerpspecificaties nesten

Sketch is geen ontwerpsysteem. , maar het is een van onze favoriete tools. Wanneer correct beheerd, kan Sketch ontwerpers helpen om regels en richtlijnen naadloos te volgen. We brengen de specificaties van het ontwerpsysteem naar de ontwerper door ze in elk symbool te nestelen. Ontwerpers kunnen zich meer concentreren op de stroom en minder op het onthouden van de regels.

Voorbeeld van een horizontale geleider en opvulling genest in een tabsymbool. Afbeelding tegoed: Walmart.

Verticale geleider

Gidsen kunnen laten zien waar het formaat van symbolen verticaal wordt gewijzigd. In het onderstaande voorbeeld verandert de hoogte van een werkbalk voor de liggende en staande modus. Deze techniek is handig voor het wijzigen van de hoogte van componenten van normale tot dichte lay-out.

Voorbeeld van een verticale gids in een werkbalksymbool. Afbeelding tegoed: Walmart

Tekst basislijn gids

Tekstbasislijn helpt ontwerpers de hoogte van een symbool aan te passen aan de teksthoogte. Ontwerpers veranderen de symboolhoogte totdat de basislijn zich op de basislijn van de laatste tekstregel bevindt, geen meting vereist.

Basislijnen voor tekst worden uitgebreid gebruikt om ontwerpers te helpen het formaat van symbolen aan te passen aan tekst. Afbeelding tegoed: Walmart.

Adaptieve tekst

Onze ontwerpers voegen echte tekst en informatie in hun composities in en onze tekst en elementen in symbolen reageren op de lengte van aangrenzende tekst. Symbolen bewegen als de tekstlengte verandert om de opvulling te behouden. De tekstdecoratie en opvulling staan ​​in het symbool, zodat ontwerpers zich meer kunnen concentreren op de inhoud.

Tabbladen en actieve indicator reageren op de tekstlengte. Afbeelding tegoed: Walmart.De rand en cursor van het tekstvak worden verplaatst als de tekstlengte verandert. Afbeelding tegoed: Walmart.

Kleur als een symbool

Walmart heeft meerdere divisies en dochterondernemingen, elk met hun eigen kleurenpallet. Voorheen was het erg vervelend om alle kleuren van een ontwerp bij te werken voor een ander deel van het bedrijf. We moeten het bestand dupliceren en twee kopieën maken voor updates.

Elke kleur in onze pallet is een symbool, inclusief de primaire en secundaire kleur en zijn genest overal waar kleur nodig is. Dit heeft de noodzaak om symbolen los te koppelen aanzienlijk verminderd en biedt kleurflexibiliteit.

Ontwerpers kunnen de kleur en dekking van een symbool wijzigen via het vervangingsmenu. Afbeelding tegoed: Walmart.

Werk onmiddellijk de kleur van alle symbolen bij

Ontwerpers kunnen kleuren in de hele app verkennen door de kleuropties van de bibliotheek te wijzigen. De kleuraanpassingspagina stelt hen in staat om real-time resultaten te zien wanneer ze de primaire, secundaire en bruikbare tekstkleur wijzigen, geen plug-ins vereist. Symbolen die symboolkleuren gebruiken, worden onmiddellijk bijgewerkt. Actiegerichte tekstkleuren worden beheerd via de tekststijl van Sketch. Hierdoor kan de tekstkleur worden bijgewerkt en kunnen symbolen adaptieve tekst bevatten.

Het kleurenthema van de bibliotheek wordt gewijzigd door de primaire en secundaire kleursymbolen te wijzigen. Afbeelding tegoed: Walmart.

Updates zijn ook vereenvoudigd. Ontwerpers wordt gevraagd de bibliotheek bij te werken wanneer ze een bestand openen dat de bibliotheek gebruikt. Wanneer geaccepteerd, worden de nieuwe kleuren toegepast.

Met deze techniek kunnen ontwerpers ook aangepaste bibliotheken met kleurenthema's maken, opslaan en toepassen op elk ander project. Het vermindert ook het aantal te creëren en te onderhouden symbolen in de symboolbibliotheek.

Configureerbare symbolen

Met het vervangingsmenu kunnen symbolen worden geconfigureerd in elke staat of variatie die in het ontwerpsysteem wordt beschreven. Ontwerpers kunnen ze verder aanpassen door relevante afbeeldingen, pictogrammen en kleuren te selecteren.

Een 1-regelig lijstsymbool is geconfigureerd om een ​​avatar te tonen en het geselecteerde selectievakje. Afbeelding tegoed: Walmart.

We verminderen onnodige overbruggingsmenu's door wat extra werk in de bibliotheek te doen. Symbolen met een donkere achtergrond tonen bijvoorbeeld alleen de witte versie van pictogrammen.

In sommige symbolen hoeft u de pictogramkleur niet te selecteren. Witgekleurde pictogrammen zijn beschikbaar voor donkere achtergronden en zwartgekleurde pictogrammen voor lichte achtergronden. Afbeelding tegoed: Walmart.

Sticker vel sjabloon

Met behulp van de bibliotheeksymbolen biedt het stickervel gemeenschappelijke patronen en een mixins-pagina om aangepaste kleuren, pictogrammen en avatars in relevante bibliotheeksymbolen te laten verschijnen. Het bevat ook een overzichtspagina voor notities, opmerkingen en de primaire en secundaire kleuren die in het ontwerp zijn gebruikt

Mixins: aangepaste kleuren, pictogrammen en avatars toevoegen

Door onze iteraties kwamen we erachter dat ontwerpers nodig hadden om aangepaste pictogrammen, kleuren en avatars toe te voegen. Door het loskoppelen van een symbool kon het geen toekomstige updates ontvangen en Choose Image werkt alleen voor een enkele instantie van het symbool.

Zonder de Ignite-bibliotheek te wijzigen, kunnen ontwerpers aangepaste pictogrammen, kleuren en afbeeldingen toevoegen die in Ignite-symbolen worden weergegeven. Sketch gebruikt symbooldimensies om menu's te vervangen. Art-boards met de juiste afmetingen staan ​​op het stickervel.

Wanneer de tekenborden in het stickervel worden omgezet in symbolen, verschijnen ze in alle relevante vervangende menu's. Afbeelding tegoed: Walmart.

Om een ​​nieuw pictogram toe te voegen, zetten de ontwerpers het verstrekte pictogramkunstbord om in een symbool. Het symbool verschijnt nu in elk vervangingsmenu met de bestaande door Ignite geleverde pictogrammen.

Voorbeelden van symboolconfiguraties

Een enkel symbool kan op meerdere manieren worden geconfigureerd. Het stickervel toont de verschillende configuraties voor de meest voorkomende symbolen.

Deze pagina op het stickervel bevat slechts 3 symbolen, maar toont de verschillende configuraties die mogelijk zijn. Afbeelding tegoed: Walmart.

Stickervel als sjabloon

Stickervellen kunnen rommelig worden naarmate ze meer worden gebruikt. Dingen worden verplaatst wanneer ze worden gekopieerd en geplakt. We bieden een eenvoudige manier om het stickervel toe te voegen aan de sjabloonmap van Sketch. Net als het installeren van apps op een Mac, slepen ontwerpers het bestand naar de map.

Er is een installatieprogramma beschikbaar om de stickervellen gemakkelijk beschikbaar te maken als schets-sjabloon. Afbeelding tegoed: Walmart.

Nieuw stickervel van sjabloon

Na het installeren van het stickervel kunnen ontwerpers een nieuw exemplaar krijgen om een ​​project te starten door het stickervel in het sjabloonmenu te selecteren.

U kunt een nieuw exemplaar van het stickervel maken in het menu Sjablonen. Afbeelding tegoed: Walmart.

Het stickervel gebruikt symbolen uit de bibliotheek, maar kan onafhankelijk worden opgewaardeerd. Hiermee kunnen nieuwe patronen aan het stickervel worden toegevoegd, zonder te wachten op de volgende release van de bibliotheek.

Beheer en publicatie van de bibliotheek

De Ignite Sketch-bibliotheek wordt behandeld als een product met een releasecyclus, functieachterstand, versiebeheer en release-opmerkingen.

Versienummering

We proberen bibliotheeksymbolen bij te werken op een manier die geen ontwerpen breekt bij het upgraden. Het versienummer vertelt ontwerpers het niveau van mogelijkheden met de bibliotheekversie die ze momenteel gebruiken.

Afbeelding tegoed: Walmart.

Het versienummer verschijnt in de miniatuur van de schetsbibliotheek, zodat u gemakkelijk kunt zien welke versie is geladen. De versie is ook te vinden in de symboolnaam van de release-opmerkingen.

Het versienummer van de bibliotheek is te vinden in de sjabloonminiatuur in de symboolnaam van de release-opmerkingen. Afbeelding credit: Walmart.

Distributie

GitHub is niet alleen voor code. Het kan worden gebruikt om niet-tekstbestanden te beheren en biedt een eenvoudige en gemakkelijk te maken productpagina.

GitHub-pagina wordt gebruikt om de productpagina te genereren. Afbeelding tegoed: Walmart.

Ontwerpers downloaden een gecomprimeerde map met de nieuwste versie en eerdere versies. Als ontwerpers een probleem ervaren, kunnen ze snel teruggaan naar een vorige versie.

Release-opmerkingen

Het is belangrijk om ontwerpers te informeren over nieuwe functies en bugfixes. GitHub Releases wordt gebruikt om de release-opmerkingen te publiceren, met het bibliotheekbestand bijgevoegd. De nieuwste release-opmerkingen zijn ook beschikbaar in de bibliotheek en zijn toegankelijk via het symboolmenu.

Voorbeeld van release-opmerkingen met GitHub-releases. Afbeelding tegoed: Walmart.Release-opmerkingen zijn als symbool in de bibliotheek beschikbaar. Afbeelding tegoed: Walmart.

Tracking bugs en functieverzoeken

GitHub Issues biedt een eenvoudige manier om bugs en functieverzoeken in te dienen. Elke inzending is een discussieonderwerp waar iedereen aan het gesprek kan deelnemen. Labels, projecten, mijlpalen en toegewezen persoon kunnen worden toegevoegd voor tacking.

Bugs en functieverzoeken kunnen worden gevolgd en besproken met GitHub Issues. Afbeelding tegoed: Walmart.

Een projectenpagina kan worden aangemaakt voor de volgende release en alle relevante bug / feature inzendingen kunnen worden toegevoegd via de tags, waardoor het eenvoudig is om precies te volgen wat er voor de volgende release zal zijn.

Communicatie

We hebben een speciaal Slack-kanaal dat toegankelijk is voor ontwerpers en nieuwe releases aankondigt. Voor elke release posten we de release-opmerkingen en verwijzen we naar de productpagina.

Nu is het jouw beurt

Door continue feedback en iteratie streven we ernaar de bibliotheek te verbeteren en onze ontwerpers te helpen nauwkeuriger, efficiënter en consistenter te ontwerpen.

Het kan de investering waard zijn om een ​​Sketch-symboolbibliotheek te maken als u consistentie moeilijk vindt of te veel tijd besteedt aan het opnieuw maken van dezelfde componenten.

Het vinden van de juiste balans tussen een vergrendeld en uiterst flexibel symbool kan moeilijk zijn. Begin klein, deel regelmatig met ontwerpers en itereer snel. Als de bibliotheek ontwerpers helpt consistenter te zijn en sneller te bewegen, hoeft u deze niet te verkopen. Ontwerpers zullen het eisen.