Создание дизайн системы (пошаговое руководство)

Мы, лаборатория Friendly Design, следим за трендами и исследованиями в области дизайна и около. Хотим поделиться с вами переводом статьи о том, что такое дизайн-система и как нужно подойти к ее разработке.

Дизайн система интерфейса представляет собой набор компонентов для проектирования, который помогает создавать качественный продукт, заложенный в концепции. Это также похоже на некий «инвентарь», который можно использовать для сбора ресурсов и использования их в вашем дизайне.

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

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

Лучший способ — это составить список всех различных шаблонов, цветов, стилей текста и паттернов, которые вы будете использовать в своем дизайне. Это должен быть четкий набор, который показывает все компоненты и функции, необходимые для создания продукта (веб-сайта или приложения). Дизайн системы пользовательского интерфейса требуют достаточно много времени и самоотверженности, что может утомить, но никогда не сдавайтесь!

Давайте начнем с мудборда и цветовой палитры, таким образом, вы зададите тему для своего дизайна и получите довольно хорошую картину о том, как будет выглядеть ваш дизайн. Ваш мудборд может состоять из изображений трендовых пользовательских интерфейсов, вдохновляющих продуктов или простых изображений, которые вам импонируют. Эта доска также поможет вам выбрать цветовую палитру. Помните, что выбор цвета также должен быть основан на ваших исследованиях. Перечислите основные и вторичные цвета и не также забывайте об оттенках этих цветов. Оттенки используются для различных элементов дизайн системы. Большинству интерфейсов понадобятся, как пример, следующие оттенки:

очень светлый для фона;
чуть темнее для границ, линий, штрихов или разделителей;
средний тон для подзаголовков и вспомогательного текста;
темный для основных заголовков, основного текста и фона.

После того как определены цвета, перейдем к определению радиуса углов и теней для вашего пользовательского интерфейса. Закругления углов — это основа для ваших пользовательских карточек, таблиц и изменяет общий внешний вид вашего пользовательского интерфейса. Теперь вы можете спросить:

Откуда мне знать, насколько закругленными должны быть мои края?

Это зависит от того, какое настроение вы хотите придать пользователю. Если ваш радиус более округлый, он может выглядеть милым или более дружелюбным,если вы решите сохранить его квадратным — он может выглядеть более строгим.

Тени в основном используются для придания глубины и перспективы нашему дизайну. В последнее время тени находятся в тренде, и они используются для различения нескольких элементов в вашем пользовательском интерфейсе. Четырех теней должно быть достаточно, чтобы стилизовать каждый компонент в нашей системе:

тонкая тень, чтобы «приподнять» интерактивные компоненты и сформировать ощущение у пользователя, что на это можно нажать,
более выраженная тень для ховеров компонентов,
сильная тень, чтобы дать «перспективу» для выпадающих / всплывающих окон и других подобных компонентов,
отдаленная тень для модальных компонентов.

Нет пользовательского интерфейса без шрифтовой иерархии. Шрифт следует ритму. Вам нужны шрифты, которые будут дополнять друг друга, а также правильные размеры для различных заголовков. Это может показаться очень сложным, но благодаря таким инструментам, как https://type-scale.com/ можно легко подобрать шрифт и его параметры. Все, что вам нужно сделать, это выбрать размер шрифта, и в нем будут перечислены различные размеры, которые могут быть использованы. Вот какие типы шрифта вам могут понадобиться:

размер основного шрифта (рекоммендуемый — 16px),
например, чуть больше размер для вспомогательно текста в блоге,
пара больших размеров для заголовков и подзаголовков,
очень большой размер для названий разделов,
например, большой размер для цен на карточке продукта,
нам также понадобятся несколько маленьких размеров для подсказок и другого вторичного текста.

Иконки должны быть в одной стилистике. Убедитесь, что они используют сходные друг с другом стили и следуют определенным правилам. Для начала вы можете просто использовать наборы иконок, которые можно скачать бесплатно, но в будущем следите за тем, чтобы они были единообразными.

Кнопки станут действительно важным элементом вашего дизайна пользовательского интерфейса. Кнопки позволяют пользователям выполнять действия и делать выбор одним нажатием. Кнопки сообщают о действиях и следовательно, должны быть разработаны в соответствии с их рабочими функциями. Они должны легко обнаруживаться и идентифицироваться, четко указав действие, которое они позволяют выполнить. Существуют различные типы кнопок. Отображение статуса кнопок также является важной частью вашего пользовательского интерфейса.

Теперь, когда мы определили базовые элементы системы, мы можем использовать все эти элементы для создания других, таких как выпадающих списков, тегов и всплывающих окон!

Вот и все! Вы всегда можете добавить другие элементы, которы есть в вашем дизайне. После создания компонентов вы можете начать размещение их в вашем проекте.

В конце у вас добавятся еще множество другие элементов, например, как на картинках ниже.