Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>10 окт 2019</li>

3 <li>0</li>

4 </ul><h2>Дизайн-система: что это, кому нужно и как её создать</h2>

5 Объясняем на примерах, зачем нужна дизайн-система, какие преимущества она даёт и почему нужна далеко не всем.

6 vlada_maestro / shutterstock

7 Переводит, пишет, редактирует. Любит живую речь, уважает букву Ё. Формализм мастдай.

8 Тариф Кан(Tarif Kahn)

9 об авторе

10 Глава дизайнерского отдела в <a>LogoDesign.net</a>. Любит рассказывать о тонкостях разработки, графическом и веб-дизайне.

11 Если вы следите за миром дизайна, то наверняка слышали про дизайн-системы. О них не сказал лишь ленивый. Одни дизайнеры в восторге от нового тренда, а другие как-то не очень. "Опять придётся что-то учить", - сетуют они. Но как раз дизайн-системы того стоят.

12 Почему же дизайн-системы стали актуальны? Чтобы понять это, рассмотрим типичный сценарий: нам нужен новый интерфейс для продукта.

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

14 Но постойте, какие шрифты мы выбрали? Какой цвет взять, чтобы дизайн создавал нужное настроение? Если я выберу синий, то ощущения будут не такими, как от красного. Мы вообще определились с тональностью сайта? Как насчёт самих компонентов: мы договорились о размерах карточек1 и их элементах?

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

16 Они ускоряют процесс проектирования и дают его участникам много дополнительных преимуществ.

17 Джереми Кит (Jeremy Keith), ирландский веб-дизайнер и писатель,<a>говорит о дизайн-системе</a>так:

18 "…Она включает в себя библиотеки шаблонов, руководства по стилю и другие объекты. Но не обманитесь: даже самый полный набор шаблонов никогда не станет для вас дизайн-системой. Потому что система - это не сами компоненты, а то, что связывает их воедино. Это правила и ограничения, которые указывают, как эти шаблоны работают вместе, когда и где целесообразно использовать каждый".

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

20 Иногда программисту что-то неясно в переданном дизайне, а порой возникают особые случаи, про которые дизайнер забыл.

21 Например, он отрисовал только интерфейс, но разработчику не обойтись без загрузочного экрана и экранов-заглушек (для вывода ошибок и возможных решений). Где взять дизайн отсутствующих элементов? Если сослаться на дизайн-систему, то программиста ничто не задержит - он сразу сможет кодировать. А всё благодаря тому, что последнее слово при разработке - за источником, который доступен сразу всем.

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

23 Как работает дизайн вашего продукта? Может статься, что хорошо это знает один-единственный человек в команде. Тогда всем приходится спрашивать его мнение о дизайнерских решениях. Это замедляет производительность, утомительно, а кроме того, рискованно.

24 Что делать, если человек этот вдруг уволится со скандалом и обидами? Он унесёт свои знания с собой - и взять их будет уже неоткуда. Отразите эти же знания в дизайн-системе - и они станут доступны любому человеку в любое время.

25 Дизайн-системы привлекают отраслевую прессу. Если вы создадите такую для своей компании, не скрывайте её от дизайн-сообщества: поделитесь своими идеями и процессами - и люди о вас заговорят.

26 Большинство крупных игроков, таких как Shopify, Google, IBM и Atlassian, гордятся собственными дизайн-системами. Они общедоступны, не пугают своим языком и оформлены по-современному. Например:

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

28 Когда же дизайн-система окупается?

29 Если речь о небольшом проекте, где над дизайном работают всего несколько человек, то тратить время на дизайн-систему вряд ли стоит.

30 Если же вы работаете в большой компании, где над одним продуктом трудятся много команд, тогда дизайн-система станет отличным вложением и принесёт выгоду всем участникам.

31 Но так бывает далеко не всегда. Например, команда Shopify, кажется, пожалела о решении построить свою дизайн-систему<a>Polaris</a>. Причину они объяснили так: "Усилия на создание системы крошечны по сравнению с теми, какие нужны для её поддержки". Остальная часть<a>статьи</a>рассказывает, как команда разработчиков Polaris боролась за сохранение своего детища.

32 Если после долгих раздумий вы всё же решили построить дизайн-систему, то вот как это сделать.

33 Построить дизайн-систему для вашего продукта не получится, если эту идею не поддержат все в вашей организации. Это не так-то просто. К сожалению, чем крупнее компания, тем медленнее в ней принимают подобные решения.

34 Следует учесть всё, что участвует в дизайне продукта. Это значит, что шрифты, значки, цвета, макеты, компоненты, карточки и другие элементы дизайна нужно собрать и организовать.

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

36 Для чего нужен ваш продукт? Как спроектировать каждую его часть? Каково предназначение каждого элемента?

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

38 Например, в системе управления контентом<a>Medium</a>есть текстовый редактор. Принцип его работы - сделать публикацию простой и быстрой. Что этому мешает? Долгое оформление готового текста "под себя".

39 Скриншот текстового редактора MediumПоэтому вместо уймы оформительских возможностей Medium выбрал 7 ключевых. Это продуманное дизайнерское решение, которое помогает авторам быстрее завершать работу с контентом, а не перебирать цвета и размеры шрифта бесконечно.

40 Говорить с пользователем можно не только словами. Всё, что мы видим помимо них, тоже о чём-то сообщает: несёт посыл или создаёт настроение. И у белой страницы с чёрным текстом, и у лендинга, и у интерфейса веб-приложения будет свой визуальный язык. В нём нет слов, зато есть визуальные средства.

41 Взгляните на картинки:

42 Сравнивая лендинги для<a>Dinosaur.Design</a>и <a>iPhone XS</a>, можно заметить, какой настрой пытается создать каждая компания, какой посыл за этим стоит.

43 Яркие цвета, весёлые рисунки и непринуждённые шрифты Dinosaur.Design создают беззаботную атмосферу, будто говорят: "Обращайся - и работа пройдёт неформально и расслабленно".

44 Целевая страница iPhone XS тёмная, с фото высокого разрешения, практичным и сдержанным шрифтом. Apple задаёт более серьёзный тон. Здесь говорят о статусности.

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

46 Так выглядит карточка в дизайн-системе Google (Material Design):

47 Карточка включает в себя содержимое объекта и возможные действия с нимШаблоны - это инструкции по исполнению компонентов. Например, если у вас есть карточка для поста в блоге, её шаблон подскажет, как структурировать и написать заголовок, подзаголовок, где должно быть изображение и так далее до полной реализации. И это уже тот дизайн, который увидят конечные пользователи.

48 Дизайн-системы - это большой шаг вперёд в мире дизайна.

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

50 Но перед созданием дизайн-системы важно взвесить все за и против, оценить затраты времени и сил.

51 Что станет с дизайн-системами через пять или десять лет? Этого я не знаю. Но ясно, что сейчас их время: о них говорят, их вовсю внедряют, и в ближайшем будущем это не изменится.

52 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>