Как создать Дизайн веб-Сайта с помощью Midjourney (65 примеров)

Как создать Дизайн веб-Сайта с помощью Midjourney (65 примеров)

Всем привет!
В этой статье расскажу об использовании нейронных сетей (в частности Midjourney) в дизайне веб-сайтов. Сам сайт пока создать не получится, но можно получить гору свежих идей для главной или внутренних страниц.
Midjourney очень хорошо поможет дизайнеру в любой сфере.
Ниже ссылка на статью в которой я показывал ооочень много примеров в разных стилях.

Остальное в Telegram канале https://t.me/neuroarthero

Особенно нейросеть хороша когда наступил творческий затык, выгорание или просто временный тупняк. Заказчику это чаще всего не объяснить…

Я продемонстрирую несколько интересных конструкций запросов (промтов) для создания «экранов сайтов» А также разберемся как можно настроить и оптимизировать их для достижения желаемого вами результата. Я лично всё отобрал, протестировал и теперь делюсь этим с вами.

  • Стоит сказать, что я не претендую на роль эксперта и гуру в этом вопросе, просто делюсь тем, что узнал и проверил.

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

1ая конструкция:
+ professional website
+ for (пишем тему проекта)
+ ui, ux, ui/ux, website, landing page (уточняющие подсказки)
+ colors + style (опционально, в зависимости от задачи)
+ --ar 16:9 (формат экрана, по умолчанию выдаёт квадрат 1:1)

screen professional website for online education, ui, ux, ui/ux, website, landing page, vector illustration --ar 16:9
screen professional website for online education, ui, ux, ui/ux, website, landing page, vector illustration --ar 16:9

Экран сайта на тему крипто валюты в синих тонах.

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

screen professional website for crypto coin, ui, ux, ui/ux, website, landing page, ligt blue and blue colors, --ar 16:9
screen professional website for crypto coin, ui, ux, ui/ux, website, landing page, ligt blue and blue colors, --ar 16:9
screen professional website for crypto coin, ui, ux, ui/ux, website, landing page, ligt blue and blue colors, --ar 16:9
screen professional website for crypto coin, ui, ux, ui/ux, website, landing page, ligt blue and blue colors, --ar 16:9

Экран сайта для агентства недвижимости в светлых лёгких тонах.

screen professional website for Real Estate, ui, ux, ui/ux, website, landing page, light colors, --ar 16:9
screen professional website for Real Estate, ui, ux, ui/ux, website, landing page, light colors, --ar 16:9

Сайт в красно-синих тонах для фитнес тренера

professional website for fitness trainer, ui, ux, ui/ux, website, landing page, blue and red colors
professional website for fitness trainer, ui, ux, ui/ux, website, landing page, blue and red colors

Путешествия в Турцию

professional website for a tour to Turkey, ui, ux, ui/ux, website, landing page, figma, high-quality graphics, illustration, --ar 16:9
professional website for a tour to Turkey, ui, ux, ui/ux, website, landing page, figma, high-quality graphics, illustration, --ar 16:9

На примере выше я не указывал цветовую гамму, доверился алгоритму. Результат превосходный. Сочетание золота и графитного здесь как раз к месту! 👍

Prompt: sketch design of a modern website landing page for a skateboard company, gold & yellow colors, navigation menus, — stylize 1000
Prompt: sketch design of a modern website landing page for a skateboard company, gold & yellow colors, navigation menus, — stylize 1000
Prompt: sketch design of a modern website landing page for a skateboard company, gold & yellow colors, navigation menus, — stylize 1000
Prompt: sketch design of a modern website landing page for a skateboard company, gold & yellow colors, navigation menus, — stylize 1000

Дизайн мобильного приложения

mobile app design for a skateboard company, ux, ui, purple and blue and gold and yellow colors, navigation menus, video player, beautiful design
mobile app design for a skateboard company, ux, ui, purple and blue and gold and yellow colors, navigation menus, video player, beautiful design
mobile app design for a skateboard company, ux, ui, purple and blue and gold and yellow colors, navigation menus, video player, beautiful design
mobile app design for a skateboard company, ux, ui, purple and blue and gold and yellow colors, navigation menus, video player, beautiful design

Отрицательные подсказки

Используйте “--no” в своих подсказках если хотите исключить какой либо элемент.

Все, что введено после --no [текст] не будет отображаться на вашем изображении. Это называется отрицательной подсказкой.

Примеры:

Обратите внимание на подпись к изображению

Promt: web design for a flight discount service
Promt: web design for a flight discount service
Promt: web design for a flight discount service <b>--no shading realism photo details</b>
Promt: web design for a flight discount service --no shading realism photo details

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

Только дизайн

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

Promt: web design for a flight discount service --no shading realism photo details
Promt: web design for a flight discount service --no shading realism photo details
Promt: web design for a flight discount service --no shading realism photo details device computer window
Promt: web design for a flight discount service --no shading realism photo details device computer window

Дополнительные подсказки

  • Dark colors (темные цвета)
  • Light colors (светлые цвета)
  • Bright colors (яркие цвета)
  • Black-white (черно-белое)
  • Colorful (цветное)

Конкретные цвета, например:

  • Pink (Розовый)
  • Blue (Синий)
  • Violet (Фиолетовый)
  • Red (Красный)
  • Green (Зелёный)
  • и т. п.

В том числе работают и необычные цвета или даже материалы:

  • Peach (Персиковый)
  • Indigo (Индиго)
  • Jade (Джейд)
  • Salmon (Лолосевый)
  • Wooden (Деревянный)
  • Metalic (Металический)
  • Golden (Золотой)
  • и т. п.

Можно несколько цветов писать в запросе. Можно писать gradient (градиент)

Стили иллюстраций для сайта:

  • Vector illustration
  • Flat illustration
  • Outline illustration
  • Lineart illustration
  • Watercolor illustration
  • Isometric illustration
  • Cartoon
  • 3d
  • Abstract art
  • Photo realistic

Стили можно смешивать!

Дополнительные подсказки, для добавления деталей:

  • Dashboard
  • Infographic
  • Ecommerce
  • Online-store
  • Minimalism
  • Interface
  • Social network

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

Указывать какие-то предметы, например:

Books Cat Flowers Girl with the phone и т. д.

Заключительная мысль

Midjourney — отличный инструмент для получения вдохновения в различных сферах дизайна и творчества.

Я верю, что однажды в будущем искусственный интеллект поможет в полном цикле создания веб-сайтов со сложными деталями и функционалом.

Подписывайтесь на Telegram канал https://t.me/neuroarthero
Там много изображений с Промтами

Как создать Дизайн веб-Сайта с помощью Midjourney (65 примеров)

✅ Самый простой, быстрый и удобный способ оплаты Midjourney из России.

🟡Все тарифы.
🟡На ваш аккаунт, без входа.
🟡Можно пополнить часы.
🟡Самый лучшей ценник.
🟡Оплата картой банков РФ

🟡Есть оплата других сервисов.
От покупки аккаунта ChatGPT до PlayStation Store.

Оплата Midjourney здесь.

3939
32 комментария

Я себе делаю сайт для видеопродакшена, было интересно глянуть на раздел портфолио, раздел для отдельной работы, раздел с командой, контактами.. в целом, всё стандартное, что есть на самых обычных лендосах. У меня айдентика связана с медведем и то, что предлагает нейросетка - просто бомба, я бы фиг в таком направлении вообще подумал)) За статью, кстати, спасибо большое, без неё у меня результаты были такие себе.

4

Почему 9/10 изображений от нейронок выглядят, будто вылеплены из пластилина?

3
Автор

Всё очень сильно зависит от запроса.

1
Автор

Надо указывать Ключи на реалистичность и фотокачество.

Сразу видно, с какой площадки брались изображения 🏀

3

Для меня не сразу)