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

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

Парадокс, но правда.

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

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

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

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

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

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

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

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

Они встречаются у крупных заказчиков, которые уже давно живут со своим дизайном.

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

Это не UI-киты.

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

Зависит от кита и задач заказчика.

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

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

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

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

Никто не рисует базовые элементы с нуля — все уже давно нарисовано. Это просто трата времени.

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

Да.

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

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

Увы, он тоже не поможет разработать интерфейс быстрее.

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

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

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

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

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

Еще брендбук можно использовать как референс: брать графические ходы, заимствовать паттерны.

Чем профессиональнее интерфейс, тем меньше можно взять.

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

Заказчик узнал, что мы не сможем использовать его брендбук, и напрягся. А вдруг они не справятся и не смогут сохранить преемственность в дизайне? Все-таки брендбук делали крутые московские ребята за большие деньги, а дизайнеры интерфейса предлагают все перефигачить. Что делать? Вдруг интерфейс и уличный баннер будут совсем не похожи, как будто от разных компаний? Опасения заказчика понятны.

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

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

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