Тендеры и лиды
Информация
Типичная ситуация: подрядчик сдал корпоративный сайт, довольный заказчик принял и оплатил работу. Через полгода понадобились два новых раздела, и их поручили разработать уже внутренней дизайн-команде. В итоге новый дизайнер рисует страницы с нуля, но совсем не для того, чтобы вписать в отчет больше рабочих часов. У него просто нет ни исходных макетов, ни библиотеки компонентов, из которой можно быстро собрать экран. При этом он неизбежно привносит в макет что-то своё, и новый раздел неуловимо отличается от старых. Результат: потрачено много времени, а итоговые разделы не нравятся заказчику. Можно ли избежать этого? Да, и самый простой способ — использовать атомарный дизайн. В статье расскажем всё об этом подходе и том, где его выгоднее всего применять.
В атомарном дизайне интерфейс любого сайта или цифрового продукта строится из заранее спроектированных элементов разной сложности. Библиотеку создают один раз, дальше из нее собирают любые страницы.
Методологию сформулировал фронтенд-разработчик Брэд Фрост в 2013 году, позаимствовав термины из химии. Вот какие сущности внутри дизайна он описал:
Атомы. Минимальные элементы: цвет, шрифт, кнопка, иконка.
Молекулы. Комбинации атомов. Поле ввода с подписью, кнопка с иконкой.
Организмы. Собранные блоки: карточка товара, шапка сайта, форма обратной связи.
Шаблоны и страницы. Каркасы экранов и финальные макеты с контентом.
Большое собирается из маленького. Карточка новости и карточка товара используют один и тот же компонент, меняется только содержимое. Добавили дату — получили третий вариант, карточку события, и тестировать её заново не придётся.
Когда элементы описаны, у команды появляются два инструмента:
UI-kit — набор готовых интерфейсных компонентов в едином визуальном стиле.
Дизайн-система — свод правил: когда и зачем применять каждый элемент.
Дизайн-команда Uplab начинает с концепции — главная страница и несколько ключевых внутренних. После согласования концепцию разбирают на атомы: типографика, цвета, кнопки, фоны. Из этих мельчайших частиц собирают молекулы и организмы и в точном соответствии с концепцией атомарного дизайна в процессе сборки отсекают лишнее. Этот подход мы применили, например, в дизайне системы сайтов для НЛМК.
Допустим, для личного кабинета нужно 40 новых экранов. Без дизайн-системы каждый проектируют отдельно: макет, верстка, тестирование. А с дизайн-системой дизайнер собирает макет из готовых блоков за часы, а не за дни. Выгода очевидна: для бизнеса время — это деньги; кто первым откликнулся на актуальный инфоповод или выпустил востребованный товар, тот опередил конкурентов. Но есть и другие преимущества.
Масштаб выгоды зависит от проекта, однако закономерности устойчивые:
Скорость. Экраны создаются быстрее, потому что компоненты уже спроектированы, сверстаны и протестированы.
Темп обновлений. Релизы выходят быстрее — преимущество для сервисов, которые развиваются итерациями.
Бюджет. Каждый нестандартный элемент увеличивает стоимость и усложняет поддержку. Больше переиспользования — больше экономия и при запуске, и в обслуживании.
Консистентность. Визуал и логика одинаковы в каждом разделе: кнопки, формы и таблицы ведут себя предсказуемо. Пользователь не путается при переходе между модулями.
Важная оговорка: создание дизайн-системы требует дополнительного времени на старте. Экономия проявляется на этапе масштабирования и доработок. Если проект не планируется развивать — вложения не окупятся. Например, в проекте для компании СИБУР мы заранее знали, что проект будет развиваться, поэтому смело предложили заказчику разработать библиотеку компонентов. В итоге атомарный подход сократил этап дизайна новых разделов с двух недель до трех дней: дизайнер брал элементы из библиотеки, а не рисовал каждый раздел с нуля.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13694 тендера
проведено за восемь лет работы нашего сайта.
Если коротко, то атомарный дизайн оправдан там, где разработка не заканчивается запуском. Опыт экспертов Uplab позволил нам с коллегами выделить такие продукты:
Личные кабинеты и B2B-сервисы. Здесь новые вкладки, роли, сценарии появляются постоянно, и атомарный подход позволяет вводить их с максимальной скоростью. Как это выглядит: одни и те же таблицы и карточки работают в разных модулях; функции и контент страниц для разных ролей различаются, но интерфейсные элементы общие. Сроки доработок предсказуемы, интерфейс остается цельным.
Корпоративные порталы. При запуске обычно доступен базовый функционал, а отчеты, документы и интеграции наращиваются поэтапно. Дизайн-система сохраняет единый стиль, даже если сменилась команда разработчиков. Снижаются затраты на сопровождение и риски при масштабировании.
Контентные сайты. На них обычно есть много страниц одного типа, но с разным наполнением (новости, статьи, анонсы мероприятий). Хороший пример это медиаресурс «Богослов», где команда Uplab спроектировала набор универсальных карточек и блоков. С атомарным подходом новые типы контента запускаются без отрисовки с нуля, а объем материалов растет без деградации интерфейса.
Продукты с несколькими типами пользователей. Клиенты, партнеры, сотрудники, администраторы — каждая роль видит свой набор данных и функций. Атомарность сохраняет целостность интерфейса: разные аудитории работают в разных сценариях, но внутри одного визуального языка.
Проекты с горизонтом от трех лет. Если планируются регулярные доработки, инвестиции в дизайн-систему отбиваются на первых обновлениях после запуска.
Для промо-лендингов, разовых акций или сайтов-визиток без планов на развитие создавать UI-kit нецелесообразно. Здесь время, затраченное на проектирование системы, не окупится.
Часто задаваемый вопрос от наших заказчиков: раз все собрано из одних компонентов — не будет ли сайт выглядеть однообразно?
Отвечаю: нет, если элементы спроектированы гибко. Одна карточка может содержать фото или иконку, включать или не включать кнопку, отображать статус, дату, дополнительное описание. Из одного организма собираются десятки визуальных вариаций.
Главный источник разнообразия — сценарии, а не внешнее оформление. Каталог, личный кабинет, раздел аналитики состоят из тех же элементов, но решают разные задачи. Страница для менеджера по продажам показывает воронку и конверсию. Та же страница для логиста — статусы отгрузок и сроки доставки. Компоненты одинаковые, а пользовательский опыт кардинально отличается.
Команда Uplab формулирует это принципом «одинаковое, но разное»: при едином визуале разнообразие создается функцией и содержанием. Если контент проработан, ощущения конвейера не возникает.
Если проект предполагает развитие после запуска, несколько вопросов помогут оценить зрелость команды и её способности создать качественную дизайн-систему для быстрого и легкого масштабирования проекта. Вот что нужно обязательно спросить на брифе:
Работает ли подрядчик с дизайн-системами? Попросите показать UI-kit одного из завершенных проектов.
Есть ли документация к компонентам? Без нее дизайн-система превращается в набор картинок, с которым сложно работать другой команде.
Как устроен процесс: дизайн-концепция создается до разбора на компоненты или сразу собирают библиотеку? Второй вариант обычно дает результат хуже.
Передают ли дизайн-систему заказчику после сдачи? Правильный ответ «да» (иначе смена подрядчика обойдется вам дорого).
Сколько стоит добавить новый раздел после запуска? Ответ покажет, насколько система рассчитана на масштабирование.
Атомарный подход не заменяет качественное проектирование — он делает результат масштабируемым, то есть помогает проекту расти, не упираясь в потолок возможностей команды или подрядчика. Вот почему это инвестиция в долгосрочную эффективность цифрового продукта.
