Реальный кейс для выдуманной компании

Компания KOS — это маска. Под ней мы спрятали реальную компанию, название которой не можем раскрыть. Но на ее примере покажем, как смогли всего за 2 недели сократить расходы заказчика на разработку и сделать дизайн его сайта аккуратным и адаптивным. Для этого мы разработали дизайн-систему.

Что такое дизайн-система

Дизайн-система — это правила, которые мы установили для сайта, чтобы сделать дизайн однородным и узнаваемым. Это не набор картинок и шрифтов, а те законы, которым они подчиняются. Самой правильной формулой дизайн-системы будет такая:

Что было до нас

У KOS активный маркетинговый отдел. Он часто придумывает акции, проводит распродажи и рассказывает о новых продуктах в их основной линейке. Под каждую активность на сайте создают страницу.
Компания KOS представляет в России мировой бренд. С их российским сайтом работает несколько команд дизайна.
Каждая команда, включая нашу, верстает новые страницы по-своему. Это требует времени и усилий как со стороны исполнителей, так и со стороны KOS — сложно следить за единством дизайна.

Что было не так

В верстке использовали разные цвета.
Для каждой страницы разрабатывали уникальный дизайн.
Каждый элемент дизайна создавали с нуля под новую задачу.
Использовали разные отступы и шрифты.

Все команды дизайна работали по-своему и не согласовывали действия друг с другом. А менеджеры заказчика не могли контролировать их работу — каждый опирался на свой вкус.

UI-kit необходим большим проектам. Это инструмент, который помогает быстро и качественно создавать новые страницы и перерабатывать старые, используя выбранные и согласованные компоненты. UI-kit незаменимый в работе документ, к которому обращаются UI-дизайнеры, Backend- и Frontend-разработчики на любом этапе проекта.

Дарья Семенова

Руководитель проекта

Какие задачи мы сформулировали

Сократить время на разработку страницы.
Сделать дизайн сайта единым.
Дать возможность маркетологам менять сайт столько раз, сколько это необходимо.

Что придумали

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

Поэтому мы предложили сразу два решения:

— UI-кит.

— Конструктор лендингов.

Другими словами, мы предложили разработать дизайн-систему.

Почему это хорошо

Сайт KOS был неоднородным, наш дизайн не дружил с дизайном коллег из других команд, а каждая страница съедала много времени у разработки.

UI-кит и конструктор решали наши проблемы.

Почему это хорошо для KOS

Наша идея позволяла:

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

Заказчик согласился попробовать. А вскоре взял нашу дизайн-систему за основу для всего сайта. UI-кит и конструктор стали использовать не только мы, но и остальные команды проекта.

UI-кит

Первую версию UI-кита мы собрали за неделю. Но на этом работа не остановилась. Новые элементы мы добавляем до сих пор.

Что в нем

Цвета и их назначение.
Разные варианты логотипа.
Шрифты.
Отступы.
Элементы верстки: кнопки, пагинации, поля ввода и т. д.
Блоки для лендингов.

Конструктор

Конструктор лендингов — это второй важный элемент дизайн-системы. Он определяет правила использования элементов из UI-кита.

За основу взяли сервис «Сайты 24» от Bitrix. Мы кастомизировали его под наши задачи.

Это решение помогло нам добавить в UI-кит уже сверстанные блоки, которые можно было добавлять на страницу моментально.

Какие блоки разработали

👉️ Похожие проекты с UI-китами:

Mycar.kz
MKB

Основные блоки.
Компоненты.
Промоблоки.
Блоки для главной страницы.
Списки.
Описания.
Блоки для лояльности.
Инфоблоки.

Возможности конструктора

Каждый блок можно переделывать под конкретную задачу без разработчиков и дизайнеров.

Редактировать блоки легко: можно выбрать стиль заголовка, цвет подложки, вид подзаголовка. Если блок с карточками, то появится подсказка с размерами и форматом картинок. Готовый блок можно посмотреть перед публикацией или показать заказчику. Внести правки — 5 минут. Контентщик сам общается с заказчиком.

Как кастомизировали «Сайты 24»

Весь Backend был на Bitrix. Это снимало с нас часть нагрузки. Там, где требовалась доработка, использовали PHP-фреймворк Symfony.

Во фронтовой части использовали Vue.js, чтобы сделать все переходы на сайте «бесшовными».

Чтобы Bitrix и Vue.js работали вместе, нам пришлось придумать, как их интегрировать.

Плюсы технического решения

После каждого клика на странице не нужно ждать перезагрузки.
Backend и Frontend можно разрабатывать параллельно.
Разработчики не решают рутинные задачи по верстке новых страниц.
Заказчик не ждет релиза, чтобы добавить страницу или внести правки.

Мне лично проект интересен тем, что мы интегрировали Vue.js в Bitrix. Сама идеология Bitrix не подразумевает, что «фронт» и «бэк» работают отдельно. В итоге у нас хороший Sales-движок с CMS для продаж от Bitrix. И прогрессивное, технологичное решение во фронтовой части.

Александр Шутай

Тимлид проекта

Что KOS получили в итоге

Сверстать новую страницу можно за день. Раньше на это уходил месяц.
Новые блоки на сайте создает контент-менеджер, а не разработчик. Это дешевле в 1,5 раза.
Все дизайн-команды на проекте работают по одним законам, используют одинаковые блоки и цвета.
Дизайн не зависит от кадровых перемен в KUKU, новый менеджер быстро включается в работу.
У команды появилось намного больше времени на стратегическое развитие проекта, раньше оно уходило на верстку и рутинные задачи.

Над проектом работали

Команда AGIMA

Марина Дорохова

Ведущий системный аналитик
Константин Кислейко

Руководитель отдела дизайна
Анна Романова

Проектировщик
Дмитрий Кожевников

Арт-директор
Дмитрий Подлужный

Руководитель направления проектирования интерфейсов
Наталья Шарова

Дизайнер
Валерий Передистый

Проектировщик
Алёна Лагойкина

Дизайнер

Дизайн-система для компании KOS