Розробка стилістичного посібника: елементи, які допомагають створити переконливі вироби

Якщо поглянути на такі компанії, як Dropbox, Google та Twitter, ви помітите, що кожна з них має свою унікальну естетику. В усіх їхніх продуктах, як мобільних, так і в Інтернеті, відчувається послідовність та одноманітність дизайну.

Шляхи, що компанії та продукти досягають узгодженості , здійснюються завдяки керівництву стилями. Стильовий посібник - це набір стандартів, що узгоджує дизайн із голосом та місією компанії.

Послідовність важлива, оскільки вона створює довіру. А дизайн - це створення взаємозв’язків між продуктами та користувачами.

Метою цієї статті є ознайомити вас з деякими продуманими стилістичними рекомендаціями та рекомендаціями щодо брендування. У ньому також детально викладені деякі найважливіші елементи, які повинні бути у кожного стилю.

Сподіваємось, ці елементи та приклади послужать джерелом натхнення та вплинуть на те, як ви розробляєте стійкі продукти в майбутньому.

Перш ніж ми почнемо ...

Ось кілька порад щодо того, коли ви розробляєте керівництва стилем.

  • Спершу спроектуйте свій продукт, а потім створіть стилістику. Не починайте зі створення стилістики. Спочатку з’ясуйте, що працює, а що не. Потім стандартизуйте його.
  • Ви ніколи не будете повністю задоволені своїм стилем. Нічого страшного. Створення універсальної мови дизайну - це ітераційний процес.
  • Майте чітке розуміння голосу та повідомлення, яке ви хочете передати своєму продукту, перш ніж писати стилістичний посібник.

Принципи

Посібники стилів завжди повинні мати сторінку з принципами дизайну. Принципи дизайну - це набір керівних принципів, які впливають на те, як дизайнери підходять і вирішують проблеми при побудові продукту.

Однією з ключових характеристик принципу хорошого дизайну є те, що він не є очевидним або занадто широким. Хороший принцип дизайну повинен бути досить конкретним, щоб допомогти дизайнеру приймати рішення.

Давайте поглянемо на керівні принципи Apple Human Interface, що містять розділ про принципи дизайну. Одним з їх принципів є пряма маніпуляція .

Безпосереднє маніпулювання вмістом на екрані залучає людей та полегшує розуміння ... Завдяки безпосереднім маніпуляціям вони можуть бачити безпосередні, видимі результати своїх дій.

Цей опис пояснює, що прямі маніпуляції - це принцип, який керує та опосередковує фізичну та цифрову взаємодію. Це допомагає дизайнерам вибирати такі режими взаємодії, як гортання та обертання.

При розробці принципів дизайну, менше - це більше. Почніть з трьох керівних принципів і повторіть звідти.

Щоб отримати докладнішу інформацію про принципи дизайну, перегляньте статтю Джулі Чжуо "Питання принципу". Це надзвичайно вплинуло на те, як я думаю про принципи дизайну.

Друкарня

Типографіка є ключем до досягнення єдності між різними продуктами та дизайнами. Кожен стилістичний посібник повинен мати кілька розділів, що деталізують технічні характеристики друкарні.

Важливо обмежити кількість шрифтів та розмірів, які ви використовуєте, щоб спростити дизайн. Як загальне емпіричне правило, починайте щонайбільше з двох шрифтів - одного для заголовків, а іншого для тіла. Здебільшого вам більше цього не знадобиться.

Також включіть приклади випадків використання типографіки, щоб допомогти іншим дизайнерам та розробникам зрозуміти, коли використовувати такі речі, як напівжирний шрифт або курсив.

Якщо у вас виникають проблеми з вибором шрифтів, перевірте Typewolf і FontPair. Для розміру шрифту перегляньте модульну шкалу та супровідну статтю Більш значуща друкарня.

Також майте на увазі, що шрифти не встановлені в камені. Ви завжди можете змінити їх пізніше.

Образність

Покажіть, не кажіть. Образи - це потужний інструмент в руках дизайнера. Зображення динамічні. Вони передають сенс на перший погляд і викликають емоції.

Якщо у вас є активи, розгляньте можливість включення розділу, в якому детально описуються типи зображень, які інші дизайнери повинні використовувати для передачі голосу та ідентичності вашого товару.

Nike - хороший приклад компанії, яка використовує зображення, щоб передати свій бренд. Їхні фотографії мають кінематографічну якість, що надихає вас на участь у їх місії та бренді.

Образи не обмежуються лише фотографіями. Такі компанії, як Dropbox, рідко використовують фотографії у своїх проектах. Натомість вони передають свою особистість за допомогою ілюстрацій.

Ось приклад керівництва стилем зображень Hubspot.

Зверніть увагу, як вони описують тон і мету фотографії, перш ніж наводити приклади.

Отримавши вказівки щодо використання зображень, дизайнери можуть краще передавати значення користувачам і, зрештою, занурити їх у цілісний досвід.

Сітки та інтервали

Хороший дизайн так само дбає про пробіл, як і про вміст. Посібники стилів повинні відображати цю ментальність і включати розділ про сітки та інтервали.

Важливо створити систему сіток, яка працює для кожного випадку використання. У розділі про сітки включіть таку інформацію, як кількість стовпців і рядків, поля та приклади використання.

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.

Як зазначає Буфер у своєму керівництві стилем:

Постійне використання кольорів привносить у товар відчуття знайомства та єдності. Колірна гамма буфера прагне бути чіткою, ненав’язливою та доброзичливою.

У наведеному вище прикладі буфер називає кожен із кольорів. Це особливо корисно для розробників, оскільки вони можуть перетворити кольори на змінні Sass:

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

Зверніть увагу, як Buffer використовує primaryColor замість імені, такого як brandBlue . Виберіть замість самого кольору імена, що описують роль кольору. Такий підхід полегшує як дизайнерам, так і інженерам коригувати свої кольорові значення без необхідності міняти назву.

Якщо ви хочете дізнатись більше про вибір кольору, перегляньте статтю, яку я писав на тему «Дизайн в кольорі».

Компоненти

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

Some of the best designers are also some of the best storytellers.medium.com

You can find me on Medium where I publish every week. Or you can follow me on Twitter, where I post non-sensical ramblings about design, front-end development, and virtual reality.

P.S. If you enjoyed this article, it would mean a lot if you click the ? and share with friends.