🌱 sapling
a place for interesting concepts
How to Build the Best Midjourney Web Designs (with Prompts)
January 19, 2023

By now, I've likely generated over 200 web design images using Midjourney. The best way for me to explain how to engineer prompts is to follow these steps that I've created and use in my own web design generation process. If you want to skip this part and go to the examples, please scroll below.

1. Start out with a basic prompt defining the purpose and the features you may want on this website. For example, "portfolio website with a login form and email signup." Run this to make sure Midjourney is generating a website similar to what you had in mind. Remember to be specific.

2. After getting the functionality out of the way, start adding attributes such as color, texture, patterns, and other things you want to decorate your website with. You can say something like "blue color scheme," "a style with a lot of plants," or "rounded edges."

3. Try adding descriptors. Use words like "beautiful," "amazing," "stylistic," "unique," or any other adjectives that you can think of. You may also try addinng "feeling" verbs. Use sentences like "loads fast" or "navigates easily". Although it may seem silly, these words actually make a difference. It might just be the way they trained the model.

Finally, remember to have fun and be creative! The more you enjoy the process, the more satisfying the results will be.

Here are some real-life examples I came up with and their associated prompts. Sometimes finding the right image is like panning for gold or mining for silver. You need to keep repeating and tweaking the prompt until you get the perfect one.

A professional web page

Prompt: "Professional web page with a clear and intuitive navigation structure, a clean and uncluttered layout, fast page load times, optimized images and graphics, a search bar, accessible, easy-to-read text, consistent branding and design throughout the site, clear calls to action, integration of social media and other forms of engagement, accessibility features to support users with disabilities"

Midjourney is surprisingly good at creating professional-looking websites. This website has elements of everything: a logo, a header bar with links, a professional image, a sign-up form, an about description, and a footer. It's clean, elegant, easy to read, and uses colors that match well with the overall professionalism of the website. This could easily be a site for a big health company or even for the government. The extra parameters we give the prompt is critical to create a website with all the requirements we may have in mind. Things like easy-to-read text and accessible UI may seem obvious to us, but may not be to Midjourney.

Personal portfolio website with Japanese themes

Prompt: "Portfolio website with japanese themes"

Despite its seemingly uncomplicated prompt, creating this page was a challenging task because I had to cycle this prompt over eight times (thank you, concurrency). But amazingly, we can see that the elements on this page are meticulously arranged in such a way that all of the information is contained within a single page. This is a skillful accomplishment for Midjourney. The font and colors used in this composition are subtle and tasteful. Everything blends seamlessly with the intended theme of a Japanese-inspired portfolio page. The only minor flaw I observed was the umbrella on top of the woman's head, but it was only noticeable upon close examination.

From: 13 Portfolio Website Inspirations Generated by Midjourney

Fansite for a video game

Prompt: "A modern message board webpage, with a color scheme, clean design, clear navigation, search bar and filters, user registration and login"

This is a complex design that includes a header, an image, and what appears to be user-generated content divided into sections below the image. There seems to be something like a timeline or an active chat on the right, and more informative content in the center. The colors are well-coordinated and tie into the overall theme of the website, which reminds me of a fan site for a video game or something similar. I am impressed with the header, in particular, which features a distinct logo, some links, and a search bar.

Shopify template for bags

Prompt: "a stylistic e-commerce, shopify site, with a color scheme, many product offering, search bar and filters to help users find products easily, shopping cart and checkout process that is secure and easy to use, clean and uncluttered layout, fast page load times"

This webpage generated by Midjourney was the biggest surprise of them all. It is one of the best Shopify templates I have ever seen, even among those created by real designers. I know this may be a controversial statement, but I truly believe it to be true. This is clearly a shopping site for bags, but the way they are arranged is so intentional, and the use of appealing colors would make anyone want to purchase any of the carefully arranged bags on this website.

A airy, clean home page

Prompt: "Website, a minimalistic clean splash page with simple nature theme"

This is a design that is so simple, clean, elegant, and relaxing. It uses basic colors, shades of yellow, creating a light, airy feel, as if you can take a deep breath of fresh, clean air while looking at it. The typeface is appropriate for the overall theme of the page, and UI elements like the button blend in seamlessly.

From: 15 Web Design Concepts Using Midjourney AI

A warm tablespread splash page

Prompt: "Website splash page with warm colors and theme"

This design features full coverage of the page with warm, image elements. It could easily be a page for a culinary artist or a restaurant and is executed masterfully using warm colors. The images of the food are so realistic that they make you want to cook with the spices on the breadboard. The use of typography and color is incredibly well-coordinated.

Magazine news page with incredible imagery and type

Prompt: "A modern news website with beautiful type and photography"

Sometimes the simplest prompts result in the most sophisticated outputs, and this design is clear proof of that. This beautiful web page, featuring deep, illustrative, and vivid photography, and typography appropriate for a news website, was rendered amazingly using this simple prompt. The header, in particular, is reminiscent of a newspaper and other major news websites that are online today. I thought this output was amazing.

Minimalist

Prompt: "A minimalistic webpage, with a color scheme, clean design, clear navigation, fast loading times"

I wanted to end this with a very simple example. Of course, Midjourney is also capable of producing very nice minimalistic designs. I actually think this is a good way for beginners to learn how to engineer Midjourney's prompts in order to achieve the desired design. Once the design is right, you can add colors and other attributes as I explained before providing these examples. Sometimes, a minimalistic website may be what you want. They say that simplicity is the best way to do things, and maybe that rings true with Midjourney.

I truly appreciate that you reached the end. Thank you for reading, and I hope you learned something out of this page. Here are some products that I recommend as a web developer to help you get started. I only recommend high quality products:

• Bose Noise Cancelling Headphones 700 - The best noise cancelling headsets rated by NYTimes to keep you in the zone.
• Don't Make Me Think by Steve Krug - One of the best-loved and most recommended books on UI development, every web developer must have one.
• Keychron Q3 Mechanical Keyboard - A brand that makes reliable, ergonomic, efficient keyboards. Perfect for all-day coding.
• Herman Miller Aeron - The best chair in the world. A good chair is one of the most important things for who works on the computer.
• Wacom Intuos Pro Drawing Tablet - A professional, precise drawing tablet for your designs.

If you'd like your own custom website concept or have something fully implemented, please reach out to me at my personal Discord below. I am a full-stack web developer with deep background knowledge who can help bring you amazing solutions for your brand growth.

For more, follow @sapofmidjourney - my Midjourney experimental Instagram account. Please send me messages and suggestions.



---

< Back to journals • Contact me