Log in

Sign up

Webmaster's panel

WebWave.me
Monika Buchelt WebWave's author

Monika Buchelt

Updated: August 30, 2023

Reading time: 8 minutes

30 April 2023

Midjourney web design. How to use AI art in your website design?

Since the AI craze started in late 2022, I've been taking up the challenges of testing various AI tools and trying to find the answers if they apply to web design. I've already checked out ChatGPT for creating a website, and now it's time for Midjourney. 

As a reminder, Midjourney is an AI text-to-image generator. You access this tool via Discord, where you type in prompts to generate images. Recently version 5 of Midjourney has been released. Currently, it's one of the most popular AI tools. 

My goal was to find answers to the following questions:

  • Can you rely on Midjouney to create every image on your website?
  • How to write prompts for the best results?
  • Is Midjourney genuinely helpful in web design, or is it just a trendy tittle-tattle?

 

I gathered all my conclusions and observations in this article. If you're interested, you can also watch a video of me using Midjourney to create a website.

AI web design - How to create a website using AI tools

How I used Midjourney in web design?

 

At first, I decided to create a website for a yoga studio/yoga trainer. I picked this theme for one main reason - to find out how helpful Midjourney can be for a realistic, down-to-earth project and not just a conceptual mind riddle. 

The way I approached this challenge was to first use Midjourney as a source of inspiration for a website layout and aesthetic. Then, based on the results I got, I created a website outline for my project. It helped me to figure out what images I would need for each site section and understand better what images I was looking for. 

Once I had the website planned, I started generating images and building the website using WebWave drag and drop website builder

Try WebWave AI ->

Creating a website layout with Midjourney

 

As planned, I hopped onto the Midjourney to get some inspiration on how my website should look.

The first results that I got were a bit disappointing.
 

Midjourney web design - how to create ai website


Even though the newest version of Midjourney was supposed to generate more modern images compared to the previous version, the results I got didn't meet the bar. 

I polished my prompt and thankfully generated more satisfying results.
 

Midjourney web design - how to create ai website

 

Generated websites looked like something that could have been a yoga-related page. I liked the color palette and the idea of a hero section consisting of one big image and some adequate text. I also enjoyed the concept of a minimalistic navigation bar with the logo in the middle separating the menu in two.

Midjourney didn't manage to generate the full website. As much as I was able to get was 2 sections. It didn't bother me that much, though. The layout of the second section was clean and grid-based. I thought that it will suit a yoga project as it should reflect calmness, mindfulness, and harmony. 

 

AI-generated graphics for a website

 

After brainstorming with Artificial Intelligence, I managed to come up with a website outline for my ai-generated design. I was ready to replicate it with images. 

Hero section

For the hero section, I took direct inspiration from the Midjourney images. I needed to generate two images - a big landscape picture and the logo for the navigation bar. 

I started with the background image. In my head, it was a landscape at sunrise, looking very peaceful and inspirational. Once I got the one I wanted I also used it as a resource of a color scheme for this project.
 

Midjourney web design - how to create ai website


The design process of a logo icon was very quick. I already knew I wanted it to be minimalist and elegant and that's what I got on a first try.
 

Midjourney web design - how to create ai website

 

About me section 

For this section, I needed a big image depicting the yoga instructor. I wanted her to look professional and inviting. Unfortunately, Midjoureny struggled a bit with making people with correctly looking hands, but I eventually made it work. 
 

Midjourney web design - how to create ai website


I must admit that I'm really impressed that so far I managed to generate images that have stylistic harmony. 

Classes Section

For this one, I needed three images reflecting three different types of classes offered by this yoga studio. Remembering that AI sometimes scrambles with human bodies, I was a bit nervous. As it turned out, it was completely unnecessary and in no time I got what I wanted. 
 

Midjourney web design - how to create ai website


Yoga Camp section 

Here I imagined two pictures showing previous editions of the retreat. So once again I needed detailed photos of people doing yoga in stunning natural environments. 
 

Midjourney web design - how to create ai website


Online Store section 

I decided that my yoga studio also offers an online store. I wanted to display three main product categories on the homepages and needed the right images to serve as illustrations. 

Yoga mats, reusable water bottles, and aromatherapy and skincare products were the categories I was looking for and once again, Midjourney didn't disappoint me.
 

Midjourney web design - how to create ai website


Newsletter section 

The last section on this website was an invitation to the newsletter. I wanted to close it all off with once again a picture of a yoga instructor but this time in a yoga pose. 

I expected it to be a challenge for Midjourney. And I was right. I needed to spend a bit more time on this, but eventually got what I wanted and was ready to create my website.

 

Midjourney web design - how to create ai website

 

AI web design - can you create an entire website with Midjourney?

 

Is AI web design useful? Can you create an entire website with Midjourney? In my opinion, of course, you can. I want you to be able to judge the result by yourself, so here's the link to the finished site. 

Try for free ->

WebWave AI Writer

Generate your website copy with just one click.

Try for free ->

WebWave AI Writer

Generate your website copy with just one click.

Try for free ->

I think Midjourney, especially version 5, can provide very convincing images that can be successfully used in web design. The final page looks very cohesive. All images match in their tone and style. It is also very suitable for the theme of the website. 

To be honest with you, I doubted if Midjourney will be able to generate people in yoga poses that will not have completely discombobulated bodies. It needed some time to get it right, but it wasn't too long and for me, the results are amazing. 

From the top to the bottom, each image I used in this project is AI-generated and I can wholeheartedly say that the outcome doesn't shy away from the real photographs. 

 

Tips for writing Midjourney prompts 

 

It's important to remember that the key to getting such results is writing the right prompt. Here are some tips:

  • write in full sentences,
  • be creative and use many adjectives to describe what you want to get, be as specific as possible, and try not to use words like "awesome" or "pretty",
  • don't be afraid to ask ChatGPT for help with generating a text to image prompts,
  • don't forget to add the image specifications at the end of the prompt like --v 5 for version 5 of Midjourney (the default version is 4) or --ar 16:9 for the ratio,
  • read Midjourney's official guide on the prompts that you will find on their website.

 

At the bottom of every Midjourney image in this article, I put the exact prompt that I used to get those results. Feel free to check them out for some inspiration. 

 

Midjourney web design - hit or miss?

 

I think that Midjourney web design has a lot of potential and there are many ways you can make use of it. The tool itself is working better and better providing even more impressive results than ever. Instead of spending these resources on involving graphic designers into moving the needle for your website, you can use it for B2B SaaS SEO agency services and boost traffic to your AI-generated pieces of content – either written or visual ones.  

In general, the landscape of AI tools is growing and improving daily. And the solutions these tools offer are more and more comprehensive and useful. WebWave also notices the power of AI and has its own web design solution powered by this force. WebWave AI will be introduced in 3 parts - WebWave AI Writer for text generation (available now) and WebWave AI Website Builder 1.0 and 2.0 for website generation. 

But back to Midjourney.

When you have an idea in mind and you know what you want to achieve, it's a great solution to do it efficiently. Even though you have to wait a few minutes to get your results, it's still nothing compared to how long it would take to draw or photograph what you want. 

AI art is a great alternative to stock photography. You don't have to use the same images as everyone else and adjust your ideas to what is available. You can in fact generate the image you want and be sure that it is truly unique. No more bending your vision because of the lack of accessibility. 

However, without you, the designer, taking the role of a creative director, Midjourney is useless. Speaking from my experience, I also think that using it as inspiration, as I did with a website layout, is not the best idea. You still need to write the prompt to get the result and if you don't know what you want to make, you will not be able to write anything reasonable. 

Give Midjoureny a try and find out by yourself if you would like to include a tool like this in your creative process. 

 

FAQ.

What is Midjourney?

Midjourney is an AI program created by an independent research lab Midjoureny, Inc. Midjoureny is an example of generative artificial intelligence. It means that it's able to generate images from prompts - descriptions of what you want to generate. The first version of Midjoureny was launched in February 2022. Version 4 was released in November of the same year and brought spectacular attention and popularity to the tool. Currently, users can use the alpha iteration of version 5. 

Users can access Midjourney via their Discord server, but apparently, the work on the web interface is in progress. To generate images, you have to type the \imagine command and then the prompt. 

 

Is Midjourney free?

Midjourney does offer a free plan with very limited features. You get only 0.4hr/Lifetime of a fast GPU Time and you don't have the right for a commercial use of images. Premium Plans start from $10 a month (or $8 if billed annually). You get more GPU Time and the right for commercial use. You can also access the bot via Discord DM. 

 

Can Midjourney design a website?

Yes, Midjourney can design a website. However, it's a website builder or AI web developer so the website will not be functional. It can design a project that then you can recreate and enhance with your knowledge and skills using the right tool like WebWave drag and drop website builder. 

 

Can Midjourney create UI design?

The designs created by Midjoureny at least to some extent follow UI rules. The AI designs should be controlled by skilled UI designers so that they will be fully functional. AI tools can be useful in accelerating the design process by automating some processes. 

 

What are alternatives to Midjourney?

The most popular alternative to Midjoureny is DALL-E made by OpenAI the same company that created ChatGPT. Other alternatives include Craiyon, Stable Diffusion, Jasper, Writesonic, and Lensa. 

 

What is Midjourney web design?

Midjourney web design is a type of web design that incorporates AI art into the website's design. It utilizes generative AI and recommended design prompts to create stunning and unique website designs.

 

How can I use AI art in my website design?

 To use AI art in your website design, you can utilize Midjourney, a platform that offers AI-generated design templates. By integrating Midjourney into your design process, you can create a website design that matches your vision and showcases the capabilities of AI generative art.

 

What are some use-cases for Midjourney web design?

Midjourney web design can be used for various types of websites, such as portfolio websites, news websites, e-commerce platforms, and more. Whether you're a graphic designer looking to create a stunning landing page or an e-commerce business wanting a streamlined design, Midjourney can help you create the best web design for your specific needs.

 

How can Midjourney help me create a website design?

Midjourney provides a collection of 3000+ generative AI design prompts and templates that you can use as a starting point for your website design. By using these prompts and templates, you can streamline your design process and ensure that your website has a minimalist design, appealing typography, and a well-organized layout.

 

What is the recommended aspect ratio for a Midjourney website?

There is no specific recommended aspect ratio for a Midjourney website design. The aspect ratio will depend on your specific design preferences and the type of website you are creating. However, it is generally recommended to design for responsiveness and consider various screen sizes to ensure your website looks great on different devices.

 

Can Midjourney be used for creating a home page?

 Absolutely! Midjourney can be used to create stunning home page designs. You can explore the various design prompts and templates available on the platform and customize them to match your branding and content. By using Midjourney, you can create an eye-catching and engaging home page that will leave a lasting impression on your visitors.

 

Is Midjourney suitable for e-commerce websites?

Yes, Midjourney is suitable for e-commerce websites. The platform offers design prompts and templates that are specifically tailored for e-commerce businesses. You can create a minimalist design with a focus on product showcases, streamlined navigation, and a user-friendly shopping experience. Utilizing Midjourney can help you build the best Midjourney web design for your e-commerce store.

 

Can Midjourney help me with mockups for my web design projects?

While Midjourney primarily focuses on AI-generated design prompts, it can certainly help you with creating mockups for your web design projects. You can use the generated designs as mockups and customize them further using tools like Figma or other design software. Midjourney's generative AI designs can serve as a great starting point and help you streamline your mockup creation process.

 

Can I integrate a search bar into my Midjourney website design?

Yes, you can integrate a search bar into your Midjourney website design. Midjourney offers various design prompts that include search bars or you can customize the templates to add a search bar functionality. Adding a search bar can improve the usability of your website and make it easier for users to find the content they are looking for.

 

Can Midjourney help me create a minimalist design for my website?

Absolutely! Midjourney is a great tool for creating minimalist designs. The platform offers a wide range of minimalist design prompts and templates that you can use as a starting point. You can customize these designs further to match your branding and ensure a clean and streamlined look for your website.

 

 

AI web design tutorial
How to become a web designer
What is white label website builder

Other articles.

WebWave's logo

WebWave website builder is your AI-powered solution for building an online presence. Create your website in 3 minutes, add an online store or a blog, and grow your business. 

 

We created this website with WebWave.

 

Follow us on social media