Визуальный язык. Как сохранить цельность проекта

Oleg Lukinov
Sep 5, 2018 · 8 min read

Специально для блога Quantumsoft

Питер Брейгель Старший. Вавилонская башня

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

Несмотря на то, что понятие модульности давно применяется в таких областях, как например, архитектура или дизайн печатных изданий, в области проектирования интерфейсов это понятие пришлось открывать заново. Потребовались годы, чтобы призывы таких евангелистов как Bill Scott, Nathan Curtis, Brad Frost дали свои плоды. Зато сегодня слово «дизайн-система» близко к тому, чтобы стать buzzword. Зрелая дизайн-система должна представлять собой платформу-конструктор, работающую на базе компонентов со вшитым дизайном. Но чтобы все компоненты не только согласовывались между собой, но и передавали философию и индивидуальность бренда, нельзя забывать про плоть и кровь любого проекта — визуальный язык. Идея конструктора приятна и понятна, однако именно благодаря визуальному языку вы всегда отличите Lego от других конструкторов.

Визуальный язык глубоко интегрирован в дизайн-систему и выполняет особую миссию. Если задача дизайн-системы в целом — ускорить процесс разработки, сохранив при этом цельность системы, то задача визуального языка заключается в выстраивании правильной коммуникации. Brad Frost использует термин «язык дизайна» (design language):

“Руководства по использованию языка дизайна определяют общее направление проектирования, философию и подход к конкретным проектам или продуктам.”

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

“Язык — это процесс свободного творчества; его законы и принципы неизменны, но способы использования этих законов и принципов не ограничены и бесконечно разнообразны.”
Noam Chomsky, Американский лингвист, философ, когнитивист, историк, социальный критик и политический активист.

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

Картинка: Unsplash.com

Все знают фразу “Дизайн — это не только то, как предмет выглядит и какое впечатление производит. Дизайн — это то, как он работает.” Однако визуальный язык позволяет получить нужную информацию еще до того, как вы узнаете, как это работает.

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

Картинка: Unsplash.com

Похожая ситуация в коммуникации пользователя с дизайном сайтов и приложений.

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

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

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

Эти продукты определенно говорят на разных языках

Визуальный язык начинается с принципов, которые пользователь считывает в первые секунды взаимодействия — в нашем случае взаимодействия с продуктом.

Новому опыту можно обучить, однако проще всего использовать известные или общепринятые метафоры в качестве фундамента для общения. Ранние дизайн-системы использовали cкевоморфизм, который максимально пытался подражать физически существующим объектам. Судя по всему это стало защитной реакцией человека на шоковую терапию массового перехода от бумаги и физического мира к миру экрана. Когда первый шок прошел, а пользователи получили новый опыт и освоили экранную среду, пришло время отказа от всего «лишнего». Стало понятно, что кнопка может быть кнопкой и без эффекта объема. Тем не менее Material Design также использует понятную парадигму физически существующего в пространстве материала, тем самым апеллируя к базовым понятиям.

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

Алан Купер в книге «Интерфейс. Основы проектирования взаимодействия» рекомендует начинать исследования визуального языка параллельно с началом проектирования. В этих исследованиях анализируется цвет, шрифты и виджеты, общий размер и свойства «материала» интерфейса (например, с чем больше он ассоциируется — со стеклом или с бумагой). При этом Алан Купер предлагает начинать работу на абстрактном уровне, так как это позволяет провести начальное обсуждение визуального языка, не отвлекаясь на подробности проектирования взаимодействия. Хорошей отправной точкой могут стать рекомендации по использованию бренда. На этом этапе могут возникнуть 2 сложности.

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

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

Базовые компоненты визуального языка. Чек-лист

Nathan Curtis выделяет «Большую четверку» визуального языка системы: это цвет, шрифт, иконки и расстояния.

Расширенный список мог бы выглядеть таким образом:

Основные

  • Контекст. Алан Купер отмечает, что все без исключения рекомендации по проектированию зависят от контекста, в котором они используются. Очевидно, что программные продукты, рассчитанные на использование при ярком освещении, должны отличаться от тех, которыми будут пользоваться в темноте.
  • Форма. Это не только основной признак, по которому мы узнаем, что собой представляет объект, но и важный стилеобразующий компонент. Например, прямоугольные кнопки создают совершенно иное восприятие, нежели скругленные или имеющие скошенные края. Даже такое небольшое отличие в зависимости от контекста может подчеркнуть брутальность, элегантность или дружелюбность интерфейса
Пример, в котором форма становится стилеобразующим элементом визуального языка. Оригинал
  • Размер. Люди автоматически упорядочивают объекты по их размеру. Поэтому это свойство является очень важным для построения информационной иерархии.
  • Текст и шрифты. Типографика при правильном применении может стать ключевым стилеобразующим элементом. Однако в большинстве случаев работает правило «меньше да лучше». Использование большого количества разных шрифтов или избыточное количество размеров одного шрифта создает хаос. Поэтому все размеры и гарнитуры должны быть жестко регламентированы и иметь свое назначение.
  • Цвет. Цветовое кодирование — мощный инструмент. Поэтому новые цвета не должны появляться на пустом месте, когда просто «нужно сделать что-то более заметным». Ограниченная палитра не только создает более цельное впечатление, чем разброс цветов, но и оставляет больше пространства для акцентов на важных действиях. Обычно достаточно двух основных цветов (темного и светлого), одного нейтрального (например светло-серого) и одного контрастного для важных акцентов.
Пример работы с визуальным языком в парадигме Material Design. Оригинал

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

  • Изображения. Иконки, иллюстрации и фотографии в большей степени, чем другие элементы, передают обещания бренда. Здесь важна преемственность: все новые изображения должны соответствовать выбранной стилистике. При выборе стилистики следует учитывать контекст. Например, в некоторых случаях ресторанное меню, выполненное с использованием иллюстраций вместо фотографий, может отпугнуть потенциальных клиентов.
  • Пространство. Благодаря отступам и свободному пространству между элементами можно создавать информационную иерархию, группировать объекты по смыслу, создавать сетку или разрушать ее. Кроме того, пространство может становиться трехмерным, как в случае с Material Design. В общем, если вы еще сомневаетесь в стилеобразующих возможностях этого инструмента, вам сюда.

Дополнительные

  • Текстура. Мода на плоский дизайн привела к тому, что текстуры стали значительно реже применяться на практике. Тем не менее при грамотном применении они могут дать ощутимые преимущества.
  • Ориентация. Это свойство может применятся к объектам, а может лежать в основе всего интерфейса. Например, в определенных случаях страница веб-сайта может быть горизонтальной, а не вертикальной, если это обусловлено логикой восприятия контента.
  • Движение и анимация. Это поистине супер-инструменты, правильное использование которых — целое искусство. Главное, что нужно помнить про движение и анимацию — они всегда подчиняются общей логике визуального языка и подчеркивают его особенности.

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

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

Создание экосистемы элементов. Логика проектирования

Когда я был ребенком, я смотрел научно-фантастические фильмы и телешоу со странным восхищением. Был один вопрос, от которого я никак не мог отделаться: почему все они одеты одинаково?
Brad Frost Atomic Design

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

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

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

Brad Frost предлагает парадигму Design System First: вместо того, чтобы просто заменить неудачный компонент в готовом продукте, стоит разобраться, почему он не работает как нужно, подготовить более удачное решение и обновить его в дизайн-системе. Как следствие, улучшение произойдет везде, где использовалось неудачное решение, а дизайн-система будет содержать только самые актуальные компоненты.

Оригинал здесь

Этот подход эффективен и в работе с визуальным языком. В этом плане мне нравится метафора швейной машинки.

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

Следование этому принципу особенно ценно, если над проектом работают несколько дизайнеров.

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

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

У меня нет идей, почему кнопка в этом диалоговом окне так отличается от своих собратьев.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade