Кейс. Разработка корпоративного сайта по продаже листогибочных станков с сочным дизайном

Всем привет! Это Виталий Радченко - СЕО Web-do.ru и основатель таск-трекера для digital-агентств Otask.ru. Сегодня расскажу о том, как мы разрабатывали корпоративный сайт для компании, занимающейся продажей листогибочных станков.

Создание корпоративного сайта компании
Создание корпоративного сайта компании

С чем пришел клиент

У клиента уже был сайт, ниже скриншоты, но он был сделан на шаблонных решениях и не очень удобен в поиске интересующей клиентов информации. Также, была проблема неполной информации о станках, которые продает компания.

Скриншот старой версии сайта
Скриншот старой версии сайта

Задача

Обновить визуал уже существующего сайта компании + "освежить логотип". Из основных пожеланий, именно к сайту:

  • Понятная структура
  • Современный дизайн
  • Представление развернутой информации о каждом станке
  • Удобство и простота восприятия информации на сайте
  • Самостоятельно управление контентом на сайте

Мудборд

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

Мудборд для проекта
Мудборд для проекта

Логотип

Выбрана более современная концепция и сохранен фирменный зеленый цвет. Для логотипа использован шрифт “Unbounded”, потому как изогнутые угловатые буквы данной гарнитуры смотрятся символично для компании предлагающей гибочные станки.

Обновление логотипа
Обновление логотипа

Разработка сайта

Дорожная карта (без учета разработки лого и админки) разработки сайта была объемной

Дорожная карта разработки корпоративного сайта
Дорожная карта разработки корпоративного сайта

Структура сайта

Первое с чего начали конечно же структура, при создании которой было решено, что её нужно максимально упросить

Структура новой версии сайта
Структура новой версии сайта

Шрифты и цвета

Цветовая палитра построена с учетом фирменного зеленого цвета. Этот цвет - акцентный и использован с целью привлечения внимания пользователя к конкретным элементам. Так же палитра дополнена черным и разными оттенками серого, которые отлично контрастируют с фирменным зеленым

Цвета и шрифты для сайта
Цвета и шрифты для сайта

Главная страница

Так как линейка продуктов состоит буквально из 5 единиц и комплектующих для них, то решили на главной странице первым же блоком поставить блок Продукция с прямым переходом к каждой из единиц продукции

Главная страница корпоративного сайта
Главная страница корпоративного сайта

Видео главной страницы

Вся главная страница

Страница Продукции

Вторая по значимости страница, это страница самого станка, которая должна отражать:

  • Преимущества конкретного станка
  • Различные модификации с разными параметрами
  • Детализацию каждого станка
  • Файлы, тексты, видео, изображения по каждой модели

Поэтому у нас получилась такая структура

Страница выбранной продукции

Из интересных решений на странице станка это переключатели модификаций, которые были выполнены привычными для пользователей табами

Зеленый переключатель для выбора модификации
Зеленый переключатель для выбора модификации

А также, визуальные указатели на каждую модель, которые описывают основные узлы каждого станка

Визуальные указатели на основные узлы станка
Визуальные указатели на основные узлы станка

Другие страницы

Также в рамках разработки дизайна были отрисованы и другие страницы, перечисленные в структуре:

  • Раздел продукции
  • Сервис
  • Информация
  • О компании
  • Контакты
  • Страница Спасибо, 404
Остальные страницы
Остальные страницы

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

И конечно же не забыли про мобильную версию. При разработке сайта мы всегда делаем акцент на мобильной версии, т.к. сегодня это порой решающий фактор в некоторых нишах

Мобильная версия корпоративного сайта
Мобильная версия корпоративного сайта

Кстати, кому интересно взглянуть только визуал кейса - можно это сделать на площадке Dprofile - ссылка на проект

Там есть и другие проекты🤗

Про управление и обслуживание

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

Итого в результате

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

Две строчки в описании результата, а столько работы стоит за ними 💪🏼

💻 Заказать разработку сайта или приложения — Web Do

✅ Таск-трекер и учет финансов для digital-команд и не только — O!task

✈ Telegram канал про развитие агентства Web Do и продукта O!task — Подписывайся

12
2 комментария

Интересный кейс! В своей деятельности привык дизайну сайта уделять немного внимания, а надо бы исправляться!

1
Ответить

Спасибо за обратную связь)

1
Ответить