July 29, 2023

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


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

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

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, для того чтобы в результате был именно экран, а не компьютер или ноутбук с примером дизайна.

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

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

professional website for fitness trainer, ui, ux, ui/ux, website, landing page, blue and red colors --ar 9:16

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

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, --s 1000
Prompt: sketch design of a modern website landing page for a skateboard company, gold & yellow colors, navigation menus, --s 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

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

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

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

Примеры:

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

Promt: web design for a flight discount service
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 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 — отличный инструмент для получения вдохновения в различных сферах дизайна и творчества.

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