UI-kit: правила, по которым экраны собираются без нас
Единственный формат направления, где новых макетов на выходе может не быть вовсе. Предмет здесь — правила: сетка и отступы, шрифтовая шкала, цветовые токены, компоненты со всеми состояниями и именование, совпадающее с кодом. Приходят сюда не с идеей нового продукта, а с живым: он работает, экранов много, и каждый следующий почему-то выглядит немного иначе предыдущего. Поэтому работа начинается с инвентаризации того, что уже нарисовано, — и довольно часто заканчивается тем, что рисовать заново ничего не нужно.
- Сначала опись того, что есть: обычно вариантов одной кнопки больше, чем кажется
- Имена в наборе совпадают с именами в коде — иначе набор разойдётся с продуктом
- Проверка одна: следующий экран собирает ваш человек и не зовёт нас
Читается снизу вверх. Чем ниже уровень, тем реже он меняется: токены живут годами, компоненты — сезонами, шаблоны переделывают по мере роста продукта. Набор, собранный в обратном порядке — от красивых экранов вниз, — разваливается на первом же непредусмотренном случае.
Как устроен набор: четыре уровня
Этот блок для того, кто в вашей команде отвечает за продукт и за код. Если такого человека нет, набор, скорее всего, не окупится: он живёт не в презентации, а в ежедневной работе — и ровно поэтому мы о нём спрашиваем в первую очередь.
-
01
Токены
Самый нижний уровень и самый долгоживущий: цвета, отступы, размеры шрифта, скругления, тени. Они не «оформление», а словарь значений, на который ссылается всё остальное. Поменяли значение в одном месте — изменилось везде, включая экраны, которых ещё нет.
-
02
Компоненты и их состояния
Кнопка, поле, выпадающий список, карточка, таблица, уведомление. Каждый — со всеми состояниями: обычное, наведение, фокус, нажатие, отключено, ошибка, загрузка. Именно состояния отличают набор от красивой библиотеки картинок: без них разработчик придумывает их сам.
-
03
Шаблоны страниц
Типовые раскладки, собранные из компонентов: список, карточка объекта, форма, настройки, пустое состояние. Новый экран после этого собирается не рисованием, а выбором шаблона и подстановкой содержимого — обычно это час работы вместо дня.
-
04
Связь с кодом
Имена компонентов и токенов в макете совпадают с именами в коде. Звучит как внутренняя кухня, а следствие простое: разработчик и дизайнер говорят об одном и том же одними словами, и правка «поменяйте отступ в карточке» не превращается в поиск, о какой карточке речь.
Набор без связи с кодом расходится с продуктом за квартал. Дизайнер правит библиотеку, разработчик правит код, синхронизировать их некому — и через три месяца макеты показывают одно, а продукт выглядит иначе. Поэтому мы согласуем именование с вашим разработчиком до сборки, а не после: это полчаса разговора, который экономит квартал расхождений.
Что входит в набор
Шесть частей. Состав согласуется по итогам инвентаризации: если у вас уже есть шкала отступов и она соблюдается, мы её опишем, а не придумаем новую. Ломать работающее ради красивой системы — самый дорогой способ потратить бюджет.
Не «дизайнерская придирка», а способ не спорить: расстояния берутся из короткого списка значений, и одинаковые вещи выглядят одинаково на всех экранах. Заодно это снимает половину правок вида «тут пусто, а тут тесно».
Ограниченный набор размеров и начертаний с назначением: заголовок раздела, подзаголовок, основной текст, подпись. Без шкалы в продукте заводится десяток размеров, отличающихся на пару пунктов, и ни один не выглядит намеренным.
Цвета описываются назначением, а не оттенком: «фон карточки», «текст второстепенный», «граница ошибки». Тогда тёмная тема получается переопределением значений, а не вторым комплектом макетов, — и это самый заметный выигрыш набора.
Их семь на каждый компонент, от обычного вида до ошибки и ожидания ответа. Состояния — половина ценности набора: их забывают и в макетах, и в коде, а человек встречает их ровно тогда, когда что-то пошло не так.
Одна толщина линий, одна сетка, одни правила экспорта. Смешанные иконки из трёх разных библиотек — самая заметная снаружи примета продукта, который собирали по частям, и чинится она быстрее остального.
Список, карточка, форма, настройки, пустое состояние, ошибка. Из них собирается новый экран без дизайнера — и это единственная проверка, по которой видно, что набор получился: ваш человек делает экран сам и не зовёт нас.
Семь проверок: насколько разошёлся ваш продукт
Откройте свои макеты или сам продукт и пройдите список. Отмечайте то, что у вас в порядке. Проверки устроены так, что ответ на них знает не дизайнер, а тот, кто добавляет новые экраны, — спросите его.
Вердикт появится после первой отметки. Считается он от числа непройденных строк и обычно показывает не «всё плохо», а на какой стадии расхождения вы находитесь — от этого зависит объём работы.
В порядке 0 из 7
Если сошлось шесть-семь пунктов, набор у вас фактически есть — не назван и не описан. Тогда работа короче и дешевле: мы описываем существующее и собираем из него библиотеку, вместо того чтобы вводить новые правила. Так мы и говорим на разборе.
Прислать макеты на разбор
Не сошлась половина проверок?Пришлите ссылку на макеты или на продукт — посчитаем варианты кнопок, оттенки серого и размеры шрифта своими глазами. Скажем, набор собирается из существующего или придётся вводить новые правила: это разный объём и разные деньги.
Прислать в Telegram Выделенная командаЧто после сдачи сможет каждый — без нас
Набор существует не для дизайнеров, а для того, чтобы продукт рос без дизайнера. Поэтому приёмку мы предлагаем проводить не показом библиотеки, а тремя задачами: пусть каждый из ваших людей сделает своё и скажет, хватило ли ему набора.
- Берёт шаблон, подставляет содержимое и получает экран, неотличимый по оформлению от остальных
- Не выбирает цвет и отступ заново: значения берутся из токенов и подписаны назначением
- Видит, какие состояния обязательны у каждого компонента, и не забывает ошибку и загрузку
Проверка на приёмке: попросите нарисовать экран, которого в проекте не было. Если пришлось придумывать новый компонент — набор неполный, и мы это дорабатываем.
- Имена компонентов и токенов совпадают с теми, что у него в коде
- Поведение и состояния описаны текстом рядом с макетом, а не подразумеваются
- Тёмная тема получается переопределением значений, а не вторым комплектом экранов
Проверка: покажите набор разработчику до оплаты остатка работ. Если у него появляются уточняющие вопросы, значит, мы описали плохо, и переписать — наша работа.
- Знает, какие блоки можно ставить и в каком порядке они работают
- Понимает, что будет с блоком при длинном заголовке и при отсутствующей картинке
- Не зовёт дизайнера ради страницы, собранной из уже существующего
Этот пункт касается не всех продуктов: если содержимое добавляют только разработчики, вкладку можно пропустить, и часть документа мы тогда не пишем.
Сколько стоит: от 140 000 ₽, срок 5–7 недель
Своей цены у формата нет: набор считается по второй смете направления. Но устроен он иначе, чем остальные работы на этой ступени: рисования здесь почти нет, и объём зависит от числа компонентов и состояний, а не от числа экранов. Поэтому смету мы называем после инвентаризации — она делается на разборе и бесплатно.
- Инвентаризация: опись того, что уже нарисовано, с подсчётом расхождений
- Токены, сетка и типографская шкала — описанные, а не придуманные заново
- Компоненты со всеми состояниями и вариантами в одной библиотеке
- Тёмная тема переопределением значений, если она нужна продукту
- Шаблоны типовых страниц и документ правил на понятном языке
- Согласование именования с вашим разработчиком и ответы на его вопросы
- Внедрение набора в код: это работа разработки, и делает её ваша команда или наша отдельной сметой
- Рисование новых экранов продукта — это дизайн сайта или приложения, набор их только ускоряет
- Фирменный стиль: знак, палитра бренда и носители — третья смета и другой предмет
- Поддержка набора после сдачи: новые компоненты и правки по часам — 3 000 ₽ вне договора и 2 000 ₽ в абонементе
- Иллюстрации и фирменная графика — отдельная работа и другие исполнители
Если инвентаризация покажет, что правила у вас де-факто соблюдаются и не хватает только описания, работа окажется короче — и мы скажем это до счёта, а не после. Продавать полный набор там, где нужно описать существующее, невыгодно нам самим: такой набор не приживётся, потому что заменит то, к чему люди привыкли.
Почему продукт расползается за полгода
Это происходит без чьей-либо вины и почти всегда одинаково. Полезно знать механику: она объясняет, почему набор дешевле вводить до расхождения, а не после, и почему «просто будем аккуратнее» не работает.
Три шага, и каждый из них по отдельности выглядит разумным.
- новый экран копируется с ближайшего Так быстрее, и это правильное решение: зачем рисовать с нуля, если похожий экран есть. Вместе с раскладкой копируются его случайные особенности — отступ, подобранный на глаз, кнопка чуть другого размера, свой оттенок серого
- копия приносит свои отличия На новом экране что-то не помещается, и его немного поправили. Потом с него скопировали следующий. Через десяток экранов в продукте живут несколько размеров кнопки, россыпь оттенков серого и три разных способа показать ошибку — и каждый появился обоснованно
- восстанавливать дороже, чем заложить В какой-то момент расхождение становится заметным снаружи, и его идут чинить. Но теперь это не «ввести правила», а «пересобрать сорок экранов по новым правилам» — и половину из них ещё и переписать в коде. Поэтому набор дешевле всего вводить тогда, когда экранов немного, но их уже больше десятка
Отсюда и наш способ работы: сначала инвентаризация, потом описание существующего и только в последнюю очередь новые решения. Набор, который отменяет привычки команды, не приживается — люди возвращаются к тому, как делали раньше, и через квартал у продукта появляется вторая система вместо одной.
Семь слов, которыми это обсуждается
Словарь нужен для разговора с подрядчиком и со своей командой: в этой теме одно и то же называют по-разному, и половина недопонимания возникает на словах, а не по существу.
Последняя строка — самая важная при выборе подрядчика. Продать «дизайн-систему» и отдать набор картинок технически возможно; разница обнаружится через квартал, когда добавлять в набор будет некому и незачем. Поэтому мы спрашиваем про ответственного до начала работы.
Эта страница — один из девяти форматов дизайна
На родительской странице — общее: три сметы, состав работ, гарантии, исходники и тест «дизайн отдельной строкой или разработка целиком». Здесь только про набор компонентов: когда его берут отдельно и почему это дешевле нового дизайна.
Когда набор заказывают вместе с дизайном сайта или приложения, отдельной сметы не нужно: во второй ступени он уже входит в работу. Этот формат — для случая, когда экраны есть, а правил нет. Дизайн сайтов и интерфейсов
Когда набор компонентов вам не нужен
Четыре случая, и два из них — про время: набор бывает не только лишним, но и преждевременным. Закрепить правила раньше, чем продукт нашёл форму, — способ потратить деньги дважды.
-
Если экран один или их несколько
На одной странице набор не окупается, и мы его не навязываем: правила нужны там, где экраны повторяются и их добавляют. Для одной страницы достаточно первой сметы направления — дизайна лендинга, и там всё необходимое уже есть внутри макета.
-
Если продукт меняется каждую неделю
На ранней стадии интерфейс переделывают вслед за гипотезами, и это нормально. Набор в такой момент закрепляет черновик: правила устаревают быстрее, чем их успевают применить. Разумнее вернуться к разговору, когда основные экраны перестанут переписываться каждый спринт.
-
Если вести набор будет некому
Библиотека без ответственного устаревает за квартал: продукт идёт дальше, набор остаётся на месте, и команда возвращается к копированию экранов. Мы спрашиваем про человека до начала работы. Если его нет, честнее сделать меньше — описать правила и отдать документ, а не собирать библиотеку, которую никто не будет обновлять.
-
Если вам нужен фирменный стиль, а не набор
Набор отвечает за то, чтобы экраны собирались одинаково. За то, чтобы вас узнавали на вывеске, в документе и в соцсети, отвечает фирменный стиль — другой предмет, другие носители и третья смета. Эти работы дополняют друг друга, но не заменяют.
Во всех четырёх случаях мы называем, что делать вместоПубличный список ситуаций, в которых студия отговаривает, собран на отдельной странице по всем направлениям сразу.
Когда вам это не нужноЧто рядом и чем оно отличается
Набор почти всегда соседствует с другой работой: либо экраны ещё надо нарисовать, либо надо внедрить набор в код, либо речь вообще про узнаваемость бренда, а не про интерфейс.
Нижние границы всех направлений собраны на странице цен. Если не уверены, что вам нужно — набор, новые экраны или человек в команду, — на разборе посчитаем: обычно ответ виден по тому, сколько экранов добавляется в месяц.
UI-kit и дизайн-система: что стоит знать до заказа
Чем UI-kit отличается от дизайн-системы
UI-kit — это библиотека: токены, компоненты, состояния, шаблоны. Её можно собрать за несколько недель, передать и забыть. Дизайн-система — это та же библиотека плюс правила её жизни: кто добавляет новое, как принимается решение, что делать, когда продукту нужен компонент, которого нет. Разница обнаруживается не на сдаче, а через квартал.
Практический вывод для выбора подрядчика: спрашивайте не про состав, а про то, кто будет вести набор после сдачи. Если ответа нет ни у вас, ни у исполнителя, честнее купить библиотеку и документ правил, а слово «система» не использовать — оно подразумевает процесс, которого не будет.
Мы делаем набор и описываем правила; ведёт его дальше ваша команда. Если вести некому, мы говорим об этом на разборе и предлагаем сделать меньше — описать существующее и отдать документ. Продавать библиотеку, которая устареет за квартал, невыгодно обеим сторонам.
Почему работа начинается с инвентаризации
Приходят сюда с живым продуктом. У него уже есть цвета, отступы и кнопки — просто не описанные и потому расходящиеся. Начинать с чистого листа означает отменить привычки команды: новые правила придётся не только выучить, но и применить к сорока существующим экранам. Так набор не приживается: люди возвращаются к тому, как делали раньше.
Поэтому первый этап — опись. Мы собираем всё, что нарисовано, и считаем: сколько оттенков серого, сколько размеров кнопки, сколько способов показать ошибку. Обычно выясняется, что правила де-факто существуют и в основном соблюдаются, а расхождения сосредоточены в двух-трёх местах. Тогда работа сводится к описанию и приведению в порядок, а не к новой системе.
Иногда инвентаризация показывает обратное: экранов мало, а различий много, и общего правила не существует вовсе. Это тоже нормальный ответ, и он меняет объём работы — о чём мы говорим до сметы, а не в середине проекта.
Как понять, что набор получился
Проверка одна, и она не про красоту: ваш человек собирает новый экран сам и не зовёт дизайнера. Если получилось — набор работает. Если пришлось придумывать компонент, которого нет, значит, набор неполон, и это наша недоработка, а не ваша ошибка в постановке задачи.
Вторая проверка — для разработчика: он читает макет и не задаёт уточняющих вопросов, потому что имена совпадают с теми, что у него в коде, а состояния описаны текстом. Третья — для тёмной темы, если она нужна: она получается переопределением значений, а не вторым комплектом макетов.
Если экраны ещё предстоит нарисовать, набор не заказывают отдельно: во второй смете направления он входит в дизайн сайта или приложения. Этот формат существует ровно для одного случая — когда экраны уже есть, а правил нет. Остальные форматы и три сметы описаны на странице дизайна
Вопросы про набор компонентов
Шесть вопросов, которые задают именно про набор. Общие — про договор, оплату и гарантии — собраны на отдельной странице, а про дизайн вообще написано на странице направления
Остался вопрос?
Написать в Telegram, отвечаем за 30 минутНабор — это библиотека: токены, компоненты, состояния, шаблоны. Системой она становится, когда есть человек, который её ведёт, и договорённость, как добавлять новое. Мы делаем библиотеку и пишем правила; вести её дальше должна ваша команда. Если вести некому, честнее сделать меньше — описать существующее и отдать документ, а не собирать то, что устареет за квартал.
Набор считается по второй смете направления — от 140 000 ₽, срок 5–7 недель, — но устроен иначе, чем остальные работы этой ступени: рисования почти нет, и считается работа по числу компонентов и их состояний. Поэтому смету называем после инвентаризации: она делается на бесплатном разборе и часто показывает, что работы меньше, чем ожидалось.
Можем, но это другая работа: дизайн сайта или приложения. Смысл набора в том, что новые экраны после него собирает ваш человек — и собирает быстро. Если экраны всё равно будем рисовать мы и их много, разумнее заказывать дизайн сразу со второй сметой: набор там входит в работу и отдельно не считается.
В этом формате — нет: мы отдаём библиотеку, документ правил и согласованное именование. Внедрение — работа разработки, и делает её ваша команда либо наша отдельной сметой. Но именование мы согласуем с вашим разработчиком до сборки: полчаса разговора здесь экономят квартал расхождений между макетами и кодом.
Если она нужна продукту — да, и это один из самых заметных выигрышей набора. Когда цвета описаны назначением, а не оттенком, тёмная тема получается переопределением значений, а не вторым комплектом макетов. Без набора её приходится рисовать вручную на каждом экране, и обычно на третьем десятке это бросают. Скажите на разборе, нужна ли тема: от этого зависит, как собираются токены.
Вы — и мы делаем всё, чтобы это было возможно: библиотека лежит на вашем аккаунте с правами редактирования, правила написаны на понятном языке, именование согласовано с разработчиком. Если нужна наша помощь, новые компоненты и правки считаются по часам: 3 000 ₽ вне договора и 2 000 ₽ в абонементе. Набор, за каждым изменением которого надо идти к подрядчику, перестают обновлять на второй месяц.
Пришлите макеты — посчитаем, насколько всё разошлось
- Полчаса: открываем вашу библиотеку и считаем расхождения своими глазами
- Скажем, собирается ли набор из существующего или придётся вводить новые правила
- Если возьмёмся — от 140 000 ₽, срок 5–7 недель, библиотека на вашем аккаунте
Заявка принята
Посмотрим макеты своими глазами и вернёмся в течение рабочего дня. Если срочно — напишите в Telegram.
Или напишите сразу:
Telegram · отвечаем лично за 30 минут