Designsystem har vært i vinden de siste fem årene. Omtrent samtidig med lanseringen av Googles Material Design 2, og flere andre selskapers tilgjengeliggjøring av deres egne designsystemer, så ble begrepet designsystem allment kjent i bransjen. I Norge har vi f.eks. NAV sitt designsystem Aksel.

Et designsystem består av:

Visuell profil - Blant annet dokumentasjon og eksempler på fargevalg, teksttyper, stil og fremtoning.

Verktøy - Det en bruker for å kunne bygge, vedlikeholde, dokumentere designsystemet, samt kommunikasjonsverktøy.

Komponentbibliotek - Forhåndsdesignede, gjenbrukbare byggesteiner som brukes til å designe brukergrensesnitt.

Retningslinjer - Viser do’s and dont’s, og for eksempel oppførselen til komponenter med animasjon og lignende.

Mennesker - Designere, utviklere og produktutviklere. Menneskene som sørger for at designsystemet holdes i live og videreutvikles.

Kort fortalt kan et designsystem beskrives som en kilde til sannhet som forteller hvordan en virksomhet skal oppleves på analoge og digitale plattformer. I denne artikkelen kommer jeg primært til å fokusere på retningslinjer og komponentbiblioteket til et designsystem.

Hvorfor skal man ha et designsystem?

Et designsystem kan ha sine fordeler for organisasjonen.

Én kilde til sannhet

Uten et designsystem kan det oppstå uklarhet i hva som er “siste versjon” av for eksempel komponenter og retningslinjer. Vet å ha det dokumentert i designsystemet, så kan en alltid referere til det. Med et designsystem som kontinuerlig videreutvikles, så trenger en også å bare gjøre endringer ett sted, og det blir enklere å oppdatere i fremtiden.

Ved å ha én kilde til sannhet, så vil det bli et mindre behov for å standardisere og organisere designet på tvers av team og flater, siden dette er noe designsystemet tar seg av. Dette skaper også visuell likhet på tvers av forskjellige typer enheter, skjermer og applikasjoner.

Effektivisering

Med et fungerende designsystem, så kan en spare tid med å bruke komponenter om igjen og en unngår dobbeltarbeid der en må designe den samme tingen flere ganger for å brukes flere steder. Dette frigir tid for både utviklere og designere, som da kan brukes til å skape gode brukergrensesnitt og gode brukeropplevelser, fremfor å bruke tid på valg av farger, fonter, utforming av komponenter, osv.

Hvis man i tillegg bruker design tokens for å bygge opp komponentene, så blir også skille mellom design og utvikling mindre, som også er tidsbesparende.

Universell utforming

Designsystemet kan bidra til at organisasjonen oppfyller diverse krav til universell utforming. Ved å tenke UU fra bunnen av når man bygger opp komponentbiblioteket til et designsystem, så sikrer man seg at alt som benytter seg av designsystemet også opprettholder et minimumsnivå av universell utforming.

Et par tips

Et kontinuerlig arbeid

Når man jobber med et designsystem, så bør man tenke på det som et hvilket som helst produkt et team utvikler. Eneste forskjellen er at dette produktet er ment for intern bruk. Som andre produkter, så kreves det kontinuerlige forbedring for at produktet skal skape verdi og ikke bli utdatert. De samme prinsippene gjelder for interne verktøy som for eksterne verktøy.

Tenk MVP

Det er lett å la seg rive med når en ser andre designsystemer som har et nærmest uendelig antall komponenter som dekker alle mulig behov, men når en skal starte på et designsystem, så er det beste å starte i det små. Tenk MVP og start med det minste, og der det dekker det “største” minste behovet, så bygger en videre derfra. Et komplett ferdig designsystem er ikke et mål i seg selv og som tidligere skrevet, så kreves det kontinuerlig arbeid for å ha et designsystem som gir verdi.

Du kan ikke dekke alt

Det er ikke nødvendigvis alt som skal inn i et designsystem. Hvert produktteam har egne behov, og designsystemet bør ikke oppleves som begrensende. For å unngå dette, så er det lov å gå utenfor malen hvis et team trenger en helt spesifikk komponent, som kan leve utenfor designsystemet. Dersom det over tid blir en komponent flere team også ønsker å benytte seg av, så kan den da bli implementert i designsystemet, slik at alle teamene benytter seg av den samme komponenten.

Det krever laginnsats

Et designsystem kan fort bli utdatert hvis det jobbes med en gang, og så vedlikeholdes det ikke av et dedikert time. En måte å unngå dette på kan være å sette sammen et eget team for designsystemet, som består av designere og utviklere fra forskjellige team. Da kan hvert teammedlem representere teamet de sitter i til vanlig og på den måten sørge for at designsystem-teamet kontinuerlig får innspill på behov og forbedringer fra de som tar designsystemet i bruk. På denne måten, så vil designsystemet reflektere organisasjonsen nåværende behov og holde seg oppdatert.

Og helt til slutt

Ikke kast bort tid på å bygge et fullstendig designsystem inspirert av en annen organisasjon sitt designsystem. Mest sannsynlig har dere egne behov, og dere trenger kanskje ikke 8 forskjellige knapper å velge mellom. Et designsystem er et levende produkt for organisasjonen, og bør reflektere de nåværende behovene organisasjonen har.

Designsystemer og hvordan de kan hjelpe din virksomhet

Design systems have been in the spotlight for the last couple of years. Approximately concurrent with the launch of Google's Material Design 2 and several other companies making their design systems available, the term "design system" became widely recognized in the industry. In Norway, for example, we have NAV's design system, Aksel.

A design system consists of:

Visual profile - Including documentation and examples of color choices, text types, style, and appearance.

Tools - What one uses to build, maintain, document the design system, and communication tools.

Component library - Pre-designed, reusable building blocks used to design user interfaces.

Guidelines - Showing do's and don'ts, and the behavior of components with animations, etc.

People - Designers, developers, and product developers. The people ensuring that the design system is kept alive and developed further.

In short, a design system can be described as a source of truth that dictates how a business should be experienced on analog and digital platforms. In this article, I will primarily focus on the guidelines and the component library of a design system.

Why have a design system?

A design system can have its advantages for the organization.

A single source of truth

Without a design system, there may be uncertainty about the "latest version" of, for example, components and guidelines. By having it documented in the design system, one can always refer to it. With a design system that is continuously evolving, you only need to make changes in one place, making it easier to update in the future.

With a single source of truth, there will be less need to standardize and organize the design across teams and surfaces, as the design system takes care of this. This also creates visual consistency across different types of devices, screens, and applications.

Efficiency

With a functional design system, you can save time by reusing components, avoiding duplication where you have to design the same thing several times for different uses. This frees up time for both developers and designers, which can be used to create good user interfaces and user experiences, rather than spending time on choosing colors, fonts, designing components, etc.

If you also use design tokens to build components, the distinction between design and development becomes less, which is also time-saving.

Universal design

The design system can contribute to the organization meeting various universal design requirements. By thinking about universal design from the ground up when building the component library of a design system, you ensure that everything using the design system also maintains a minimum level of universal design.

A couple of tips

Continuous work

When working with a design system, think of it as any product a team develops. The only difference is that this product is intended for internal use. Like other products, continuous improvement is required for the product to create value and not become outdated. The same principles apply to internal tools as external tools.

Think MVP

It's easy to get carried away when seeing other design systems with an almost infinite number of components covering every possible need. However, when starting a design system, it's best to start small. Think MVP and start with the smallest, where it covers the "largest" smallest need, and build from there. A complete design system is not a goal in itself, and as mentioned earlier, continuous work is required for a design system to provide value.

You can't cover everything

It's not necessarily everything that should be in a design system. Each product team has its own needs, and the design system should not be perceived as limiting. To avoid this, it's okay to go beyond the template if a team needs a very specific component that can live outside the design system. If over time, a component becomes something several teams also want to use, it can then be implemented in the design system so that all teams use the same component.

It requires team effort

A design system can quickly become outdated if it is worked on once and then not maintained by a dedicated team. One way to avoid this is to assemble a dedicated team for the design system, consisting of designers and developers from different teams. Each team member can represent the team they usually sit in and ensure that the design system team continuously receives input on needs and improvements from those using the design system. In this way, the design system will reflect the organization's current needs and stay updated.

And finally

Don't waste time building a complete design system inspired by another organization's design system. Most likely, you have your own needs, and you may not need 8 different buttons to choose from. A design system is a living product for the organization and should reflect the current needs of the organization.

Designsystem

Designsystemer og hvordan de kan hjelpe din virksomhet

Design systems and how they can benefit your organization