Design af en styleguide: elementer, der går ind i at bygge 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, hvorpå virksomheder og produkter opnår konsistens, er gennem styleguides. En styleguide er et sæt standarder, der tilpasser design med en virksomheds stemme og mission.

Konsistens er vigtig, fordi den 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 styleguides og branding-retningslinjer. Den beskriver også nogle af de vigtigste elementer, som enhver styleguide skal have.

Forhåbentlig vil disse elementer og eksempler tjene som inspirationskilde 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.

  • Design dit produkt først, og opret derefter en styleguide. Start ikke med at oprette en styleguide. Find først ud af, hvad der fungerer, og hvad der ikke fungerer. Standardiser det derefter.
  • Du bliver aldrig helt tilfreds med din 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 formidle, inden du skriver en styleguide.

Principper

Styleguides skal 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.

Et af nøgleegenskaberne 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 træffe beslutninger.

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

Den direkte manipulation af indhold på skærmen engagerer mennesker og letter forståelsen ... Gennem direkte manipulation kan de se de umiddelbare, 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 tilstande for interaktioner, såsom at skubbe og rotere.

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

For mere om designprincipper, se Julie Zhuos artikel om et spørgsmål om princippet. 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. Hver styleguide skal have et par sektioner, der beskriver typografispecifikationer.

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

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

Hvis du har problemer med at vælge skrifttyper, skal du tjekke Typewolf og FontPair. For skriftstørrelse, se Modular Scale og dens ledsagende artikel Mere meningsfuld typografi.

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

Billedsprog

Vis, fortæl ikke. Billedsprog 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 beskriver, hvilke typer 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.

Billedsprog 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.

Her er et eksempel på Hubspots billedsprog.

Læg mærke til, hvordan de beskriver tonen og målet med fotograferingen, inden du giver eksempler.

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

Gitre og afstand

Godt design bekymrer sig så meget om mellemrum som indhold. Styleguides skal afspejle denne mentalitet og omfatte et afsnit om gitre og afstand.

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

For reading on grids, see A guide to creating grid systems that are built around your content as a primer. And follow it up with Modular Design For Grids.

Spacing should have its own section. Consistent spacing across a product creates a sense of uniformity and balance.

Having a list of margin sizes is useful to both designers and developers. In particular, developers can codify the space scale into Sass variables.

For example, using the Marvel spacing styleguide as a reference, the Sass counterpart might look like this:

$space-smaller: 5px;$space-small: 10px;$space-medium: 20px;$space-large: 40px;$space-larger: 80px;$space-largest: 240px;

Color

Color is another essential element in styleguides. Color helps establish visual hierarchies and create emotional resonance.

Color sections in styleguides make the lives of designers easier. Instead of spending time fretting about which colors to use, designers can reference the styleguide. This allows them to focus on content.

Som Buffer sætter 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.

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

$primaryColor = #168eea;$headingColor = #323b43;$bodyColor = #59626a;$borderColor = #ced7df;$lightBorderColor = #eff3f6;$fillColor = #f4f7f9;

Bemærk hvordan Buffer bruger primærfarve i stedet for et navn som brandBlue . Vælg navne, der beskriver farvenes 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, skal du tjekke den artikel, jeg skrev om Designing in Color.

Komponenter

A lot of designers and developers think about UIs as collections of components. The idea is that each UI component is its own entity. For example, a card is a single component.

Using this approach, designers can re-use components across multiple products and designs. This creates design consistency. It also minimizes the amount of time designers spend re-inventing the wheel designing UI components that already exist within an organization.

Component-based thinking also helps engineers. Design components can translate neatly into code. From an engineering perspective, components are like lego blocks that you can compose together.

While you’ll often see components in UI and pattern libraries, it’s also useful to include components in styleguides for other designers to reference.

For example, Mapbox has a styleguide that includes all of their commonly used components. This includes buttons, inputs, and forms. This way their designers and developers know what UI components are already available.

If you want to learn more about components check Brad Frost’s Atomic Web Design article.

Principles, typography, imagery, grids and spacing, color, and components. This list isn’t exhaustive, but these six topics form the basis of a good styleguide.

What are your thoughts on styleguides? What are some of the lessons that you’ve learned in the process of creating styleguides? Leave a note below or tweet at me.

If you enjoyed this article, you might enjoy Photos and stories from a designer.

Photos and stories from a designer

Nogle af de bedste designere er også nogle af de bedste fortællere. medium.com

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

PS Hvis du kunne lide denne artikel, ville det betyde meget, hvis du klikker på? og del med venner.