Распространенное заблуждение заказчика: если у нас есть брендбук или 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-китами заказчиков
Другие статьи
Быстро кодить нарисованный интерфейс — задача разработчиков. Но дизайнеры тоже могут повлиять на скорость реализации — с помощью юзер стори, интерактивных прототипов и документации.
Важно оценить в начале проекта, сколько времени потребуется, чтобы доделать UI-kit заказчика. Даже если он уже в Figma, из него еще нужно собрать среду для разработки дизайна.
Задача заказчика — сформулировать проблему, но часто он же пытается и придумать решение. То есть, сделать работу за дизайнера. Хотя у него на проекте есть своя важная роль.