Surf 
Тендеры и лиды
Информация
Разбираем без дизайнерского жаргона: что такое UI Kit, чем он отличается от дизайн-системы, почему это про деньги и скорость, а не про аккуратность, и когда собирать систему рано.
Представьте: над продуктом работают два дизайнера. Один рисует кнопку со скруглением четыре пикселя, второй — восемь, оба уверены, что так правильно. Потом разработчик кодит третий вариант, потому что макет открылся криво. Через полгода в приложении живёт семь разных кнопок, пять оттенков синего и три отступа, которые называются «стандартный». Каждая такая мелочь — это потерянное время на согласования и продукт, который выглядит так, будто его собирали разные команды. UI Kit придумали ровно для того, чтобы этого не было.
Мы в Surf занимаемся дизайном приложений и проектированием продуктов, у которых десятки экранов и миллионы пользователей, и проводим аудит UX/UI-дизайна, поэтому смотрим на UI Kit не как на папку с красивыми кнопками, а как на инструмент, который экономит деньги и время. Если нужна пошаговая инструкция по сборке, у нас есть подробный гайд по UI Kit — здесь про смысл и про то, когда это вообще нужно.
UI Kit — это библиотека готовых элементов интерфейса, собранных в едином стиле: кнопки, поля ввода, иконки, карточки, меню, плюс базовые правила про цвета, шрифты, отступы и сетку. Набор кирпичиков, из которых складываются все экраны продукта.
Главная магия в том, что кирпичики не копируются, а переиспользуются. Дизайнер не рисует кнопку заново на каждом экране, а берёт готовый компонент из библиотеки. Поправил мастер-компонент в одном месте — и кнопка обновилась во всём проекте сразу. То же и с цветом: поменяли значение основного цвета один раз, и он сменился везде, где использовался.
Самая частая путаница: UI Kit и дизайн-систему считают синонимами. Это не так, и разница важна, когда решаешь, во что вкладываться.
UI Kit отвечает на вопрос «что». Вот кнопка, вот её цвет, вот размеры. Это библиотека визуальных компонентов.
Дизайн-система отвечает ещё и на «когда» и «как». Вот кнопка, вот в каких ситуациях её использовать, как она ведёт себя при загрузке и ошибке, какие у неё правила. Сверх компонентов сюда входят токены, версии, принципы, тексты интерфейса и процессы, по которым всё это живёт и обновляется. UI Kit — это часть дизайн-системы, её видимый слой, а не вся она.
Практический вывод простой. Маленькому продукту с парой десятков экранов полноценная дизайн-система не нужна, ему хватает UI Kit. Дизайн-система начинает окупаться, когда экранов и сценариев становится много, над продуктом работает несколько команд или брендов больше одного. До этого момента строить тяжёлую систему — значит платить за то, чем не пользуешься.
UI Kit любят считать внутренней кухней дизайнеров. На деле выгоду получает бизнес, и вот в чём она.
Скорость. Когда компоненты уже готовы, новый экран собирается из кирпичиков за часы, а не рисуется с нуля. По отраслевым оценкам команды с собственной библиотекой компонентов выкатывают новое заметно быстрее — счёт идёт на десятки процентов, и это прямая экономия на разработке.
Консистентность как доверие. Продукт, где всё единообразно, воспринимается как надёжный. Разнобой в кнопках и отступах человек не сформулирует словами, но почувствует, что приложение сделано небрежно, а небрежности он не доверит свои деньги.
Дешёвые изменения. Поменять цвет бренда или скругление во всём продукте — это правка одного компонента, а не ручной обход сотни экранов. Без библиотеки такая «мелочь» превращается в недели работы.
Масштаб. Чем больше продукт, тем дороже обходится отсутствие системы. На паре экранов бардак незаметен, на двухстах он становится главным тормозом.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13703 тендера
проведено за восемь лет работы нашего сайта.
Здесь прячется то, ради чего UI Kit вообще стоит затевать всерьёз. Хороший UI Kit — это не картинка для дизайнера, а контракт между дизайном и кодом.
Работает он через токены. Токен — это переменная: не «синий вот такой», а «основной цвет», за которым закреплено конкретное значение. Размеры, отступы, шрифты, цвета описываются токенами, и эти токены можно выгрузить в код, чтобы дизайн и приложение брали значения из одного источника. Дизайнер поменял токен — разработчик получает обновление, а не переделывает руками и не сверяет пиксели на глаз.
Это решает старую боль любой команды: расхождение между тем, что нарисовано, и тем, что закодировано. Когда у дизайна и разработки один источник истины, спор «в макете было не так» просто исчезает. Для бизнеса это значит меньше переделок и меньше времени, которое команда тратит на сверку вместо работы.
Здравый смысл важнее моды на дизайн-системы. Ориентир такой.
Лендингу или промосайту на пять экранов дизайн-система не нужна — это стрельба из пушки по воробьям, потеря денег и времени. Простому продукту достаточно аккуратного UI Kit. А вот когда продукт растёт, в нём прибавляется сценариев и экранов, подключаются новые команды или появляется второй и третий бренд — тогда система перестаёт быть роскошью и становится тем, без чего масштабирование превращается в хаос. Правильный момент — не «когда модно», а когда без системы поддерживать единообразие стало дороже, чем её собрать.
Лучше всего ценность системы видна там, где брендов несколько. Для аптечной сети «Ригла» мы запускали мобильные приложения сразу под несколько марок: «Ригла», «Будь здоров», «Живика» и другие. У каждой свой облик, но в основе — единая дизайн-система и общая база компонентов.
Без такой системы это были бы шесть несогласованных проектов с шестикратным дублированием работы. С ней, по данным кейса Rigla, получилось собрать 6 приложений за 5 месяцев с экономией около 40% по сравнению с разработкой каждого по отдельности, а месячная аудитория экосистемы перевалила за 1,3 млн пользователей. Вот это и есть ответ на вопрос «зачем дизайн-система»: она превращает шесть отдельных строек в одну.
Компоненты без состояний. Нарисовали кнопку в обычном виде, а про наведение, нажатие, загрузку и неактивное состояние забыли. Разработчик додумает их сам, и обычно не так, как надо.
Нет владельца. Если за библиотеку никто не отвечает, она быстро устаревает и обрастает дублями. Система живёт, только пока её ведут.
Оторван от кода. Красивый UI Kit, который существует сам по себе и не связан с разработкой, превращается в музей. Пользу приносит только тот, что синхронизирован с продуктом.
Переусложнили на старте. Строить тяжёлую дизайн-систему для продукта, которого ещё нет, — частый способ сжечь бюджет. Начинать стоит с малого и растить систему по мере роста продукта.
UI Kit — это библиотека переиспользуемых компонентов интерфейса в едином стиле; поправил один компонент — обновилось везде.
Дизайн-система шире: к компонентам добавляются токены, правила, версии и процессы. UI Kit — её видимая часть.
Выгода от них — бизнесовая: скорость сборки, консистентность как доверие, дешёвые изменения и возможность масштабироваться.
Через токены UI Kit становится мостом между дизайном и кодом — один источник истины вместо вечных расхождений.
Лендингу система не нужна; она окупается при росте продукта, нескольких командах или нескольких брендах.
UI Kit и дизайн-система — это не про дизайнерскую аккуратность, а про экономику продукта: насколько быстро и дёшево вы добавляете новое и держите единообразие, когда экранов становятся сотни. Поэтому относиться к ним стоит как к инфраструктуре, а не как к украшению, — но ровно того масштаба, который нужен продукту сегодня.
Владимир Макеев, генеральный директор Surf — компании по разработке и дизайну цифровых продуктов для крупного и среднего бизнеса.
