Задача от клиента
В 1898 году акционерное общество "Диль и Бакалан" создали Тверской Литейный Завод, который по сей день производит производит тормозные системы, чугунные отливки для транспортного машиностроения и др. продукцию. В 2024 году компания решает создать новое направление - производство тормозных автомобильных систем и зарегистрировать новый бренд под уже известным именем "Диль и Бакалан". Для продажи автомобильных тормозных систем компании необходим брендинг, а также сайт. Для начала это будет сайт визитка, а после запуска производства - интернет-магазин. Задача от клиента: разработать сайт визитку, где необходимо показать преимущества компании, ее многолетний опыт работы, рассказать историю компании, а также оставить контактные данные для дальнейшей связи c потенциальными клиентами/ партнерами.
Анализ конкурентов, мудборд и визуальный анализ сайтов
При разработке сайта важно анализировать конкурентов, потому что это помогает понять, что они делают хорошо, а что - плохо. Узнав о их сильных и слабых сторонах, можно создать более привлекательный и удобный сайт. Это также поможет выбрать правильные идеи и функции, которые понравятся пользователям, улучшить заметность сайта в поисковых системах и привлечь больше посетителей.
В анализ мы включили сайты 5-ти компаний, занимающихся продажей тормозных автомобильных систем. Проанализировав 5 сайтов, выделили их преимущества и недостатки в дизайне и функционале.
Для понимания будущего дизайна мы просмотрели сайты других “технических” компаний и выбрали в качестве референсов те, что подходят нам больше всего.
Провели визуальный анализ, где подробно:
- описали общее ощущение от взаимодействия с сайтами данной тематики
- рассмотрели сетки и композицию
- выделили палитры, которые чаще всего используются
- нашли характерные особенности шрифтов
- рассказали про интерактивные и стилеобразующие элементы и их дизайн.
Разработка структуры сайта
В структуре лендинга необходимо подробно описать все блоки. Мы выделили 5 основных категорий:
- предложение
- выгода от продукта
- гарантии/ доверие
- целевое действие
- подвал сайта.
Для эффективной и корректной работы сайта также необходимо создать следующие сервисные страницы:
- политика конфиденциальности
- страница благодарности
- 404 - страница ошибки.
Структура лендинга:
Разработка прототипа
Следующий этап разработки сайта - создание прототипа. Прототип - черно-белая версия страницы, на которой с помощью прямоугольников разной формы мы указываем местоположение будущих объектов: заголовков, изображений, текстов, кнопок. На скриншотах можно увидеть две версии прототипа: первая - схематичная, вторая с добавлением в прототип текста.
Дизайн-концепция
Первый дизайн-макет сайта был создан на основе анализа конкурентов, визуального анализа и референсов подобранных совместно с заказчиком. Получился он вот таким:
За основу мы взяли сине-фиолетовый цвет, который говорит нам о надежности, технологичности, а также связывает компанию “Диль и Бакалан” с ее “прародителем” - Тверским литейным заводом, использующей синий цвет как основной.
Дизайнер нашего агентства разработал для компании фирменный стиль, который включал в себя: логотип, палитру, шрифтовую пару, макеты упаковки и др.
Логотип и графические элементы фир.стиля:
На основе нового брендинга компании мы собрали ui-kit, где отобразили новую палитру, шрифты и использовали, созданные дизайнером, графические элементы. Опередили, как на сайте будут выглядеть кнопки, карточки, формы обратной связи, верхнее и нижнее меню.
Ui-kit сайта:
Работа над созданием дизайна будущего сайта это всегда много итераций, когда с каждой последующей версией макет становится логичнее, понятнее, эстетичнее.
Новый макет сайта с использованием ui-kit (первые варианты):
Контент для сайта
Для создания текстового и визуального контента на сайт мы активно использовали нейросети, а именно:
- создавали текстовый контент с помощью gpt chat на основе брифа с клиентом
- генерировали макеты тормозных систем в Midjourney
- “оживляли” картинки из migjourney и превращали их в видео с помощью нейросети Runway
- “архивные” фото для раздела история.
Midjourney: создали макеты будущих тормозных систем, а также изображение быстро движущегося автомобиля (конечно в цветовой палитре бренда), после мы создали из этой картинки видео и “оживили” автомобиль.
Runway
После согласования макета лендинга с клиентом было принято решение убрать видео с автомобилем с главного экрана и показать именно тормозные диски, их тестирование на специальном техническом оборудовании. По техническим причинам снять такое видео нельзя, поэтому мы создали его с помощью нейросетей. Получилось эффектное короткое видео, которое напрямую отражает специфику сайта - изготовление и продажу тормозных систем.
Нашему клиенту очень важно было показать и рассказать многолетнюю историю компании “Диль и Бакалан”. Блок “История” прекрасно для этого подходит, но не имея доступа к архивам, мы создали фотографии на основе найденного в интернете материала. Получились настоящие архивные снимки, которые передают атмосферу другой исторической эпохи и отражают процесс работы завода от 1898 года до настоящего времени.
Итоги
Лендинг компании “Диль и Бакалан” получился стильным, современным, отражающим все преимущества компании, рассказывающий про многолетнюю историю и соответствующим брендбуку.
Для создания сайта мы активно работали с нейросетями,объединив современные технологии с историей компании (историческими фактами и архивными фото). Использование ярких стилеобразующих элементов выделяют те блоки, на которые пользователям стоит обратить большее внимание.
Итоговый макет сайта:
