«ДоксВижн» – разработчик low-code платформы для создания индивидуальных решений по управлению процессами и данными для крупного бизнеса и госкомпаний.

Среди 1500 клиентов – Сбербанк РФ, СУЭК, предприятия «Роснефти», крупнейшие Министерства, Правительства и Администрации городов.
Разработать бренд-систему, которая позволит компании масштабироваться без потери узнаваемости.
цель
docsvision
Клиент
Отстройка от конкурентов при ограниченном бюджете
Адаптация визуального ключа под новый слоган компании
Масштабируемость айдентики для разных носителей
Анализ рынка и усиление ключевой метафоры бренда — акцент на помощи бизнесу
Вместо полного ребрендинга — эволюция и усиление текущего, с сохранением важных для компании правил
Модульная система элементов, которые адаптируются под сайт, соцсети и рекламные материалы
задача
решение
01
02
03
Бренд-система
Разработка айдентики велась поэтапно, с учетом как бизнес-задач, так и установленных заказчиком рамок.
Цвет задаёт настроение, влияет на восприятие бренда и делает пользовательский опыт приятнее. Главным требованием заказчика было оставить текущий логотип компании и его палитру, но найти новые оттенки.
Для ребрендинга компания выбрала слоган «Управление по вашим правилам». Его цель показать важность клиента и его бизнеса. Новая айдентика должна визуализировать и усиливать его.
В айдентике компании не было каких либо визуальных правил, 
но общий стиль был достаточно линейным и плоским, 
что конфликтовало с новым слоганом.
Иллюстрации должны представлять новые продукты и услуги, поэтому важно не переигрывать с красотой и подачей и не уходить в метафоры, чтобы не исказить самое главное — смысл.
Важно предугадать то, как объект будет вести себя в трёхмерной среде на уже готовой двухмерной картинке. Всё для того, чтобы избежать лишней мультяшности.
Объекты становятся тактильными и живут в digital-среде, а у зрителя создаётся ощущение, будто их можно потрогать.

Это помогает передать суть слогана «Управление по вашим правилам».
Не смотря на наличие дополнительных цветов компания использовала в дизайне только два основных цвета.
Для этих задач необходимо разработать фирменные иллюстрации, что бы исключить использование стоковых ресурсов, построить ассоциативную связь с брендом и выделиться от конкурентов.
Новая палитра поддерживает современный и технологичный образ платформы, а также подчеркивает легкость взаимодействия с платформой.
первый этап
свет и цвет
концепция
Какой смысл
Иллюстрации
результат
[+]
low-code
docsvision
Старая палитра
У компании много продуктов и услуг, регулярная информационная поддержка, вебинары, презентации, внешние и внутренние мероприятия.
Новая палитра
Айдентика
На сайте компании перегруженный и одновременно недогруженный визуальный ключ. Перегруженный с точки зрения чистоты дизайна, при этом недостаточно удобный с точки зрения UХ. 
Сформирован целостный дизайн корпоративного сайта, который объединяет сложную продуктовую экосистему Docsvision в понятный и последовательный пользовательский опыт.
Никто лучше заказчика не знает, что ему нужно получить в итоге. Поэтому всю внутреннюю логику мы прорабатывали вместе, развивали то что помогает клиентам и вырезали не нужное.
Все экраны объединены общей дизайн-системой:


  • светло-серый фон формирует спокойную нейтральную среду;

  • белые карточки отделяют смысловые блоки без лишних рамок;

  • зелёный поддерживает айдентику Docsvision и выделяет преимущества, показатели и основные действия;

  • голубой используется для ссылок, информационных акцентов и технологических характеристик;

  • фиолетовый закреплён за глобальной конверсионной кнопкой демоверсии;

  • графитовые блоки создают контраст и помогают выделять наиболее важные предложения;

  • скруглённые углы делают сложный корпоративный продукт визуально дружелюбнее.
Сначала обсуждение с клиентом, затем дизайн и передача технического задания разработчику. Цикл продолжался раз за разом, пока все нужные страницы не были готовы. Он продолжается и сейчас: в ходе эксплуатации становится понятно, какие разделы еще нужно добавить, а какие со временем оказываются не нужными.
второй этап
подход
Структура сайта учитывает разные уровни готовности аудитории.
Пользователь может:


  1. познакомиться с платформой и её решениями;
  2. изучить преимущества и технические возможности;
  3. увидеть подтверждение масштаба через цифры и кейсы;
  4. сравнить редакции и стоимость;
  5. подобрать услугу или учебную программу;
  6. зарегистрироваться на мероприятие;
  7. запросить расчёт, консультацию или демоверсию.
Пользовательский сценарий
Каждый макет был создан в четырёх брейкпоинтах, отрисованы все состояния каждого интерактивного элемента.
адаптивный дизайн
результат
На сайте компании перегруженный и одновременно недогруженный визуальный ключ. Перегруженный с точки зрения чистоты дизайна, при этом недостаточно удобный с точки зрения UХ
1180
техническое задание
940
620
300
веб-сайт
Корпоративный буклет — это, концентрат информации о бизнесе, упакованный в удобный физический (или электронный) формат.
Ограниченный объем страницы заставляет бизнес выделять только самую суть. Сложные услуги разбиваются на понятные блоки, инфографику и тезисы, чтобы клиент мог за пару минут уловить главную ценность для его бизнеса.
буклет о компании
для чего
Единые визуальные принципы сохраняют узнаваемость бренда, при этом легко адаптируются под разные задачи и носители.
результат
Масштабируемая бренд-система позволяет уверенно применять айдентику во всех форматах коммуникации — от рекламных баннеров для соцсетей до буклетов и презентаций.
третий этап
Адаптивность
Правильно спроектированная карусель превращает сложный кейс в понятную визуальную историю: от контекста и процесса внедрения — к измеримым результатам и отзыву клиента.
Большинство сотрудников ведут медийную активность от лица компании, статьи на медиа ресурсах, курсы и вебинары. В рамках формирования единого визуального стиля и бренда работодателя была проведена корпоративная фотосессия.
Сэлфи из отпуска, фотографии с котами или обрезанные кадры с вечеринок в рабочей почте создают несерьезное впечатление. Так же при удаленном формате работы сотрудники часто не знают, как выглядят их коллеги из других отделов. Наличие качественных фотографий во внутренней базе данных помогает быстрее находить нужных людей и делает коммуникацию более личной и комфортной.
карусель
Корпоративная 
фотосессия
для чего
Fujifilm XS10

50mm F2.8
ISO 320
SS 125

2 источника света
5500 K

4:5
сетка по третям
Made on
Tilda