Язык дизайн-систем

Mar 10 2023
Во время дизайнерских проектов очень важно, чтобы ваша команда с самого начала говорила на одном языке. Я стал полагаться на метафоры как на средство быстрого проведения параллелей и получения общего понимания от сотрудников и клиентов.

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

Одна метафора, к которой я постоянно возвращаюсь, — это сравнение структуры дизайн-системы с традиционным языком. Они похожи в том, что оба предоставляют набор последовательных и согласованных «слов» (компонентов) и «грамматики» (рекомендаций), используемых для создания структуры. Точно так же, как язык позволяет людям общаться и передавать смысл, система дизайна позволяет командам создавать визуальные эффекты и опыт, которые являются последовательными и простыми для понимания.

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

Чтобы проиллюстрировать эти концепции, я использовал изображения одного из моих любимых редизайнов бренда — работы Netflix, выполненной Гретель . Эти изображения предназначены только для образовательных целей, и я не имею никакого отношения к работе. Кроме того, что он большой фанат.

1. Слова = основные компоненты

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

2. Грамматика = расположение ваших компонентов

Здесь мы определяем правила сборки наших основных компонентов. Именно здесь мы начинаем понимать, когда что-то кажется «фирменным». Некоторые примеры включают соотношение цветов, размеры и пары шрифтов, сетки макетов и кривые движения.

3. Семантика = смысл, передаваемый вашими аранжировками

Именно здесь проявляется истинный характер языка дизайна. Ваш язык призван отражать чувство скорости и производительности? Это должно быть весело и непочтительно? Спокойно и уверенно? Нюансы здесь — это то, что создает языки, с которыми мы резонируем на более личном уровне. «Вибе» языка живет в его семантике.

4. Прагматика = правильный смысл в нужное время

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

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

Спасибо за прочтение. ✌️