10 Web Design Tricks using Midjourney

Codex Community
7 Jul 202313:13

TLDRIn this video, the presenter shares 10 web design tricks utilizing Midjourney, an AI art generation tool. The tricks include negative prompting to avoid unwanted elements, multi-prompting to separate and prioritize words, and weights to emphasize certain aspects. The video also covers showcasing designs within products like MacBooks, zooming out for a broader view, customizing prompts for clarity, setting aspect ratios for different design aesthetics, and adapting existing designs. Additionally, the presenter suggests using different versions of Midjourney for varied inspiration and emphasizes the importance of iterating and experimenting with prompts to achieve the desired web design outcomes.

Takeaways

  • 🚫 Negative prompting: Use negative prompts to avoid unwanted elements, such as 'no laptop', to refine AI-generated web designs.
  • πŸ“„ Multi-prompting: Break up sentences into separate columns to treat each word or phrase independently for better results.
  • πŸ” Weights: Assign different priorities to words by using weights (e.g., 'weight 2') to emphasize certain aspects in the design.
  • πŸ“± Showcase in product: Include keywords like 'MacBook M1' or 'mock-up' to generate web designs showcased within devices.
  • πŸ”­ Zoom out feature: Use the zoom out feature in Midjourney 5.2 to get a broader view of the web design for better layout ideas.
  • βœ… Clear prompts: Create concise and clear prompts for better understanding and results from the AI, especially in newer versions.
  • πŸ“ Aspect ratio: Experiment with different aspect ratios (e.g., 4x3, 16x9, 9x16) to achieve desired web design layouts.
  • πŸ” Do it backwards: Start with a template and customize it by adding your own elements, like a background image, to the design.
  • πŸ‘€ Community inspiration: Browse the Midjourney website for community posts to gather inspiration and see what prompts worked for others.
  • πŸ”„ Use different versions: Test various versions of Midjourney (e.g., v4, v5, v5.2) to find the one that best suits your web design needs.
  • 🎨 Customization: Adapt and refine generated designs by making minor changes to buttons, text, colors, and removing unnecessary components.

Q & A

  • What is negative prompting in the context of web design using Midjourney?

    -Negative prompting is a technique where you add a negative keyword (e.g., 'no laptop') to your prompt to ensure that the AI-generated art avoids including elements that resemble the negative keyword, thus guiding the design towards the desired outcome.

  • How does multi-prompting help in creating web designs with Midjourney?

    -Multi-prompting involves breaking up different sentences or concepts into separate columns, which allows Midjourney to treat each part as a distinct element. This can help in generating designs that are more focused on specific aspects of the prompt, such as having a cupcake inside a cup rather than just cupcakes.

  • What is the significance of weights in multi-prompting?

    -Weights in multi-prompting allow you to assign different levels of priority to different words or concepts. By using a weight (e.g., 'weight 2'), you can emphasize a particular aspect of the design, such as making 'hot' more prominent than 'dog' in a web design prompt.

  • How can showcasing a website inside a product help in web design?

    -Showcasing a website inside a product like a MacBook or iPad can provide a realistic context for the design, giving you a better idea of how the website will look when viewed on an actual device. This can inspire new design ideas and help in creating a more user-friendly interface.

  • What is the 'zoom out' feature in Midjourney and how can it be used?

    -The 'zoom out' feature allows you to see more of the generated web design by scaling it up. It can be used to get different variations of the design layout and to explore how the design might look when viewed at a larger scale.

  • How does prompt engineering contribute to better web design results with Midjourney?

    -Prompt engineering involves crafting clear and concise prompts that accurately describe the desired web design. This can lead to better results as newer versions of Midjourney are better at understanding natural language and generating more relevant designs from precise prompts.

  • What is the role of aspect ratio in web design using Midjourney?

    -The aspect ratio determines the width-to-height ratio of the generated web design. By setting a specific aspect ratio (e.g., 4x3 or 16x9), you can control the orientation of the design, which can influence the layout and the overall look of the website.

  • Why might doing it backwards, starting with a website template, be a useful approach?

    -Starting with a website template and then customizing it to fit your design vision can save time and provide a solid foundation for your web design. It allows you to focus on adding your unique style and aesthetic elements, rather than starting from scratch.

  • How can browsing community posts on the Midjourney website aid in web design inspiration?

    -Browsing community posts can expose you to a wide range of designs generated by other users with their prompts. This can serve as a source of inspiration and help you understand how different prompts can lead to varied design outcomes.

  • What is the benefit of using different versions of Midjourney for web design?

    -Different versions of Midjourney may have been trained on different datasets, which can result in unique design styles. Using various versions can provide a broader range of design inspiration and help you find the most suitable style for your project.

  • Why might the results from a copied prompt differ from the original?

    -The results from a copied prompt might differ due to several factors, including the version of Midjourney being used, the specific training data that version has been exposed to, and any slight variations in the prompt that could change the AI's interpretation.

Outlines

00:00

🎨 Negative Prompting and Multi-Prompting Techniques

The first paragraph introduces negative prompting as a method to refine AI-generated web designs. It explains how to use negative prompts to avoid unwanted elements, such as a laptop in a web design prompt. The speaker then demonstrates multi-prompting, which involves separating words in a prompt to generate more focused results. An example is given where the term 'cupcake' is split into 'cup' and 'cake' to create a more literal interpretation. The paragraph also discusses the use of weights in prompts to prioritize certain words over others, influencing the AI's focus in the generated designs.

05:01

πŸ“š Book Announcement and Aspect Ratio Utilization

In the second paragraph, the speaker announces the release of their book, 'Enhance UI,' which covers essential graphic design topics not typically taught in web design courses. The book is available on Gumroad and includes video tutorials, exercises, and more. The paragraph then shifts to discuss the use of aspect ratios in web design prompts to control the layout and orientation of the generated designs. The speaker shares their findings that more vertical aspect ratios tend to produce better-looking web designs, resembling portfolio presentations.

10:02

πŸ” Zoom Out Feature and Prompt Engineering

The third paragraph explores the 'zoom out' feature in Mid Journey 5.2, which allows users to see more of the generated web design by applying different scaling factors. The speaker also mentions custom zoom with remix, a feature that lets users add more prompts while zooming out. Prompt engineering is then discussed, emphasizing the importance of clear and concise prompts for better results. The speaker provides examples of how adding descriptive paragraphs to prompts can guide the AI to generate specific design elements, such as a full-screen hero image with a call-to-action button.

πŸ–₯️ Adapting Designs and Version Exploration

The final paragraph describes a process of adapting an existing web design template by changing the background image to one generated through Mid Journey. The speaker details how they created a visually appealing background using the San Francisco bridge prompt and adapted it to fit the design of a remote work website. The paragraph also touches on the use of different versions of Mid Journey for design inspiration, with the speaker sharing their experiences and preferences for various versions and how they can be used to generate unique and interesting web designs.

Mindmap

Keywords

πŸ’‘Negative Prompting

Negative prompting is a technique used in AI art generation where specific elements are intentionally excluded from the output by adding a negative keyword to the prompt. In the video, the speaker uses negative prompting to avoid generating images of laptops and instead focuses on generating web designs for automotive services.

πŸ’‘Multi-Prompting

Multi-prompting is a method that involves using multiple prompts or keywords to guide the AI in generating more specific or desired outcomes. The speaker demonstrates this by creating a prompt for a web design of an online cupcake store and then refining it to include 'cup' and 'cake store' separately to get designs that better match the intended concept.

πŸ’‘Weights

Weights are used in AI art generation to assign different levels of importance to various elements within a prompt. By increasing the weight of a keyword, the AI is signaled to prioritize that aspect in the generated design. In the video, the speaker uses weights to emphasize the word 'hot' over 'dog' to achieve a design that focuses more on the heat element.

πŸ’‘Product Showcase

A product showcase involves presenting a website design within the context of a device such as a MacBook or iPad. The speaker discusses changing prompts to include keywords like 'MacBook M1' to generate designs that showcase the website as it would appear on a specific device, which can be useful for marketing or design inspiration.

πŸ’‘Zoom Out

The 'Zoom Out' feature allows users to expand the view of a generated image, providing a broader perspective of the design. The speaker uses this feature in mid-journey 5.2 to see more of the web design for an accounting and tech services company, offering different variations and inspiring new layout ideas.

πŸ’‘Custom Zoom

Custom Zoom is a feature that enables users to zoom out of an existing image while adding more prompts for further refinement. The speaker illustrates this by adding 'M1 MacBook' and 'laptop' to the prompt, resulting in a web design that is showcased within a laptop, providing additional design inspiration.

πŸ’‘Prompt Engineering

Prompt engineering is the process of carefully crafting prompts to elicit the desired outcome from the AI. The speaker emphasizes the importance of clear and concise prompts, and how newer versions of mid-journey respond better to well-structured prompts, leading to improved AI-generated designs.

πŸ’‘Aspect Ratio

The aspect ratio determines the proportional relationship of an image's width to its height. The speaker discusses how different aspect ratios can influence the layout and appearance of web designs, with vertical aspect ratios like 9x16 producing more appealing web design outputs in the context of the video.

πŸ’‘Do It Backwards

Doing it backwards refers to starting with an existing design template and then customizing it to fit specific needs or aesthetics. The speaker demonstrates this by taking a web design template and adapting it with a unique background generated from mid-journey, showcasing how to integrate AI-generated elements into web design.

πŸ’‘Community Posts

Community posts are shared works or prompts from other users within the mid-journey platform that can serve as a source of inspiration. The speaker highlights the value of exploring these posts to find different prompts and designs, which can be analyzed and repurposed for one's own creative projects.

πŸ’‘Different Versions

Referring to the different iterations of mid-journey, the speaker discusses how each version may have its own unique training data and capabilities. By testing various versions, one can gain a broader range of design inspirations and understand which versions are more effective for specific types of web designs.

Highlights

Negative prompting can be used to refine AI-generated images, avoiding unwanted elements like laptops in web design prompts.

Multi-prompting allows for breaking up different sentences to generate more targeted AI art.

Using weights in prompts can prioritize certain words over others in AI art generation.

Showcasing websites within a product like a MacBook or iPad can change the aesthetic and provide new design inspiration.

The 'zoom out' feature in Midjourney 5.2 allows for a broader view of web designs.

Custom Zoom with a remix in Midjourney 5.1 enables adding more prompts while zooming out for additional design elements.

Clear and concise prompts can lead to better AI-generated web designs, especially with newer versions of Midjourney.

Adding further explanation in prompts can help generate more specific web design layouts.

Using aspect ratios can influence the style of web designs generated by AI, with vertical ratios often producing better results.

Starting with a basic website template and customizing it with AI-generated elements can create a unique design.

Browsing community posts on the Midjourney website can provide a wealth of inspiration and examples for web design.

Different versions of Midjourney may produce varying results in web design, with some versions being better suited for specific styles.

Prompt engineering, or crafting clear and specific prompts, can significantly improve the quality of AI-generated web designs.

Natural language understanding has improved in Midjourney 5.2, allowing for more nuanced and accurate web design generation.

The aspect ratio 9x16 tends to produce more visually appealing and portfolio-like web designs.

Adapting AI-generated images into a website's background can create a cohesive and artistic design.

Minor adjustments to AI-generated designs, such as changing text, colors, and removing unnecessary elements, can customize the design to fit specific needs.

Testing different versions of Midjourney can reveal which versions are most effective for generating web design inspiration.