Дизайн Friendly Design
2 119

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

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

В закладки

Что такое дизайн система?

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

Зачем нужна дизайн система?

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

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

Создание дизайн системы

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

Мудборды и цветовая палитра

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

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

Закругленные углы и тени

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

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

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

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

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

Размеры текста

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

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

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

Иконки

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

Кнопки, слайдер и индикаторы

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

Раскрывающиеся списки, теги и всплывающие окна (сложные элементы)

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

Заключение

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Friendly Design", "author_type": "self", "tags": [], "comments": 3, "likes": 22, "favorites": 104, "is_advertisement": false, "subsite_label": "design", "id": 66182, "is_wide": false, "is_ugc": true, "date": "Tue, 30 Apr 2019 15:42:34 +0300" }
{ "id": 66182, "author_id": 185535, "diff_limit": 1000, "urls": {"diff":"\/comments\/66182\/get","add":"\/comments\/66182\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/66182"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }

3 комментария 3 комм.

Популярные

По порядку

1

Спасибо за материал: приятно изложено, не затянуто и внятно.

Ответить
1

Осталось только упомянуть про реализацию дизайн-системы в коде

Ответить
1

Вилами по воде. Заголовок явно не соответствует контенту статьи, это скорее описание процесса.

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления
{ "page_type": "default" }