Как нейросеть Midjorney сэкономила бюджет и время разработки сайта. Делимся реальным опытом

О клиенте

Triplex-Doors — производитель межкомнатных дверей из эко-материалов. У компании 22 офиса в 14 городах. Важной особенностью дверей Triplex-Doors является экологически чистое производство, здесь задействованы безотходные технологии, а в качестве сырья используются эко-материалы.

Задача

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

«Чтобы после посещения сайта у него (клиента) не оставалось вопросов по поводу производства, качества и обслуживания»

©️ Директор компании «Triplex-doors»

С чего мы начали

Первое, что нужно было сделать — выбрать платформу для разработки.

Заказчику нужен был сайт с уникальным дизайном. Сервисы оплаты, доставки и интеграция с другими платформами не требовались. Поэтому мы остановились на Tilda.

Данная платформа имеет несколько преимуществ:

• Простота использования:
  предоставляет интуитивно понятный и легкий интерфейс для администрирования сайта
• Гибкость в дизайне:
  позволяет разрабатывать свои блоки с нуля и подключать самописный код стилей и скриптов – именно то, что требовалось для индивидуального дизайна
• Оптимизация для мобильных устройств:
  можно создать адаптивные сайты, которые хорошо смотрятся на разных устройствах, включая смартфоны и планшеты
• Управление производительностью и безопасностью:
  Tilda предоставляет хостинг и управление безопасностью, что позволяет пользователям не беспокоится о технических деталях
• Меньшие затраты на разработку:
  создание и поддержка сайта на Tilda может обойтись дешевле по сравнению с другими CMS

Далее разделили задачу по разработке на несколько этапов:

Индивидуальный дизайн сайта

Главный продукт компании — двери. Поэтому мы решили сделать акцент на баннерах с дверьми Triplex-Doors и добавить их не только на главную страницу, но и в карточки товаров.

Баннер на главной странице

Форма обратной связи на главной странице

Мы хотели показать двери в интерьере, но где взять столько фонов? На стоках можно найти подходящих картинок 10, а для товаров и баннеров нужно около 100.

Наша команда нашла решение этой проблемы и сгенерировала картинки интерьеров с помощью нейросети Midjourney. Нам удалось получить подходящие локации для каждой модели дверей. Такое решение позволило сберечь:

• силы и время дизайнера,
• бюджет клиента.

Баннеры в карточках товара

Чтобы показать, что одна модель двери может быть и «глухой», и со стеклом мы сделали слайдер в карточке товара. По задумке в баннере можно было переключать двери, чтобы увидеть разные вариации.

Такой функционал не предусмотрен в Тильде, поэтому мы доработали его с помощью стороннего кода.

Слайдер на баннере в карточке товара

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

Мы отрисовали макет страницы и доработали функционал платформы, чтобы получить желаемый результат.

Функционал страницы «Где купить»

Стандартная шапка в Тильде не адаптируется к цвету фона. При скроле страницы пункты меню становились незаметными. Мы доработали эти момент с помощью CSS стилей. Теперь при скроле страницы к шапке добавляется блюр. Эту же доработку мы использовали для меню в карточке товара.

Шапка при скроле страницы

Акцент на мобильных устройствах

Согласно данным сервиса Яндекс.Радар трафик с мобильных устройств составляет в среднем 65%. Поэтому важно, чтобы внешний вид сайта и его функционал в мобильной версии не уступал десктопной.

Для клиента адаптация дизайна к мобильным устройствам — одно из главных требований. Поэтому с помощью Zero блока мы настроили отображение слайдера на баннере в карточке товара для планшетов и мобильных устройств. Адаптировали к мобильной версии дизайн и функции страницы «Где купить».

Карточка товара на мобильных устройствах

Страница «Где купить» на мобильных устройствах

Для каталога был использован стандартный блок. На мобильных устройствах он выглядит, как горизонтальный скрол товаров.

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

Это подходило для главной страницы. Но в каталоге было неудобно просматривать двери в таком формате. Поэтому мы доработали стандартный блок, чтобы вывести товары списком по две карточки в ряд.

Каталог товаров на мобильных устройствах

О работе с Midjourney более детально

Рассказывать о том, как создать аккаунт в Midjourney и как им пользоваться, не будем. На эту тему уже есть много подробных материалов. Расскажем о собственном опыте, но перед этим все равно немного вводных.

Изображения в Midjourney генерируются с помощью команды /promt. В этой команде надо текстом описать желаемый результат.

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

Структура промта обычно включает в себя следующие элементы:

• Ключевые слова: фразы, которые описывают основные элементы, объекты или сцены, которые должны присутствовать на изображении.
• Описание стиля: указание, какой стиль, настроение или эффект должен быть применен к изображению. Например, «ретро», «футуристичный», «мистический» и так далее.
• Дополнительные параметры: цветовая палитра, композиция, размер изображения, референсы, степень стилизации и многое другое.

Перейдем к практике

Чтобы сгенерировать изображения с дверьми в интерьере, мы использовали как референс картинки, найденные на стоках и подходящие нашей design-задумке. Это помогает быстрее добиться желаемого результата.

Один из используемых референсов

Также важно правильно сформулировать задание нейросети, он же промт, чтобы изображение получилось максимально приближенным к задуманному.

Как в Midjorney выглядит промт с выполненным заданием

Разберем один из промтов.

1. Загрузили рефернес, чтобы нейросеть могла ориентироваться на него при создании нового изображения.
2. Ключевые слова: комната в стиле минимализм, голубые стены, деверь, коричневый цвет с весом параметра 5.
   Описание стиля: реализм
   Дополнительный параметр: 1 dof.
   Depth of field — глубина резкости, этот параметр используется для создания реалистичных изображений. Перед ним цифра 1, она указывает на вес параметра. В зависимости от ваших целей значение может меняться. Чем больше вес, тем реалистичнее.
3. Эти параметры задавали в конструкторе промтов:
   • Aspect Ratio (ar) — соотношение сторон, в нашем случае 16:9.
   • Quality — качество изображения.
   • Version — версия Midjourney, у нас 5.2 есть, мы выбирали ее.
   • Stylize — с помощью этого параметра можно контролировать «фантазию» нейросети. Чем меньше значение, тем меньше импровизации.
   • U1-4 — команда создает варианты одного понравившегося изображения из четырех. Считаются они так: левое верхнее - 1, правое верхнее - 2, нижнее левое - 3, нижнее правое - 4.
   • V1-4 — команда присылает выбранное изображение отдельной картинкой.

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

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

Соответственно, чем меньше часов специалист тратит на работу, тем дешевле проект. То есть статья расходов на создание графики сократилась в 3 раза.

SEO-оптимизация

Помимо красивого дизайна и удобного функционала, для сайта важно появиться в поисковой системе. Для этого мы прописали всем страницам метаданные. Теперь Triplex-Doors выдается в поиске по релевантным запросам.

Метаданные для страницы

Сайт в поисковой выдаче

Чего мы достигли

Всего за месяц работы мы создали новый сайт для компании Triplex-Doors. В этом проекте реализовали красивый дизайн и нестандартный функционал. Все доработки были реализованы как на десктопе, так и на мобильных устройствах. Сделали первичную SEO-оптимизацию, чтобы сайт хорошо воспринимался поисковыми системами.

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

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

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

Отзыв