Design system for KOS company

Превью проекта

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

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

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

Превью проекта

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

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

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

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

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

На этом проекте у нас есть рутинные задачи. Например, маркетологи рисуют лендинги, а нам надо их верстать. Это долго. Сверстаешь, а маркетинг передумает — и надо всё начинать сначала. Нам надоело верстать одни и те же компоненты, забывая, что они у нас уже где-то используются. И мы подумали, что было бы хорошо сделать UI-кит.

Фотография

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

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

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

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

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

Картинка

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


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


— 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

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

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

  • Константин Кислейко

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

  • Анна Романова

    Проектировщик

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

    Арт-директор

  • Дмитрий Подлужный

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

  • Наталья Шарова

    Дизайнер

  • Валерий Передистый

    Проектировщик

  • Алёна Лагойкина

    Дизайнер

Do you like it? Share it on social networks

Get in touch

Would you like to say hello or find out more information?

Let's talk
+7 495 981-01-85 + Become a customer
Services Cases