Дизайн-системы стали неотъемлемой частью любого крупного проекта. Они значительно упрощают жизнь дизайнерам и разработчикам, ведь с их помощью мы можем быстро и легко создавать новые страницы или маркетинговые материалы.
В последнее время все только и говорят о дизайн-системах! Дизайн-система — это собранная в одном месте информация обо всех UI-компонентах, обратившись к которой дизайнеры и разработчики могут повторно использовать их в своих проектах. Она напоминает библиотеку, состоящую из документации, руководства по стилю бренда и непосредственно дизайн-компонентов, таких как баннеры, кнопки, хедеры, иконки и изображения.
Дизайн-система может существовать на сайте или внутри ПО для создания прототипов (например, Figma или Sketch). Если вы являетесь частью большой команды, дизайн-система способна значительно сократить время проектирования, ведь вам не придется повторять одни и те же действия снова и снова.
Как и в случае с руководством по стилю, дизайнеры могут извлекать компоненты и паттерны из дизайн-системы по мере необходимости. Это довольно удобно, если вы проводите редизайн бренда, добавляете новые товары в интернет-магазин или запускаете новую кампанию по нескольким маркетинговым каналам.
Даже если вы работаете в одиночку или в небольшом стартапе, дизайн-системы могут значительно повысить вашу продуктивность и эффективность, одновременно укрепляя ваш бренд и делая дизайн более единообразным и последовательным. Мы расскажем о том, что такое дизайн-система и какую пользу она может принести вашему бизнесу. Оставайтесь с нами, чтобы увидеть несколько примеров лучших дизайн-систем!
Глубокое погружение
Зачем мне дизайн-система?
Чтобы создать продуманную дизайн-систему, требуются значительные средства, ресурсы и время.
Возможно, вам придется убедить заинтересованные стороны или других сотрудников компании в ее необходимости: объяснить что дизайн-система позволит значительно улучшить опыт взаимодействия, сделав пользователей счастливыми и довольными.
Дизайн-система — это отличный способ объединить усилия нескольких команд. Дизайнеры, разработчики и инженеры могут в любой момент обратиться к ней и найти инструкции по реализации того или иного элемента сайта либо приложения. Эти инструкции включают изображения, информацию о размерах для различных устройств и шаблоны.
Основа любой дизайн-системы — “язык дизайна”. Она включает не только визуальные элементы, но и документацию относительно тона и голоса бренда, а также подсказывает, как использовать те или иные компоненты.
Высокоэффективная дизайн-система содержит рекомендации по контенту и брендингу для команд, которые занимаются маркетингом и социальными сетями. Это инструмент совместной работы, который создает единый язык для общения и взаимодействия всех команд.
Кроме того, дизайн-системы предотвращают разобщенность, когда отдельные команды выполняют свою работу сами по-себе, без участия других команд. Это сильно влияет на единообразие коммуникации бренда с аудиторией. Дизайн-система помогает повысить качество взаимодействия и производительность всей организации, повышая эффективность рабочих процессов.
Когда и где использовать дизайн-системы
Если вы обеспокоены тем, что ваш продукт или услуга выглядят и воспринимаются непоследовательно, внедрение дизайн-системы позволит сделать опыт взаимодействия на всех платформах единообразным.
Представьте, что вам поручили обустройство нового района. Как же в нем разместятся жители? Вы можете создать шаблоны для домов разных размеров: дом с двумя спальнями будет отличаться от дома с четырьмя спальнями.
Скорее всего, вы спроектируете похожие друг на друга дома, чтобы выработать единый стиль или “язык дизайна”. Во всех домах будет одинаковая бытовая техника и ванные комнаты. Наличие шаблонов на основе потребностей пользователей и сохранение общего “языка” значительно ускорят процесс строительства по сравнению с проектированием и реализацией каждого дома с нуля индивидуально.
Дизайн-система работает точно так же. Если вашей команде сложно быстро рисовать новые макеты в рамках крупного проекта, дизайн-система значительно ускорит процесс. Обучаете новых дизайнеров? Познакомьте их с вашим брендом и рекомендациями по дизайну при помощи дизайн-системы.
Чтобы создать и поддерживать дизайн-систему в рабочем состоянии требуется много времени. Если вы работаете над разовым проектом или небольшим дизайном, вероятнее всего, внедрять такую систему не стоит. Однако для более крупных бизнесов и проектов первоначальные затраты однозначно окупятся в будущем. Инвестируйте время в создание дизайн-системы, чтобы впоследствии значительно сэкономить его для всех команд.
Кто должен использовать дизайн-систему?
По правде говоря, дизайн-систему должны использовать все сотрудники вашей компании, включая дизайнеров, разработчиков, инженеров, маркетологов, новых и текущих членов команды. Она может служить своего рода документацией для вашего бренда, продуктов и услуг. Любой, кто имеет отношение к ведению вашего бизнеса, должен иметь доступ к дизайн-системе компании.
Чек-лист для создания дизайн-системы
Из чего состоит дизайн-система?
Прежде чем приступить к созданию дизайн-системы, определите, какие цели вы преследуете. Пытаетесь ли вы оптимизировать процесс проектирования нескольких продуктов и услуг? Будет ли дизайн-система играть роль единого источника всех элементов брендинга и документации для разных команд? Кто будет ее применять? Будет ли она охватывать один проект или несколько?
Получив ответы на эти вопросы, вы будете готовы к созданию дизайн-системы. Кроме того, не забывайте периодически обсуждать с заинтересованными сторонами и другими командами, что будет включено в дизайн-систему в процессе работы над ней.
Разделы дизайн-системы
1. Брендинг и язык дизайна
Дизайн-система должна включать подробное описание языка и тона голоса вашего бренда. Допустим, вы управляете интернет-магазином косметики. Вы можете в любой момент обратиться к документации и найти в ней четкие инструкции о том, какие шрифты, логотипы и тон голоса использовать на сайте, в мобильном приложении, социальных сетях и при создании любого другого контента.
Это обеспечит единообразие вашего бренда на всех платформах, что укрепит доверие пользователей и подарит им приятный и удобный опыт взаимодействия: в конечном итоге ваш косметический бренд станет еще более привлекательным для потенциальных клиентов.
Включите в этот раздел вашей дизайн-системы следующие рекомендации:
- Философия дизайна и ценности, как организован процесс проектирования в вашей компании?
- Рекомендации относительно языка и тона голоса бренда
- Эксклюзивная для вашей организации терминология
- Типографика — шрифты, читабельность, размер и интервалы
- Цветовая палитра, соответствующая стандартам доступности
- Логотипы, в том числе когда и где их использовать, монохромные версии и различные форматы.
2. Лейаут и навигация
Обязательно включите в дизайн-систему правила перемещения пользователей по вашему сайту и мобильному приложению. Это отличный способ обеспечить единообразие и согласованность навигации на различных устройствах и платформах. Вы также можете добавить рекомендации по юзабилити и созданию лейаута.
Включите в этот раздел вашей дизайн-системы следующие рекомендации:
- Единицы измерения лейаута
- Сетки и контрольные точки для установления иерархии и организации навигации
- Взаимодействие — как пользователи взаимодействуют с элементами?
- Стандарты навигации и юзабилити
- Спецификации для различных устройств и экранов — компьютеры, смартфоны и планшеты.
- Спецификации для нестандартных устройств, если применимо (устаревшие системы или периферийные устройства).
3. Компоненты и шаблоны
Модульные компоненты включают интерактивные элементы, в том числе различные стили для разных случаев применения в ваших проектах.
Допустим, вы хотите добавить на сайт темный режим. Ваша дизайн-система может включать компоненты в темном оформлении, которые изменяют тему, не затрагивая контент, размер или другие элементы.
Крайне важно, чтобы документация для этого раздела была четкой и подробной, поскольку именно к нему команды будут обращаться чаще всего. Здесь содержатся инструкции по оформлению контейнеров, выпадающих списков, меню и многих других элементов.
Все эти элементы можно извлекать и вставлять в новые дизайны, что обеспечивает широкие возможности для масштабирования и быстрого создания многочисленных итераций. Элементы дизайн-системы можно легко адаптировать и настраивать под уникальные страницы или продукты без ущерба для единообразия, соблюдая при этом правила форматирования.
Чтобы дизайн-система получилась максимально эффективной, модульными и масштабируемыми должны быть следующие компоненты:
- Библиотеки UI-шаблонов, включая кнопки, иконки и текстовые метки
- Различные состояния кнопок и ссылок, например, наведение курсора, выбрано, неактивно и т.д.
- Карточки, формы, меню, выпадающие списки и модальные окна
- Хедеры, контейнеры и футеры
- Диаграммы, графики и любые визуализации данных
- Иконография, иллюстрации, изображения и видео, включая форматы и размеры файлов.
- Интерактивные элементы, такие как загрузка, прокрутка, пролистывание.
Как внедрить дизайн-систему
Как упоминалось ранее, первый шаг к внедрению дизайн-системы — убедить свою организацию и заинтересованные стороны в том, что она вам необходима.
Определите, как именно вы будете проектировать свою дизайн-систему: в Figma, Zeplin или другом инструменте? Если ваша команда создает вайрфреймы и прототипы в Figma, смело размещайте здесь и дизайн-систему.
С другой стороны, если ваша компания хочет сменить инструментарий, разумно будет сделать это до начала работы над дизайн-системой. Так вы сэкономите массу времени, которое пришлось бы потратить на перенос большого количества информации из одного инструмента в другой.
Как только все технические вопросы будут улажены, соберите элементы брендинга вашего бизнеса, включая цвета, логотипы, тон голоса и типографику в одном месте. После создания компонентов и шаблонов разработайте документацию для каждого компонента, чтобы другие знали, как их использовать.
Поддержка дизайн-системы
Когда дело доходит до создания и внедрения дизайн-систем, четких рекомендаций или инструкций, которым нужно следовать, не существует. Каждая дизайн-система должна быть адаптирована к потребностям бизнеса и целям компании. Ваша дизайн-система будет развиваться по мере развития вашего бренда.
Поэтому крайне важно создать надежную и в то же время гибкую, масштабируемую дизайн-систему. Этого можно добиться, определив несколько стилей, предоставив дизайн-рекомендации для разных устройств и позволив командам смешивать и сочетать компоненты.
BMW предлагает множество различных типов автомобилей: компактные, спортивные седаны, большие роскошные седаны, кабриолеты, кроссоверы и внедорожники. Каждый автомобиль предназначен для своих целей, но все они разделяют единый “язык дизайна”. Почти все BMW можно узнать благодаря решетке радиатора, по форме напоминающей "почки", и изгибу Хофмайстера. Как и в случае с модельным рядом BMW, убедитесь, что ваша дизайн-система является гибкой и масштабируемой.
Поддержание дизайн-системы в актуальном состоянии — это большая и сложная задача. Вы можете запланировать проверки через определенные промежутки времени для добавления новых компонентов и удаления устаревших. Кроме того, желательно сохранять предыдущие версии дизайн-системы, чтобы можно было при необходимости вернуться к ним позднее. Это называется “контроль версий”.
Позаботьтесь о том, чтобы команда могла вносить корректировки в компоненты и шаблоны и обновлять их без последствий для остальных элементов дизайн-системы. Также система должна поддерживать переменные отдельных компонентов. И самое главное, она должна быть надежной: не давать сбоев при добавлении, изменении или удалении элементов.
Вдохновляющие дизайн-системы
Хотите увидеть несколько вдохновляющих дизайн-систем? Эти примеры дадут вам более полное представление о том, как работают дизайн-системы. Возможно, у вас даже появятся идеи для создания собственной! Вот они:
1. Дизайн-система G Source от The Guardian
У британского новостного ресурса The Guardian есть собственная дизайн-система G Source. Она выглядит аккуратно и организованно, разделы удобно просматривать. Вся документация написана понятным разговорным языком. Дизайн-систему открывает список принципов дизайна и UX и краткое руководство для дизайнеров. Здесь также имеются рекомендации по брендингу, включая цвета, логотипы и типографику.
В G Source говорится: "Коэффициент контрастности всех текстовых и интерактивных элементов, представленных в наших цифровых продуктах, должен соответствовать уровню AA Руководства по доступности веб-контента (WCAG 2.1)". Это огромный плюс — так мы напоминаем дизайнерам о необходимости проверять свои работы на предмет доступности.
Уровень детализации и подробная документация делают эту дизайн-систему настоящим сокровищем. Она учит дизайнеров, как реализовать различные взаимодействия, включая состояния наведения, выбора, фокуса и выделение текста в статьях.
G Source содержит правила и для создания рекламных рассылок: сетки, размеры шрифтов, высота строки и многое другое.
Компоненты могут быть помечены следующими тегами: "в разработке", "бета" или "стабильный". Более подробно о критериях можно почитать в разделе "Процесс".
Лучше всего то, что эта дизайн-система позволяет членам команды вносить свой вклад несколькими способами: дизайн, разработка и документирование.
2. Дизайн-система Orbit от Kiwi
Многие путешественники используют агрегатор Kiwi, чтобы спланировать свой очередной отпуск. У компании есть собственная дизайн-система под названием Orbit, полностью интерактивная и очень дружелюбная.
Эта дизайн-система еще более детализирована, чем G Source, что особенно сильно бросается в глаза в разделах с компонентами и паттернами проектирования. Она ориентирована на пользователей и ставит во главу угла их интересы и цели.
Orbit содержит подробные инструкции по созданию контента в социальных сетях. Здесь также имеется много информации для разработчиков, включая поддержку языков, в которых тексты пишутся справа налево.
Фото выше — скриншот библиотеки в Figma, на котором представлено множество вариантов модальных окон для разных платформ. На первый взгляд, все выглядит запутанно, однако лучшие дизайн-системы действительно охватывают все возможные сценарии.
3. Дизайн-система W3C
Консорциум Всемирной паутины, известный как W3C, устанавливает веб-стандарты. Дизайн-система W3C, которая может показаться не слишком привлекательной, содержит много полезной информации как для дизайнеров, так и для разработчиков. В ней используется простой язык и даются понятные определения таких терминов, как контейнеры, хлебные крошки и пагинация.
Разработчики найдут здесь множество примеров кода, которые можно взять за основу: дизайн-система W3C содержит HTML-код, необходимый для реализации элементов дизайна, таких как кнопки и формы. Уже одно это делает ее отличным ресурсом для изучения, особенно если вы дизайнер, желающий узнать больше о веб-разработке.
4. Дизайн-система Fluent UI от Microsoft
Дизайн-система Fluent UI от Microsoft объединяет компоненты, элементы и шаблоны, упрощающие проектирование для Windows, macOS, веба, мобильных устройств, включая Android и iOS, и даже кроссплатформенных проектов.
Fluent UI может похвастаться тремя характеристиками, которые отличают любую успешную дизайн-систему: модульность, надежность и высокая масштабируемость. Именно эта система используется в пакете Microsoft Office и Microsoft Teams. Довольно сложная Fluent UI служит "зонтиком" для многих небольших библиотек: Windows UI Library, Fluent UI Apple, Fluent UI Android и других.
Конечно, Microsoft — крупная корпорация, обладающая достаточными ресурсами для создания всеобъемлющей системы, которую можно без труда адаптировать к множеству платформ, приложений и устройств. Небольшим организациям такая подробная документация не требуется.
Как и дизайн-система W3C, Fluent UI предоставляет примеры дизайна элементов с кодом. Благодаря повсеместному распространению Microsoft существует множество каналов связи, ресурсов и способов поддержки Fluent UI. Хотя сперва система может показаться сложной, ее разделы хорошо организованы, а соответствующая документация всегда остается под рукой.
Наконец, эта дизайн-система прекрасно справляется с задачей разграничения платформ, сохраняя при этом единый “язык дизайна”. Это поразительно, учитывая, огромный след, оставленный Microsoft в самых разных отраслях.
5. Дизайн-система Aurora от правительства Канады
Дизайн-система с открытым исходным кодом Aurora используется канадским правительством для проектирования опыта взаимодействия на различных устройствах. Она содержит ресурсы для дизайнеров, разработчиков, писателей и специалистов по анализу данных.
Лендинг Aurora четко отражает лежащую в основе дизайн-системы философию. В разделе ресурсов дизайнеры могут скачать UI-кит для Adobe Illustrator и XD, а разработчики — загрузить скомпилированный CSS и Javascript.
.webp)
Как и W3C, Aurora предоставляет HTML-код для элементов дизайна: это позволяет быстро и без усилий реализовать их на сайте, что экономит время разработки. Дизайн-система содержит небольшие подсказки, которые обеспечивают максимальную производительность приложения или сайта, например, загрузка только необходимых элементов.
Здесь даже есть глоссарий, обратившись к которому дизайнеры, разработчики и копирайтеры могут получить полное представление о документации дизайн-системы. Aurora предлагает всем желающим сделать свой вклад и оставить обратную связь.
Дополнительные ресурсы по теме
Хотите узнать больше? Следующие ресурсы помогут вам глубже погрузиться в мир дизайн-систем:
- Design Systems Repo, впечатляющая коллекция статей, книг, лекций и инструментов, посвященных дизайн-системам
- Атомарный дизайн, книга Брэда Фроста
- Создание дизайн-системы: Чек-лист из 100 пунктов, электронная книга Марцина Тредера
- Дизайн-системы, книга Аллы Холматовой
- Создание дизайн-системы для дизайнеров, видео от Figma
- Поднимите свой дизайн на новый уровень с помощью UI-китов, дизайн-систем и многого другого, видео Фемке ван Шунховен
Чувствуйте себя как дома
Все мы хотим, чтобы наши клиенты и посетители были довольны, однако не менее важно, чтобы наши дизайнеры и разработчики также чувствовали себя счастливыми. Дизайн-системы способны значительно повысить их продуктивность и ускорить рабочий процесс.
Несмотря на то, что создание дизайн-системы требует больших временных затрат, это принесет огромные дивиденды всей команде — точно так же, как строительство домов на основе заранее продуманных, адаптируемых, масштабируемых шаблонов. Опыт взаимодействия пользователей с вашими продуктами и услугами станет более качественным и приятным. В конце концов, если сотрудники, клиенты и посетители останутся довольны, ваш бизнес будет развиваться более гармонично.
Хотя создание дизайн-системы кажется сложной задачей, результат подарит вам прекрасную возможность по-настоящему продемонстрировать суть вашего бизнеса! Вам уже не терпится начать?
