Af @jonathanzwhite

Designe et styleguide: elementer, der går ind i bygning med overbevisende produkter

Hvis du ser på virksomheder som Dropbox, Google og Twitter, vil du bemærke, at de hver især har deres egen unikke æstetik. På tværs af alle deres produkter, både mobil og web, er der en følelse af konsistens og ensartethed i deres design.

Den måde, virksomheder og produkter opnår konsistens på, er gennem styleguider. En styleguide er et sæt standarder, der justerer design med en virksomheds stemme og mission.

Konsistens er vigtig, fordi det skaber tillid. Og design handler om at skabe relationer mellem produkter og brugere.

Målet med denne artikel er at introducere dig til nogle gennemtænkte styleguider og branding-retningslinjer. Den indeholder også nogle af de vigtigste elementer, som enhver styleguide skal have.

Forhåbentlig vil disse elementer og eksempler tjene som en kilde til inspiration og påvirke, hvordan du designer bæredygtige produkter i fremtiden.

Før vi kommer i gang ...

Her er et par forslag til, når du designer styleguides.

Styleguider hjælper med at skabe konsistens og ensartethed i produkter.
  • Design dit produkt først, og opret derefter et styleguide. Start ikke med at oprette et styleguide. Find først ud af, hvad der fungerer, og hvad der ikke fungerer. Derefter standardiseres det.
  • Du vil aldrig være helt tilfreds med dit styleguide. Det er okay. Oprettelse af et universelt designsprog er en iterativ proces.
  • Har en stærk forståelse af den stemme og det budskab, du vil have dit produkt til at overføre, før du skriver en styleguide.

principper

Styleguider bør altid have en side om designprincipper. Designprincipper er et sæt retningslinjer, der påvirker, hvordan designere nærmer sig og løser problemer, når de bygger et produkt.

Designprincipper fra Apples retningslinjer for menneskelig grænseflade.

En af de vigtigste egenskaber ved et godt designprincip er, at det ikke er indlysende eller for bredt. Et godt designprincip skal være specifikt nok til at hjælpe en designer med at tage beslutninger.

Lad os se på Apples retningslinjer for menneskelig grænseflade, der har et afsnit om designprincipper. Et af deres principper er direkte manipulation.

Den direkte manipulation af indholdet på skærmen engagerer mennesker og letter forståelsen ... Gennem direkte manipulation kan de se de øjeblikkelige, synlige resultater af deres handlinger.

Denne beskrivelse forklarer, at direkte manipulation er et princip, der styrer og formidler fysiske og digitale interaktioner. Det hjælper designere med at vælge interaktionsformer, såsom at skubbe og rotere.

Når man kommer med designprincipper, er mindre mere. Start med tre vejledende principper, og iterere derfra.

For mere om designprincipper, se Julie Zhuos artikel om et spørgsmål om princip. Det har enormt påvirket, hvordan jeg tænker på designprincipper.

Typografi

Typografi er nøglen til at opnå enhed på tværs af flere produkter og design. Hvert styleguide skal have et par sektioner med detaljerede typografispecifikationer.

Det er vigtigt at begrænse antallet af skrifttyper og størrelser, du bruger for at holde dine design enkle. Som en almindelig tommelfingerregel skal du starte med højst to skrifttyper - en til dine overskrifter og en for dine kroppe. Det meste af tiden behøver du ikke mere end det.

Typografi fra Googles retningslinjer for materialedesign

Medtag også eksempler på brug af typografi for at hjælpe andre designere og udviklere med at forstå, hvornår de skal bruge ting som fed eller kursiv.

Eksempler på brugstype hjælper designere med at forstå, hvordan man bruger skrifttypen.

Hvis du har problemer med at vælge skrifttyper, skal du tjekke Typewolf og FontPair. For fontstørrelse tjek Modular Scale og den tilhørende artikel More Meaningful Typography.

Husk også, at skrifttyper ikke er sat i sten. Du kan altid ændre dem senere.

Imagery

Vis, fortæl ikke. Billedbehandling er et kraftfuldt værktøj i hænderne på en designer. Billeder er dynamiske. De formidler mening ved første øjekast og fremkalder følelser.

Hvis du har aktiverne, kan du overveje at inkludere et afsnit, der indeholder oplysninger om, hvilke slags billeder andre designere skal bruge til at formidle dit produkts stemme og identitet.

Nike er et godt eksempel på et firma, der bruger billeder til at formidle deres brand. Deres fotos har en filmkvalitet, der inspirerer dig til at deltage i deres mission og brand.

Billedbehandling er ikke kun begrænset til fotografier. Virksomheder som Dropbox bruger sjældent fotografier i deres design. I stedet formidler de deres personlighed gennem illustrationer.

Dropbox formidler deres personlighed gennem illustrationer.

Her er et eksempel på Hubspots billedstilside.

Bemærk, hvordan de beskriver tonen og målet med fotografiet, før de giver eksempler.

Med retningslinjer for, hvilke billeder de skal bruge, kan designere bedre kommunikere mening til brugerne og i sidste ende fordybe dem i en sammenhængende oplevelse.

Gitter og afstand

Godt design er ligesom indhold så meget om hvidt. Styleguider bør afspejle denne mentalitet og omfatte et afsnit om gitre og afstand.

Det er vigtigt at etablere et gittersystem, der fungerer til enhver brugssag. I afsnittet om gitre skal du medtage oplysninger som antallet af kolonner og rækker, marginer og eksempler på anvendelser.

Se En vejledning til oprettelse af gittersystemer, der er bygget omkring dit indhold som en primer, for at læse om gitre. Og følg det op med Modular Design For Grids.

Mailchimp's gitresystem består af 8 fleksible søjler med 30px tagrender mellem søjler.

Afstand skal have sin egen sektion. Konsistent afstand mellem et produkt skaber en følelse af ensartethed og balance.

Marvel kodificerede deres afstand.

At have en liste over marginstørrelser er nyttigt for både designere og udviklere. Navnlig kan udviklere kodificere pladsskalaen i Sass-variabler.

Hvis du f.eks. Bruger Marvel-afstandsstykket som reference, kan Sass-modparten se sådan ud:

$ plads-mindre: 5px;
$ plads-lille: 10px;
$ mellemrum: 20px;
$ plads-stor: 40px;
$ plads-større: 80px;
Største $ plads: 240px;

Farve

Farve er et andet vigtigt element i styleguider. Farve hjælper med at etablere visuelle hierarkier og skabe følelsesmæssig resonans.

Farvesektioner i styleguider gør designernes liv lettere. I stedet for at bruge tid på at kæmpe med, hvilke farver de skal bruge, kan designere henvise til styleguiden. Dette giver dem mulighed for at fokusere på indhold.

Som Buffer udtrykker det i deres styleguide:

Brug af farver bringer konsekvent en følelse af fortrolighed og enhed til et produkt. Buffer's farveskema sigter mod at være klar, diskret og venlig.
Buffer's farve-styleguide er nyttig for både designere og udviklere.

I eksemplet ovenfor navngiver Buffer hver af deres farver. Dette er især nyttigt for udviklere, fordi de kan omdanne farverne til Sass-variabler:

$ primærfarve = # 168eea;
$ overskriftFarve = # 323b43;
$ bodyColor = # 59626a;
$ borderColor = # ced7df;
$ lightBorderColor = # eff3f6;
$ fillColor = # f4f7f9;

Bemærk, hvordan Buffer bruger PrimaryColor i stedet for et navn som brandBlue. Vælg navne, der beskriver farverens rolle i stedet for selve farven. Denne tilgang gør det lettere for både designere og ingeniører at justere deres farveværdier uden at skulle ændre navnet.

Hvis du vil lære mere om valg af farve, kan du tjekke den artikel, jeg skrev om Designing in Colour.

komponenter

Mange designere og udviklere tænker på UI'er som samlinger af komponenter. Tanken er, at hver UI-komponent er sin egen enhed. For eksempel er et kort en enkelt komponent.

Prøve komponenter fra Airbnb's blogindlæg på deres nye designsprog.

Ved hjælp af denne tilgang kan designere genbruge komponenter på tværs af flere produkter og design. Dette skaber designkonsistens. Det minimerer også den tid, designere bruger på at opfinde hjulet på at designe UI-komponenter, der allerede findes i en organisation.

Komponentbaseret tænkning hjælper også ingeniører. Designkomponenter kan oversættes pænt til kode. Fra et teknisk perspektiv er komponenter som legoklodser, som du kan komponere sammen.

Komponenter kan sammensættes til at oprette grænseflader.

Mens du ofte ser komponenter i brugergrænseflade og mønsterbiblioteker, er det også nyttigt at inkludere komponenter i styleguider, som andre designere kan henvise til.

Mapbox nedbryder deres UI i flere komponenter.

For eksempel har Mapbox en styleguide, der inkluderer alle deres ofte anvendte komponenter. Dette inkluderer knapper, indgange og formularer. På denne måde ved deres designere og udviklere, hvilke UI-komponenter der allerede er tilgængelige.

Hvis du vil lære mere om komponenter, skal du tjekke artiklen Brad Frosts Atomic Web Design.

Principper, typografi, billeder, gitter og afstand, farve og komponenter. Denne liste er ikke udtømmende, men disse seks emner danner grundlaget for en god styleguide.

Hvad er dine tanker om styleguider? Hvad er nogle af de lektioner, som du har lært i processen med at skabe styleguider? Efterlad en note nedenfor eller tweet til mig.

Hvis du nød denne artikel, kan du nyde fotos og historier fra en designer.

Du kan finde mig på Medium, hvor jeg udgiver hver uge. Eller du kan følge mig på Twitter, hvor jeg poster ikke-sensiske ramblings om design, front-end-udvikling og virtual reality.

P. S. Hvis du nød denne artikel, ville det betyde meget, hvis du klikker på og deler med venner.