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.
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.
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
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.
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.
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
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.
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.
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.