Разработка корпоративного сайта в сфере IT
Компания Mirainc представляет собой одного из лидирующих поставщиков оборудования в области информационных технологий, а также лицензионного программного обеспечения, предлагая широкий спектр комплексных решений для бизнеса. Эти решения охватывают всё от оснащения рабочих мест до создания сложных системных интеграций. В 2023 году компания осознала необходимость полного ребрендинга своего онлайн-присутствия, так как существующий сайт, созданный еще в 2018 году, сильно устарел.
На тот момент дизайн сайта выглядел довольно шаблонно и не отражал современный подход к веб-дизайну. Функциональность ресурса не учитывала конкретные потребности B2B-аудитории, что приводило к низкой конверсии из-за плохо продуманной UX-логики. Поэтому команда Trafficmall столкнулась с амбициозной задачей: создать не просто сайт-визитку, а преобразовать его в мощный маркетинговый инструмент, который будет:
✅ Способствовать увеличению доверия к бренду.
✅ Повышать количество входящих заявок от заинтересованных клиентов.
✅ Упрощать навигацию для корпоративных пользователей.
✅ Способствовать увеличению доверия к бренду.
✅ Повышать количество входящих заявок от заинтересованных клиентов.
✅ Упрощать навигацию для корпоративных пользователей.
Глубокий анализ рынка и целей целевой аудитории
Глубокий анализ рынка и целей целевой аудитории
Перед началом проектирования нового сайта было проведено масштабное исследование, которое включало в себя несколько ключевых этапов:
Анализ конкурентов
Мы детально изучили более 15 сайтов различных компаний из сектора IT и выявили несколько ключевых проблем:
Кто: технические директора, руководители IT-отделов, владельцы бизнеса.
Боли клиентов:
Таким образом, было сделано заключение, что новый сайт должен не только презентовать услуги компании, но и:
✔ Развеивать страхи клиентов, например, касательно санкционных ограничений.
✔ Демонстрировать экспертизу и компетентность через интерактивные элементы.
✔ Предлагать персонализированные и адаптированные решения усмотрению клиента.
Анализ конкурентов
Мы детально изучили более 15 сайтов различных компаний из сектора IT и выявили несколько ключевых проблем:
- Шаблонность – большинство конкурентов использовали типовые решения и шаблоны без учета специфики IT-продаж и потребностей клиентов.
- Отсутствие эмоционального вовлечения – в большинстве случаев представлены были сухие и неинтересные описания с минимумом визуальных акцентов.
- Слабая доказательная база – на сайтах находилось недостаточное количество кейсов, отзывов и сертификатов.
Кто: технические директора, руководители IT-отделов, владельцы бизнеса.
Боли клиентов:
- Необходимость в легальном программном обеспечении с учетом текущих санкций.
- Сложности с подбором оборудования под специфические задачи бизнеса.
- Желание оптимизировать бюджет без потери качества получаемых услуг и товаров.
Таким образом, было сделано заключение, что новый сайт должен не только презентовать услуги компании, но и:
✔ Развеивать страхи клиентов, например, касательно санкционных ограничений.
✔ Демонстрировать экспертизу и компетентность через интерактивные элементы.
✔ Предлагать персонализированные и адаптированные решения усмотрению клиента.
Разработка структуры сайта
Разработка структуры сайта
Новый сайт был интеллектуально разделен на 7 ключевых разделов, каждый из которых нацелен на решение конкретных потребностей пользователя:
- Главная страница
- Интерактивные карточки услуг: При наведении на карточки услуг плавно менялся цвет фона, что добавляло интерактивности.
- Значимый блок преимуществ компании.
- Страницы услуг
- Подробное описание каждой услуги.
- Кейсы: реальные примеры выполнения задач с цифрами, например:
- Блок «Наши Процессы»: включает видео с процессами сборки оборудования длиной до одной минуты.
- Страница «Партнеры»
Вот такой структурно-текстовый макет мы создали
Дизайн: баланс между минимализмом и функциональностью
Дизайн: баланс между минимализмом и функциональностью
Дизайн-концепция разрабатывалась на принципах "чистого профессионализма" и учитывала следующие аспекты:
Цветовая палитра
Основные цвета были выбраны следующим образом:
#158084 (акцентный) — использовался для кнопок, иконок и рамок.
#004648 (темно-бирюзовый) — использовался для градиентов и фонов.
#F9F9F9 (фоновый) — создавал ощущение «воздушности» в дизайне.
#141515 (темный) — использовался для основного текста.
Цветовая палитра
Основные цвета были выбраны следующим образом:
#158084 (акцентный) — использовался для кнопок, иконок и рамок.
#004648 (темно-бирюзовый) — использовался для градиентов и фонов.
#F9F9F9 (фоновый) — создавал ощущение «воздушности» в дизайне.
#141515 (темный) — использовался для основного текста.
Градиенты:
Типографика
Шрифт Gilroy:
- Формы заявки имели плавный переход от #158084 к #004648.
- Карточки услуг при наведении меняли цвет с белого на #158084 (акцентный бирюзовый).
Типографика
Шрифт Gilroy:
- Полужирное начертание использовалось для заголовков.
- Regular — для основного текста, что обеспечивало лучшую читаемость.
Пример дизайна блока использованием градиента
Графика и фотографии
Стиль изображений:
Стиль изображений:
- Фотографии сотрудников в деловой обстановке, но без излишней формальности.
- Цветовая гамма изображений была выдержана в общей цветовой палитре сайта.
- Иконки: создавались в формате SVG с адаптивным изменением цвета при наведении курсора (hover).
- Применялась анимация "пульсации" для кнопок заявки.
Блок главного экрана с навигаией
Особенности UX
Формы заявки:
Формы заявки:
- Поля подсвечивались бирюзовым цветом при фокусе, чтобы привлечь внимание пользователя.
- Кнопка «Отправить» меняла цвет с #158084 на #0E6066 при нажатии, чтобы визуально подтвердить действие.
Блок с формой
Навигация:
Второстепенное меню расположено в подвале сайта с иконками контактных данных (телефон, email).
Хлебные крошки обеспечивали возможность быстрого возврата на предыдущие страницы.
Второстепенное меню расположено в подвале сайта с иконками контактных данных (телефон, email).
Хлебные крошки обеспечивали возможность быстрого возврата на предыдущие страницы.
Готовый сайт
Верстка сайта на платформе Tilda: тонкая настройка
Верстка сайта на платформе Tilda: тонкая настройка
Почему была выбрана Tilda для реализации проекта:
1. Гибкость:
Позволила кастомизировать блоки без потери скорости загрузки сайта.
2. Адаптивность:
3. SEO-оптимизация:
Встроенные мета-теги были предусмотрены для каждой услуги, а также применялся Lazy Load для изображений, что способствовало улучшению скорости загрузки.
1. Гибкость:
Позволила кастомизировать блоки без потери скорости загрузки сайта.
2. Адаптивность:
- На мобильных устройствах формы заявки адаптировались и растягивались на весь экран.
- Видео-фон автоматически заменялся статичным изображением для удобства пользователей.
3. SEO-оптимизация:
Встроенные мета-теги были предусмотрены для каждой услуги, а также применялся Lazy Load для изображений, что способствовало улучшению скорости загрузки.
Результаты и отзывы клиента
Результаты и отзывы клиента
Через два месяца после запуска нового сайта на основе предложенных улучшений были достигнуты следующие результаты:
- Увеличение конверсии и количества заявок.
- Увеличение времени нахождения пользователей на сайте, что свидетельствовало о их заинтересованности (пользователи стали больше изучать кейсы и видео).
- Положительные отзывы о простоте навигации по сайту и его понятности.
Отзыв от директора Mirainc:
Заключение
Сайт компании Mirainc является ярким примером того, как продуманный дизайн, логичная структура и проработанный пользовательский опыт работают в унисон для достижения бизнес-целей. Каждый элемент, начиная от кнопок и заканчивая карточками партнеров, призван не только усиливать доверие клиентов, но и побуждать их к действию.
Если вы хотите достичь аналогичных результатов, свяжитесь с нами, и мы обсудим ваш проект!
Если вы хотите достичь аналогичных результатов, свяжитесь с нами, и мы обсудим ваш проект!
Обсудим ваш проект?
Ответим на вопросы, предложим понятное и эффективное решение вашей задачи
Нажимая «Отправить», вы соглашаетесь с политикой конфиденциальности.
