March 16

2

Дизайн сайта с помощью Midjorney

August 22, 2023

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

Как мы можем использовать дизайны сгенерированные Midjorney:

  1. По типу сгенерированного сайта собрать похожую картинку с нуля.
  2. Сохранить сгенерированный Midjorney дизайн и с помощью сторонних сервисов для создания сайтов, переделать сгенерированные изображения под себя (пример будет ниже).

Конструкция:

+ профессиональный сайт

+ для (пишем тему проекта)

+ ui, ux, ui/ux, сайт, целевая страница (уточняющие подсказки)

+ цвет + стиль (опционально, в зависимости от задачи)

+ --ar 16:9 (формат экрана, по умолчанию выдаёт квадрат 1:1)

Дизайны для сайтов

Пример 1. Делаем дизайн сайта для онлайн кинотеатра.

Промпт: Professional website screen for online movie theater, ui, ux, ui/ux, website, landing page, vector illustration --ar 16:9

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

Пример 2. Дизайн сайта для кулинарной школы

Промпт: Professional website screen for online cooking school, ui, ux, ui/ux, website, landing page, light colors, --ar 16:9

Пример 3. Дизайн сайта для ресторана японской кухни в красных тонах

Промпт: screen professional website for japanese cuisine restaurant, ui, ux, ui/ux, website, landing page, red tones, --ar 16:9

Пример 4. Дизайн сайта для гида по Стамбулу

Промпт: Professional website for Istanbul tour guide, ui, ux, ui/ux, website, landing page, figma, high quality graphics, illustration, --ar 16:9

Пример 5. Сайт для криптообменника

Промпт: professional website screen for crypto exchange, ui, ux, ui/ux, website, landing page, green and metallic colors, --ar 16:9

Пример 6. Дизайн сайта для фитнес курса

Промпт: Professional website screen for fitness course, ui, ux, ui/ux, website, landing page, red and white colors , --ar 16:9

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

Пример 1. Дизайн мобильного приложения для компании бронирования столиков в ресторанах Москвы

Промпт: Design of a mobile application for a company for booking tables in Moscow restaurants, ux, ui, purple and blue and gold and yellow colors, navigation menu, video player, beautiful design

Пример 2. Дизайн мобильного приложения для доставки еды на дом

Промпт: Mobile app design for breakfast delivery company, ux, ui, purple and blue and gold and yellow colors, navigation menu, video player, beautiful design

Пример 3. Дизайн мобильного приложения для игры по типу ГТА5

Промпт: Mobile application design for a GTA5-like game, ux, ui, purple and blue and gold and yellow colors, navigation menu, video player, beautiful design

Пример 4. Дизайн для приложения онлайн библиотеки

Промпт: Mobile application design for online library, ux, ui, black and white colors, navigation menu, video player, beautiful design. Vector illustration

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

  • Dark colors (темные цвета)
  • Light colors (светлые цвета)
  • Bright colors (яркие цвета)
  • Black-white (черно-белое)
  • Colorful (цветное)
  • Pink (Розовый)
  • Blue (Синий)
  • Violet (Фиолетовый)
  • Red (Красный)
  • Green (Зелёный)
  • Peach (Персиковый)
  • Indigo (Индиго)
  • Jade (Джейд)
  • Salmon (Лососевый)
  • Wooden (Деревянный)
  • Metallic (Металлик)
  • Gold (Золотой)
  • Можно писать причислением цветов, можно писать градиентом (градиент)

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

  • Векторная иллюстрация
  • Плоская иллюстрация
  • Контурная иллюстрация
  • Линейная иллюстрация
  • Акварельная иллюстрация
  • Изометрическая иллюстрация
  • Мультфильм
  • Абстрактное искусство
  • Фото реалистично

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

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

  • Панель приборов
  • инфографика
  • Электронная торговля
  • Интернет-магазин
  • Минимализм
  • Интерфейс
  • Социальная сеть

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

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

Используйте «--no» в своих подсказках, если вы хотите вызвать катастрофу какого-либо элемента.

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

Midjorney + Figma

Теперь попробуем создать пару страниц для сайта и отредактировать их в Figma.

Например, сделаем сайт для парка развлечений в стиле Парк Юрского Периода, под названием "Динополис"

  1. Создаем первую страницу для нашего сайта, с помощью этого промпта и сохраняем ее
professional website screen for jurassic park theme park, ui, ux, ui/ux, website, landing page, vector illustration --ar 16:9

2. Переходим в Figma и заходим в Photopea

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

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

5. Теперь сгенерируем второй слайд для нашего сайта, для покупки билетов

Промпт: Professional website screen for jurassic park style theme park, ticket purchase menu, ui, ux, ui/ux, website, landing page, vector illustration --ar 16:9

6. Переходим в Figma+Photopea, замазываем все надписи и добавляем свои

7. Остальные слайды делаются по такому же принципу.

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

Report