sobaka@pavlova.cc
+7 (921) 654-26-80
Click to order
Total: 
Напишите, пожалуйста, ваше имя и ваш рабочий e-mail, чтоб мы знали, кому и куда присылать уроки.
Ваше имя
Ваш Email
По закону мы обязаны спросить

Распространенное заблуждение заказчика: если у нас есть брендбук или UI-кит, дизайнерам будет проще и удобнее разрабатывать интерфейс. Это же почти конструктор. Поэтому ничего не придется разрабатывать с нуля — достаточно собирать страницы из готовых компонентов. Увы, это не так.

Почему брендбук и UI-kit не ускоряют разработку нового интерфейса

Собака Павлова
2020

ИНТЕРФЕЙСЫ

А, А. Дейнека. «Мирные стройки»

Почти никто не выбирает UI-кит под интерфейс

Парадокс, но правда.
Чаще заказчик сперва выбирает фреймворк, а потом — UI-кит. Это логично, потому что кодить продукт сложнее и дороже, чем разрабатывать дизайн. Так что заказчик сперва определяется с подходящей средой разработки, а затем уже смотрит на готовые UI-киты, которые к выбранной среде прилагаются. Дизайн — дело наживное. Приспособим под наши нужды.
В других ситуациях заказчик выбирает UI-кит по его внешнему виду. То есть по уже сверстанным компонентам: карточкам, блокам и даже страницам. Он думает, что у него получится точно так же. Но обычно не получается — дизайнер не использует их, потому что готовые компоненты не подходят для решения задач заказчика. Ну вот не впихнуть в карточку нужную информацию, и все. Поэтому берет только атомарные элементы: чек-боксы, кнопки, радиобаттоны, шрифты — и из них собирает нужные компоненты с нуля.

Компоненты и собранные экраны UI-кита — просто его реклама

Еще немного горькой правды: готовые блоки UI-китов практически невозможно использовать в дизайне. Их делают, чтобы показать возможности кита. Чтобы потенциальный покупатель посмотрел и подумал: эта страница выглядит здорово, мне подходит, пусть мой дизайн будет таким же. Но он не будет. Когда дело доходит до решения задач заказчика (то есть владельца кита), оказывается, что в готовые компоненты невозможно вставить нужные куски информации.
Мы же не можем подгонять смысл под чужой дизайн. Это не дизайн-процесс. Так что выход всегда один: собирать из атомарных элементов кита свои компоненты, стилистически близкие к тому, с чем пришел заказчик.

UI-кит — это атомарные элементы

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

Еще бывают дизайн-системы

Они встречаются у крупных заказчиков, которые уже давно живут со своим дизайном.
Дизайн-система — это свод правил, по которым работаем интерфейс, и компоненты. То есть дизайнеры и разработчики уже решили дизайн-задачи компании, зафиксировали решения в документе и описали правила их работы. И даже все закодили — то есть эти компоненты уже сверстаны.
Это не UI-киты.

Так что, UI-киты вообще бесполезны?

Зависит от кита и задач заказчика.
Так, если нужно сделать кабинет страхового агента, вы будете использовать поля, кнопки, чекбоксы и радиобаттоны. То есть подойдет практически любой UI-кит. Задача — просто сверстать из базовых элементов страницу.
Если у заказчика стоит задача создать корпоративный или маркетинговый сайт и он хочет использовать для этого UI-кит из типовых страниц сайта, вряд ли все пройдет гладко. Все равно многое придется переделывать. Но оттуда можно почерпнуть идеи, взять отдельные экраны и блоки, графические ходы. Для дизайнера это пример того, что клиент хочет в плане визуала. Уже хорошо. То есть использовать UI-кит можно, но как референс.

На самом деле все используют UI-киты

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

Так нужен заказчику UI-кит или нет?

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

А если у заказчика есть брендбук?

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

Что же тогда можно взять из брендбука?

Даже из самого круто брендбука мы можем взять только логотип, фирменные цвета и шрифт. Да и то их, возможно, придется адаптировать под интерфейс. Так, красный цвет — это цвет ошибки. Его не всегда получится использовать.
Если брендбук хорошо проработан, можно взять иллюстрации, фотографии, иконки, паттерны, фоны. Изредка — стиль общения (tone of voice) или какие-то правила редполитики. Но это крайности.
Еще брендбук можно использовать как референс: брать графические ходы, заимствовать паттерны.
Чем профессиональнее интерфейс, тем меньше можно взять.

Что делать, если заказчик хочет сохранить преемственность дизайна?

Заказчик узнал, что мы не сможем использовать его брендбук, и напрягся. А вдруг они не справятся и не смогут сохранить преемственность в дизайне? Все-таки брендбук делали крутые московские ребята за большие деньги, а дизайнеры интерфейса предлагают все перефигачить. Что делать? Вдруг интерфейс и уличный баннер будут совсем не похожи, как будто от разных компаний? Опасения заказчика понятны.
Но на самом деле перефигачивать тут нечего. Заказчик думает, что у него есть нужные материалы, а на самом деле — нет.
Исключение — сайты. В них мы можем использовать дизайн-наработки заказчика. Даже если сайт не коммерческий. Но чем ближе он будет к профессиональным интерфейсам, тем меньше мы сможем взять материалов из брендбука.
Единственный совет, который мы можем дать, — уделять больше внимания промежуточным результатам дизайна. Тогда заказчик избежит сюрпризов и сможет обсуждать подходящие варианты на ходу.
Статья также опубликована на vc.ru
21 мая 2020
Собака Павлова
Дизайн сложных интерфейсов
Другие статьи

Как оптимизировать процесс проектирования интерфейсов, чтобы разработчики могли быстрее реализовать нарисованное?

Как оценить масштаб изменений в UI-ките на старте проекта и сразу заложить время на них в бюджет.

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