Как Addamant выделиться среди синих IT-сайтов — не меняя бренд

Разбор рынка, три шага к узнаваемому стилю и готовый прототип страницы «Услуги»

Дизайнер — Валентина Утюганова

Сайт выглядит как у десятков IT-компаний. Это исправляется без смены бренда.

Проблема

Наш синий и типовая вёрстка — как у Umbrella IT, Uplab, Notamedia. Нас не запоминают.

Решение

Меняем подачу, а не бренд: стеклянные иконки, тёмные блоки, стекло и свет.

Результат

Сайт выглядит дороже и узнаваемее, отличается от конкурентов с первого экрана.

Решить сегодня

Утвердить подход и начать с ключевых страниц. Страница «Услуги» уже готова.

13лет на рынке
750+проектов
~96страниц на сайте
10–14недель на всё

Страница «Услуги». Сейчас и в прототипе.

Открыть прототип
Сейчас: страница «Услуги» на addamant.ru
Прототип: новая страница «Услуги»

Сейчас

Прототип

Один синий на всех. Клиент нас просто не различает.

Addamant#3E74ED
Umbrella IT#0050FF
Notamediaсиний → зелёный
Uplabчёрный + мятный
Onlyчёрный + неон
Antroтёмный + коралл

Что видит клиент

Синий, белый фон, типовые блоки. Сайты похожи — выбор делается не в нашу пользу.

Что свободно на рынке

Живой фирменный знак, тёмная премиальная подача, стекло и свет. Неон Only и Antro не берём — он отпугивает средний бизнес.

Цвет, логотип и шрифт остаются. Никаких рисков для бренда.

Сохраняем

#18233A
#3E74ED
#D8E3FB
#8E939E
#FFFFFF

Manrope, логотип со звёздочкой, готовые 3D-формы по услугам, UI-кит сайта. Редизайн не с нуля.

Исправляем

  • Сине-белая подача «как у всех»
  • Эмодзи и разнобой иконок
  • Плоские светлые блоки без глубины
  • Интерфейс не откликается на действия

Три шага к узнаваемому стилю. Форма, глубина, свет.

Шаг 1 — форма

Фирменные иконки и отклик

Убираем эмодзи. Наши иконки — матовые, стеклянные, премиальные; интерфейс мягко отвечает на наведение и нажатие.

Шаг 2 — глубина

Тёмные премиальные блоки

Тот же синий в тёмной оправе выглядит дороже и отличается от конкурентов.

Шаг 3 — свет

Стекло и мягкое свечение

Карточки как матовое стекло и свет фирменного синего — современный, «дорогой» финиш.

Форма и текстура стекла у иконок — черновой вариант, подбираем.

Что меняется. Те же элементы — другая подача.

Форма

Было
Станет

Эмодзи и плоская плашка → стеклянная карточка с глубиной

Глубина

БылоРешения для бизнеса
СтанетРешения для бизнеса

Тёмный блок с крупным заголовком — на ключевых экранах

Свет

БылоСтатистика
СтанетСтатистика

Матовое стекло, свет следует за курсором

Что уже работает на прототипе. Все три шага на одной странице.

Блок заявки: стеклянные иконки вокруг текста

Форма

Эмодзи убраны, иконки — матовое стекло; кнопки откликаются на наведение; блоки появляются при прокрутке.

Блок «Решения, в которых мы особенно сильны»

Глубина

Тёмные блоки: первый экран, «Полный цикл», «Сильные решения», заявка, подвал. Синий — единственный яркий цвет.

3D-карусель документов из стеклянных карточек

Свет

Единое стекло в слайдере, карусели и карточках; мягкое свечение; плавные переходы между блоками.

Всё вместе — страница «Услуги». Что даёт такая подача.

  • Сайт сам становится кейсом. Клиент видит уровень: «так сделали себе — сделают и нам»
  • Запоминаемся в шорт-листе. Из 3–5 похожих сайтов в памяти остаётся тот, что удивил
  • Дочитывают до заявки. Движение и интерактив удерживают внимание на странице
  • Сложное — просто. Процесс и результат видны, а не спрятаны в абзацах
  • Аргумент для продаж. Ссылку можно отправить клиенту или показать на встрече
Открыть прототип

«Вау» — на ключевых страницах. Аккуратное обновление — на остальных.

Ключевые страницы

Главная, Услуги, 1С-Битрикс, Карьера

Все три шага: тёмные блоки, стекло, анимации. Здесь формируется первое впечатление и решение о заявке.

Остальные страницы

Направления и услуги (~32 стр.), Кейсы, Блог (~48 статей), Контакты, Партнёрство

Шаг 1 и лёгкий шаг 3: стеклянные иконки, отклик кнопок, светлое стекло. Без тяжёлых анимаций.

Разбор сайта по страницам

Сначала ключевые страницы. Потом — по шаблонам.

Этап 1 — сразу

Фундамент

Убираем эмодзи, фирменные стеклянные иконки, единый отклик кнопок и карточек — на всех страницах.

~2–3 недели

Этап 2

Ключевые страницы

Главная, Услуги, 1С-Битрикс, Карьера — в полной новой подаче. Услуги уже готовы в прототипе.

~3–4 недели

Этап 3

Шаблоны

Направления, услуги, кейсы, статьи блога: 4 шаблона закрывают ~80 из ~96 страниц.

~3–4 недели

Этап 4

Остальное

Список кейсов, Контакты, Партнёрство. Параллельно — фотосъёмка и обложки.

~2–3 недели

10–14недель на весь сайт, оценка
~80из ~96 страниц — правкой 4 шаблонов
4ключевые страницы — полная подача

Что получит компания. И как поймём, что сработало.

Польза

  • Отличаемся от конкурентов, не меняя синий
  • Сайт выглядит дороже — без отпугивающей «элитарности»
  • Больше доверия: реальные проекты вместо стоков
  • Экономно: опираемся на готовые формы и UI-кит
  • Первый результат — без большого редизайна

Что измеряем

  • Заявки с сайта
  • Конверсия страницы «Услуги» в заявку
  • Время на странице и глубина просмотра
  • Отказы на первом экране

Как (обсуждаем с отделом маркетинга): берём текущие цифры из Яндекс Метрики за 3 месяца до запуска, ставим цель и сравниваем через 1–2 месяца после каждого этапа.

Что решить сегодня. Четыре шага — и стартуем.

  1. 1

    Утвердить подход: меняем подачу, а не бренд

  2. 2

    Запустить этап 1 на текущем сайте: убрать эмодзи, стеклянные иконки, отклик кнопок

  3. 3

    Взять прототип «Услуги» за основу ключевых страниц

  4. 4

    Запланировать фотосъёмку: живые фото для главной и карьеры, эксперты в статьях и кейсах

QR-код: ссылка на прототип страницы «Услуги»

Прототип на телефоне — по QR-коду

Приложение — рынок

Мы и 7 сильных игроков рынка

Addamant

Веб, моб., 1С, дизайн — лидер региона

+Чистый стиль, готовые формы

−Типовой IT-стиль

Веб, e-commerce — 20+ лет

+Тёплая, редкая гамма

−Ощущение «из 2018»

Веб, Битрикс24 — №10 веб

+Взрослый минимализм

−Шаблон «ч/б + акцент»

Брендинг, digital — №12 веб

+Смелость, премиум

−Барьер для среднего бизнеса

Госпорталы — №1 госсектор

+Яркий логотип

−Градиент устарел

Аутсорс — Top-100

+Инженерная строгость

−Синий как у нас

⚑

E-commerce — Омск, прямой конкурент

+Смелый стиль, свой знак

−«Дорого» для B2B

★

Продуктовый дизайн — №1

+Эталонный премиум

−Вне нашего сегмента

⚑ прямой локальный конкурент — ★ дизайн-бенчмарк — источники: ratingruneta.ru/web, tagline.ru, сайты компаний

Приложение — риски

6 рисков — и что мы с ними делаем

Формы останутся разнобоем

→ Правила применения, перерисовка — отдельной задачей

Тёмные блоки хуже читаются

→ Проверяем контраст, чередуем тёмные и светлые блоки

Перебор со свечением

→ Свет — только акцент, не больше 10–15% площади

Анимация требует ресурса

→ Сначала лёгкие эффекты, сложные — только на ключевых страницах

Нужна фотосъёмка

→ Планируем заранее, параллельно с этапами 1–2

Мобильная версия

→ Каждый блок сразу проектируем и для телефона

Спасибо!
Давайте обсудим
и стартуем.

Готова ответить на вопросы и обсудить детали: что берём в первый этап, сроки и кто участвует.

Дизайнер — Валентина Утюганова