How To Use Midjourney For Web Design (Best Prompts)

Arek Dvornechuck
19 Jul 202309:21

TLDRIn this video, Arek from Ebaqdesign demonstrates how to use Midjourney for web design, showcasing various web design examples created with the tool. He outlines a general prompt structure starting with 'imagine', specifying the website type, subject, and using a vertical aspect ratio for a comprehensive view. Arek guides viewers on setting up an account, creating a private server for design generation, and discusses five key points: choosing the website type, describing the style with keywords like UX, UI, 3D, and gradients, using image prompts for inspiration, custom zoom for mockup presentations, and remix mode for color and style adjustments. The video serves as an inspiration for designers to leverage AI in their creative process, offering a detailed guide on utilizing Midjourney for unique web design ideas.

Takeaways

  • 🌐 **Creating Web Designs with Midjourney**: Start with 'Imagine' followed by the type of website and its subject to generate web design ideas.
  • 📈 **Vertical Aspect Ratio**: Use a vertical aspect ratio (e.g., dash dash AR) to view more of the website layout, not just the header.
  • 🤖 **Setting Up Midjourney**: Create your own server and add the Midjourney bot to keep your design generations private and organized.
  • 🛒 **E-Commerce Prompt Example**: Specify 'ecommerce website for a motorcycle store' to generate relevant web design concepts.
  • 🎨 **Styling with Keywords**: Include style keywords like 'UX', 'UI', '3D objects', 'gradients' in your prompts to influence the design output.
  • 🔗 **Image Prompt Inspiration**: Use a URL to an inspirational image to guide Midjourney's design generation, enhancing the creative process.
  • 📱 **Custom Zoom Feature**: Generate a website layout and then use the custom zoom feature to place it into a device mockup for quick presentations.
  • 🖼️ **Mockup Presentation**: Showcase your web designs on various device mockups like MacBook, iPhone, or iPad without using external software.
  • 🔄 **Remix Mode for Adjustments**: Use the 'Vary' feature to make subtle adjustments to colors or styles in your generated designs.
  • 🔍 **Panning for More Details**: Ask Midjourney to generate more of a specific image and upscale it to explore additional sections of the design.
  • 🌟 **Combining Features**: Utilize a combination of Midjourney's features to create diverse design variations and refine your final web design before development.

Q & A

  • What is the first step in using Midjourney for web design?

    -The first step is to set up an account by clicking 'join beta' and creating your own server to add the Midjourney bot for private generations.

  • What is the general prompt structure suggested for creating web designs?

    -The general prompt structure starts with 'imagine', followed by indicating the type of website, describing the subject of the website, and using a vertical aspect ratio for a better view of the website layout.

  • How can you use Midjourney to generate ideas for different types of websites?

    -You can generate ideas by using specific prompts for different types of websites such as e-commerce, portfolio, or blog websites, and describing their styles and aspect ratios.

  • What does the '--AR' in the prompt stand for, and why is it used?

    -'--AR' stands for aspect ratio. It is used to specify the vertical aspect ratio of the generated image, allowing designers to see more sections of the website.

  • How can you use keywords to influence the style of the generated web designs?

    -You can include keywords like 'UX', 'UI', '3D objects', 'gradients', etc., in your prompt to influence the style of the generated designs and achieve the desired look and feel.

  • What is the benefit of using an image prompt in Midjourney?

    -Using an image prompt allows Midjourney to get inspired by a specific URL or image, which can help in generating designs that closely resemble the style or elements of the provided inspiration.

  • How can you use the custom zoom feature in Midjourney?

    -The custom zoom feature allows you to upscale a generated layout and place it inside a mockup, such as a MacBook or iPhone, without needing to use external software like Photoshop.

  • What is the 'remix mode' in Midjourney, and how can it be used?

    -The 'remix mode', accessed through the 'Vary' feature, allows you to make adjustments to the generated image, such as changing colors or styles, to create different variations of the design.

  • How can you use the 'Vary' feature to emphasize certain aspects of the design?

    -By using the 'Vary' feature followed by a number (e.g., 'Vary 2'), you can tell Midjourney to pay more attention to certain keywords in the prompt, such as a specific color or style.

  • What are some platforms where you can find inspiration for web designs to use with Midjourney?

    -You can find inspiration on platforms like Webflow Awards, Behance, and Dribbble, where you can copy the image address of a design you like and use it as an image prompt in Midjourney.

  • How can you keep your generated designs private when using Midjourney?

    -By creating your own server and adding the Midjourney bot to it, you can keep your design generations private, avoiding the need to scroll through others' designs in a public server.

Outlines

00:00

🎨 Introduction to Using Meet Journey for Web Design

Arek from Ebaqdesign introduces the audience to the video's purpose, which is to demonstrate the use of Meet Journey for web design. He showcases various web design examples created using Meet Journey, including photo-driven, abstract, gradient, and 3D elements with illustrations. Arek provides a general prompt structure for using the tool, emphasizing the importance of specifying the type of website and its subject. He also advises on using a vertical aspect ratio for a comprehensive view and guides viewers on setting up an account and creating a private server for design generation. The video is structured around five talking points, starting with choosing the website type, and Arek demonstrates how to generate ideas for different types of websites, such as e-commerce, portfolio, and blog, using specific prompts and aspect ratios.

05:02

🌟 Exploring Style Descriptions and Image Prompts

The second paragraph delves into describing the style of the web design using keywords like UX, UI, 3D objects, and gradients. Arek illustrates how to generate web designs for an artist's website with these elements and aspect ratio considerations. He also introduces the concept of using image prompts by providing a URL to an inspirational image, which guides Midjourney to create designs influenced by that image. Arek demonstrates how to adjust the image weight to prioritize the inspiration over the textual prompt. He discusses custom zoom, a feature that allows users to place generated layouts into mockups without additional software like Photoshop. Arek also covers panning to explore more of the generated image and remix mode for adjusting colors and styles. The paragraph concludes with Arek's recommendation to experiment with different weights and multi-prompts for varied design outcomes and to check out his website for more detailed information and examples.

Mindmap

Keywords

💡Midjourney

Midjourney is a tool or platform implied to be used for web design in the video. It seems to be an AI-based system that can generate web design concepts based on prompts given by the user. In the context of the video, it is used to create various types of website designs such as e-commerce, portfolio, and blog websites by understanding and processing descriptive prompts.

💡Web Design

Web design refers to the process of creating the layout, structure, and visual appearance of a website. It is the main theme of the video, where the host demonstrates how to use Midjourney to generate ideas for web designs. The script mentions different styles and elements of web design, such as photo-driven, abstract, gradients, and 3D elements.

💡Prompt Structure

A prompt structure in this context is the format or template used to input commands or instructions into the Midjourney tool. It typically starts with the word 'Imagine' followed by a description of the type of website and its subject. The video emphasizes the importance of a clear prompt structure for effective use of the tool.

💡Aspect Ratio

The aspect ratio, denoted in the script as 'dash dash AR' followed by numbers (e.g., 9 by 16), refers to the proportional relationship between the width and the height of an image or display surface. In web design, it's crucial for ensuring that the layout is appropriately scaled and viewed, as demonstrated in generating long image layouts to see different sections of a website.

💡E-commerce Website

An e-commerce website is a type of online business that facilitates the purchasing of goods or services via the internet. In the video, it is used as an example of the type of website that can be designed using Midjourney, indicating the tool's versatility in creating various commercial web interfaces.

💡Portfolio Website

A portfolio website is a personal or company web page that showcases a collection of an individual's or organization's work. The script mentions creating a portfolio website for a graphic designer, highlighting the tool's ability to generate designs tailored to specific professional needs.

💡Blog Website

A blog website is a platform where individuals or groups regularly post articles or commentary on a particular topic or theme. The video script describes generating a blog website for a tech magazine, emphasizing the tool's utility in creating content-focused designs.

💡Illustrations

In the context of web design, illustrations refer to the decorative graphics used to enhance the visual appeal and convey information on a website. The video mentions using illustrations in web design, indicating the tool's capability to integrate such elements into the generated designs.

💡Custom Zoom

Custom Zoom is a feature mentioned in the video that allows users to focus on a specific part of a generated image and放大 (zoom in) to see more details or to create a mockup of how the website might look on different devices. It's a practical feature for presenting and refining web design ideas.

💡Remix Mode

Remix Mode is a feature that enables users to make adjustments to the generated designs, such as changing colors or styles. The video demonstrates how to use this feature to vary the color of a design, showcasing the tool's flexibility in allowing for design experimentation and modification.

💡Mockup

A mockup in web design is a visual representation of how a website or app will look when displayed on a device like a MacBook, iPhone, or iPad. The video script discusses using custom zoom to place a generated website layout inside a mockup, which helps in visualizing the final product before development.

Highlights

Arek from Ebaqdesign demonstrates using Midjourney for web design.

Examples of web designs created with Midjourney include photo-driven, abstract, gradient, and 3D elements websites.

A general prompt structure for Midjourney starts with 'imagine', followed by the type of website and its subject.

Creating an account on Midjourney involves joining the beta and setting up a personal server for private generations.

Different website types such as e-commerce, portfolio, and blog websites can be designed using specific prompts.

Using the '--AR' command in prompts allows for a vertical aspect ratio, providing a fuller view of the website layout.

Generated designs can be used as inspiration and recreated using web development software like Webflow or Framer.

Describing the style with keywords such as UX, UI, 3D, gradients, and objects can influence the design output.

Image prompts can be used by pasting a URL of an inspirational image to guide Midjourney's design generation.

Custom zoom feature allows for generating a website layout and then placing it into a device mockup without additional software.

Panning can be used to ask Midjourney to generate more of an image and upscale it for further exploration.

Remix mode enables adjustments to the generated image, such as changing colors or styles, using the 'Vary' feature.

Prompt weights and multi-prompts can be experimented with to achieve different design variations.

Combining Midjourney's features allows for creating various design iterations before developing the final website.

Arek also provides a detailed guide on his website for creating different types of websites and using various keywords.

Midjourney can imitate styles from platforms like Webflow Awards, Behance, and Dribbble by using image prompts.

The video concludes with a suggestion to check out Arek's other video on using Midjourney for logo design.