Дизајнирање стилског водича: елементи који улазе у изградњу убедљивих производа

Ако погледате компаније попут Дропбок-а, Гоогле-а и Твиттер-а, приметићете да свака од њих има своју јединствену естетику. У свим њиховим производима, како мобилним тако и вебима, осећа се доследност и уједначеност у њиховом дизајну.

Начин на који компаније и производи постижу доследност је путем водича за стил. Водич за стил је скуп стандарда који дизајн усклађује са гласом и мисијом компаније.

Доследност је важна јер ствара поверење. А дизајн се састоји од стварања односа између производа и корисника.

Циљ овог чланка је да вас упозна са неким добро осмишљеним водичима за стил и смерницама за брендирање. Такође су детаљно наведени неки од најважнијих елемената које би сваки стилски водич требало да има.

Надамо се да ће ови елементи и примери послужити као извор инспирације и утицати на то како дизајнирате одрживе производе у будућности.

Пре него што започнемо ...

Ево неколико предлога за дизајнирање водича за стил.

  • Прво дизајнирајте свој производ, а затим направите стилски водич. Не започињте стварањем стилског водича. Прво схватите шта функционише, а шта не. Затим га стандардизујте.
  • Никада нећете бити у потпуности задовољни својим стилским водичем. У реду је. Стварање универзалног дизајнерског језика је итеративни процес.
  • Имајте добро разумевање гласа и поруке коју желите да ваш производ пренесе пре писања водича за стил.

Принципи

Водичи за стил увек треба да имају страницу о принципима дизајна. Принципи дизајна су скуп смерница које утичу на то како дизајнери приступају и решавају проблеме приликом израде производа.

Једна од кључних карактеристика доброг принципа дизајна је да није очигледан или преширок. Добар принцип дизајна треба да буде довољно специфичан да помогне дизајнеру да доноси одлуке.

Погледајмо Аппле-ове смернице за људски интерфејс, које имају одељак о принципима дизајна. Један од њихових принципа је директна манипулација .

Директна манипулација садржајем на екрану укључује људе и олакшава разумевање ... Кроз директну манипулацију они могу да виде непосредне, видљиве резултате својих поступака.

Овај опис објашњава да је директна манипулација принцип који управља и посредује у физичким и дигиталним интеракцијама. Помаже дизајнерима да одаберу начине интеракције, попут превлачења и ротирања.

Када осмишљавате принципе дизајна, мање је више. Почните са три водећа принципа и поновите од тамо.

Да бисте сазнали више о принципима дизајна, погледајте чланак Јулие Зхуо „Питање принципа“. То је изузетно утицало на моје размишљање о принципима дизајна.

Типографија

Типографија је кључна за постизање јединства у више производа и дизајна. Сваки стилски водич треба да има неколико одељака који детаљно описују спецификације типографије.

Важно је ограничити број фонтова и величина које користите како би дизајни били једноставни. Као опште правило, почните са највише два фонта - један за заглавља и један за тело. Већину времена вам неће требати ништа више од тога.

Такође, наведите примере примера типографије како бисте помогли другим дизајнерима и програмерима да разумеју када треба користити ствари попут подебљаног слова или курзива.

Ако имате проблема са одабиром фонтова, погледајте Типеволф и ФонтПаир. За величину фонта погледајте Модулар Сцале и пратећи чланак Више смислене типографије.

Такође имајте на уму да фонтови нису постављени у камену. Увек их можете променити касније.

Имагери

Покажи, не говори. Слике су моћно средство у рукама дизајнера. Слике су динамичне. Они на први поглед преносе значење и изазивају емоције.

Ако имате средства, размислите о томе да укључите одељак у којем се детаљно описује које слике би други дизајнери требало да користе за преношење гласа и идентитета вашег производа.

Нике је добар пример компаније која користи слике како би пренела свој бренд. Њихове фотографије имају филмски квалитет који вас инспирише да учествујете у њиховој мисији и бренду.

Imagery isn’t only limited to photographs. Companies like Dropbox rarely use photographs in their designs. Instead, they convey their personality through illustrations.

Here is an example of Hubspot’s imagery styleguide.

Notice how they describe the tone and goal of the photography before providing examples.

With guidelines for what images to use, designers can better communicate meaning to users and ultimately immerse them into a cohesive experience.

Grids and spacing

Good design cares about whitespace as much as content. Styleguides should reflect this mentality and include a section on grids and spacing.

It’s important to establish a grid system that works for every use case. In the section on grids, include information like the number of columns and rows, margins, and example uses.

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.

Како Буффер каже у њиховом стилском водичу:

Употреба боја непрекидно уноси осећај познатости и јединства у производ. Шема боја бафера жели да буде јасна, неупадљива и пријатељска.

У горњем примеру, Буффер именује сваку од њихових боја. Ово је посебно корисно програмерима јер боје могу претворити у Сасс променљиве:

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

Обратите пажњу на то како Буффер користи примариЦолор уместо имена попут брандБлуе . Изаберите имена која описују улогу боје уместо саме боје. Овај приступ олакшава и дизајнерима и инжењерима да прилагоде вредности боја без потребе за променом имена.

Ако желите да сазнате више о одабиру боје, погледајте чланак који сам написао на тему Дизајн у боји.

Компоненте

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

Неки од најбољих дизајнера су и неки од најбољих приповедача прича. средња.цом

Можете ме наћи на Медијуму где објављујем сваке недеље. Или ме можете пратити на Твиттер-у, где објављујем несензибилне расправе о дизајну, фронт-енд развоју и виртуелној стварности.

ПС Ако бисте уживали у овом чланку, много би значило ако кликнете на? и поделите са пријатељима.