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

s

Задача

Разработать сайт с современным дизайном для презентации продукции компании

Какие велись работы

Ссылка на проект

triplex-doors.ru

О клиенте

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

Задача

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

слайдер в карточке.gif

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

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

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

где купить десктоп.gif

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

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

шапка гиф.gif

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

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

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

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

карточка товара мобилка.gif

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

где купить мобилка.gif

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

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

слайдер товаров на главной мобилка.gif

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

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

каталог мобилка.gif

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

О работе с 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-оптимизацию, чтобы сайт хорошо воспринимался поисковыми системами.

скрол главной.gif

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

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

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

Отзыв


Вы хотите быть сильнее своих конкурентов?

Обеспечим стабильный рост и развитие вашего бизнеса в Интернете!

Получить персональное коммерческое предложение

Готовы начать?

Позвоните нам:
+7 (499) 686-01-14

Или оставьте заявку на сайте
и мы свяжемся с Вами.

s

Лев?..

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

Специалисты «Веб-Центра» сильно увеличат приток клиентов и обеспечат вашему проекту мощную отдачу интернет-рекламы! ×
Наши менеджеры готовы прямо сейчас обсудить ваши задачи!
Александра

Александра

Позвоните нам или оставьте заявку на бесплатную консультацию,
мы ответим в течение 1 часа (в рабочее время) и расскажем, как мы сможем решить ваши задачи!

Обсудить задачу
СПАСИБО!

Благодарим за доверие и подписку на рассылку Веб-центра"


Будем рады видеть тебя в наших друзьях в группе VK. Там мы обсуждаем материалы и отвечаем на вопросы о продвижении в интернете.

Поздравляем!
Ваш приз: Учебник по внедрению CRM

Держи телефон рядом!
Мы позвоним и расскажем, как получить подарок!

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