Разработать сайт с современным дизайном для презентации продукции компании
Triplex-Doors — производитель межкомнатных дверей из эко-материалов. У компании 22 офиса в 14 городах. Важной особенностью дверей Triplex-Doors является экологически чистое производство, здесь задействованы безотходные технологии, а в качестве сырья используются эко-материалы.
У клиента был устаревший сайт, который плохо адаптировался к мобильным устройствам. Он обратился к нам за сайтом с современным дизайном, который расскажет о компании, собственном производстве и ассортименте товара.
«Чтобы после посещения сайта у него (клиента) не оставалось вопросов по поводу производства, качества и обслуживания»
©️ Директор компании «Triplex-doors»
Первое, что нужно было сделать — выбрать платформу для разработки.
Заказчику нужен был сайт с уникальным дизайном. Сервисы оплаты, доставки и интеграция с другими платформами не требовались. Поэтому мы остановились на Tilda.
Данная платформа имеет несколько преимуществ:
Далее разделили задачу по разработке на несколько этапов:
Главный продукт компании — двери. Поэтому мы решили сделать акцент на баннерах с дверьми Triplex-Doors и добавить их не только на главную страницу, но и в карточки товаров.
Баннер на главной странице
Форма обратной связи на главной странице
Мы хотели показать двери в интерьере, но где взять столько фонов? На стоках можно найти подходящих картинок 10, а для товаров и баннеров нужно около 100.
Наша команда нашла решение этой проблемы и сгенерировала картинки интерьеров с помощью нейросети Midjourney. Нам удалось получить подходящие локации для каждой модели дверей. Такое решение позволило сберечь:
Баннеры в карточках товара
Чтобы показать, что одна модель двери может быть и «глухой», и со стеклом мы сделали слайдер в карточке товара. По задумке в баннере можно было переключать двери, чтобы увидеть разные вариации.
Такой функционал не предусмотрен в Тильде, поэтому мы доработали его с помощью стороннего кода.
Слайдер на баннере в карточке товара
По странице «Где купить» у клиента был сформирован конкретный запрос. Ему не нужны были стандартные карты с точками. Он хотел, чтобы при переключении городов появлялись соответствующие адреса магазинов.
Мы отрисовали макет страницы и доработали функционал платформы, чтобы получить желаемый результат.
Функционал страницы «Где купить»
Стандартная шапка в Тильде не адаптируется к цвету фона. При скроле страницы пункты меню становились незаметными. Мы доработали эти момент с помощью CSS стилей. Теперь при скроле страницы к шапке добавляется блюр. Эту же доработку мы использовали для меню в карточке товара.
Шапка при скроле страницы
Согласно данным сервиса Яндекс.Радар трафик с мобильных устройств составляет в среднем 65%. Поэтому важно, чтобы внешний вид сайта и его функционал в мобильной версии не уступал десктопной.
Для клиента адаптация дизайна к мобильным устройствам — одно из главных требований. Поэтому с помощью Zero блока мы настроили отображение слайдера на баннере в карточке товара для планшетов и мобильных устройств. Адаптировали к мобильной версии дизайн и функции страницы «Где купить».
Карточка товара на мобильных устройствах
Страница «Где купить» на мобильных устройствах
Для каталога был использован стандартный блок. На мобильных устройствах он выглядит, как горизонтальный скрол товаров.
Слайдер товаров на главной странице
Это подходило для главной страницы. Но в каталоге было неудобно просматривать двери в таком формате. Поэтому мы доработали стандартный блок, чтобы вывести товары списком по две карточки в ряд.
Каталог товаров на мобильных устройствах
Рассказывать о том, как создать аккаунт в Midjourney и как им пользоваться, не будем. На эту тему уже есть много подробных материалов. Расскажем о собственном опыте, но перед этим все равно немного вводных.
Изображения в Midjourney генерируются с помощью команды /promt. В этой команде надо текстом описать желаемый результат.
Промт — это текстовое описание/инструкция, с его помощью пользователь указывает, что именно он хочет увидеть на изображении.
Структура промта обычно включает в себя следующие элементы:
Чтобы сгенерировать изображения с дверьми в интерьере, мы использовали как референс картинки, найденные на стоках и подходящие нашей design-задумке. Это помогает быстрее добиться желаемого результата.
Один из используемых референсов
Также важно правильно сформулировать задание нейросети, он же промт, чтобы изображение получилось максимально приближенным к задуманному.
Как в Midjorney выглядит промт с выполненным заданием
Разберем один из промтов.
Иногда нейросеть выдавала сюрпризы — пририсовывала девушек, деревья и прочее, хотя в промте этого не было. Такие импровизации можно свести к минимуму с помощью упомянутого параметра Stylize со значением 0.
Если подытожить, то Midjourney помогла нам сократить создание графики для сайта втрое. В среднем, чтобы создать изображение с помощью нейросети и подогнать под размеры разных устройств, требовалось порядка 20 минут. У дизайнера работа над одной картинкой занимала около часа.
Соответственно, чем меньше часов специалист тратит на работу, тем дешевле проект. То есть статья расходов на создание графики сократилась в 3 раза.
Помимо красивого дизайна и удобного функционала, для сайта важно появиться в поисковой системе. Для этого мы прописали всем страницам метаданные. Теперь Triplex-Doors выдается в поиске по релевантным запросам.
Метаданные для страницы
Сайт в поисковой выдаче
Всего за месяц работы мы создали новый сайт для компании Triplex-Doors. В этом проекте реализовали красивый дизайн и нестандартный функционал. Все доработки были реализованы как на десктопе, так и на мобильных устройствах. Сделали первичную SEO-оптимизацию, чтобы сайт хорошо воспринимался поисковыми системами.
Главная страница сайта
Использование нейросети в 3 раза ускорило процесс создания графики и, следовательно помогло сократить бюджет на работы по созданию сайта.
Но главным успехом мы считаем, что заказчик остался доволен реализацией своих идей.
Мы ответим в течение 1 часа (в рабочее время) и расскажем, как мы сможем решить ваши задачи!
