Разработка дизайн системы

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

Полноценная дизайн-система содержит руководство по стилю, сосредоточенное на графических элементах (цвета, шрифты, иллюстрации) и их использовании, а библиотека шаблонов объединяет функциональные компоненты. Большинство современных систем проектирования содержат соответствующие вкладки: например, «Визуальные элементы» и «Компоненты».

Визуальные элементы дизайн-системы

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

• Цвета. Определение палитры поможет задать начальную тему, которую дизайнеры нередко называют «мудбордом», то есть буквально «доской настроения». Она представляет собой ряд изображений с текстурами, графическими элементами и палитрой. При составлении мудборда дизайнер определяет основные и дополняющие цвета с оттенками для фона, разделительных элементов, текста, а также элементов интерфейса.
• Текст. Для оформления элементов интерфейса, заголовков и самих материалов выбирается несколько шрифтов, которые должны гармонично сочетаться между собой. Допускается также варьировать размеры и виды выделения одних и тех же шрифтов (например, курсив, жирный, жирный курсив) для разных целей.
• Иконки. Оформление иконок должно быть выдержано в одном стиле, иначе дизайн ощутимо потеряет в привлекательности. Отрисовку всех иконок лучше доверить одному художнику.
• Кнопки меню. Здесь важно позаботиться об информативности интерфейса, добавляя изображения активного/неактивного состояния кнопок там, где это необходимо. При этом важные кнопки (например, «Корзина» или «Акции») нужно выделить дополнительно на фоне остальных элементов.

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

Четыре принципа организации дизайн-системы

Разработка дизайн-системы сайта в студии Дизайн-депо (Москва) проводится в соответствии с чёткими принципами, помогающими нам достигать успехов в проектировании сайтов различной направленности: от визиток и лендингов до интернет-магазинов и крупных промышленных и информационных порталов.

• Функциональность превыше всего. Дизайн — это больше, чем просто визуальный аспект, он должен способствовать достижению целей, поставленных производителем или владельцем бренда. Поэтому здесь должен действовать принцип: чем проще, тем лучше. Предоставить пользователю один-два эффективных инструмента для решения конкретной задачи (например, навигации) куда более разумно, чем дать ему с десяток менее очевидных вариантов. Наши дизайнеры разрабатывают не только красивый, но и интуитивно понятный интерфейс, с учетом удобства пользователя, в соответствии с принципами UX (подробнее про UX читайте в статье «Разработка дизайна сайта»).
• Дизайн должен выражать ценности бренда. Прежде чем начинать работу над проектом, важно определить четкие общие цели, которые диктуются концепцией и целями самого бренда. Разумеется, эти цели не статичны, они могут развиваться и меняться, ведь бизнес — живой и должен реагировать на требования времени. Поэтому мы должны убедиться в том, что-то, что мы проектируем, согласуется с ключевыми ценностями компании, а ключ к успеху — тесное взаимодействие команды дизайнеров с бренд-менеджерами и руководством бренда.
• Продукт должен отражать фирменный стиль и язык. Дизайнеры нередко говорят о «моделях восприятия», которым соответствуют следующие элементы: цвета, шрифты, формы, иконки, изображения (картинки, фотографии), анимация, голоса и звуки. Всё это формирует образ бренда, с помощью это образа компания транслирует свою идею, концепцию своим клиентами или покупателям.Все вышеперечисленные элементы — пазлы, которые создают общую картину, цельную и узнаваемую. В нашей системе проектирования это реализуется в соответствии с принципами, которые определяют, что можно, а чего нельзя делать, иллюстрируя это различными примерами использования шаблонов. Это позволяет нашим дизайнерам использовать «правильные комбинации» пазлов, которые делают бренд уникальным и узнаваемым.
• Для полноценной работы необходима база компонентов, а также рекомендации по их использованию. Компоненты можно сравнить с блоками, которые используются нашими дизайнерами для создания готовых конструкций. Что до рекомендаций, они представляют собой своеобразные «инструкции по сборке», которые позволяют нам логично и последовательно использовать компоненты, указанные в тех. документации.