How I redesign a website using Midjourney

I’m excited about generative AI tools like ChatGPT or Google’s Bard to help me speed up mundane tasks when developing WordPress sites and plugins or writing texts. I have done all this for years and know what a good result looks like. Generative AI helps me to get there quicker and even learn things on the side. But what about the things I was never good at and had to rely on colleagues to do from the start, like layout and design?

Since I first tested generative AI tools for creating images, like Midjourney, Stable Diffusion, or DALL-E, I had the idea to use this to (re)designing one of my websites.

This article shows one approach I made toward a complete redesign of my German travel site, slowakei-reise.de. You will see the tools and prompts I used and the challenges I had that brought the project to a momentary halt.

Frontend designers and hobbyists will get a lot of valuable ideas from this. If you have a business, it will be quicker and cheaper if you hire a professional for help, as I do with many of my commercial projects.

The challenge

I know when I like an image and design. But that is still a large step from creating them. I also know that a bunch of nice-looking images or a color scheme does not automatically make an excellent overall design.

Anyway, I am curious and courageous enough to give it a try now that image generation seems a lot easier.

More than ten years of developing and maintaining websites still gave me a decent understanding of what I need. I intend to work on the following tasks and see if and how they’ll fit together:

1. Generate a base image I like (as a logo?) for the new site.
2. Generate new featured images with a consistent style for different topics.
3. Extract the color scheme from the images and apply it to the rest of the site.

Spoiler: It is easy to get a quick win, like when you have a rather plain-looking post or page that suddenly gets a nice logo and featured images. See the comparison of one of the main sites (about how to travel to Slovakia) before and after adding a logo and featured image with matching styles created by Midjourney.

The real challenge lies in more complex pages with multiple images and functional elements in different styles, like the homepage displayed in the following screenshot. There is no logo, no favicon, and some roughly styled elements. I know, it’s my fault.

Let’s see which tools I used to change that layout and which tutorials and manuals I found helpful.

Tools and Resources

The tools I am using here:

• The WP Staging plugin creates a copy of the live site so that I can experiment freely.
• Midjourney to generate images.
• Coolors to extract the color palette from a given image.

The tutorials and docs that helped me most:

• List of parameters for Midjourney
• CONSISTENT Styles for Storytelling in Midjourney (Youtube) to learn about consistent styles in Midjourney

I am trying to make as few changes to the site as possible not to make this project larger than it is. This also means keeping the Pocono theme from ThemeZee, even though it wasn’t updated for a while, and they have much better themes with block support nowadays.

Creating a logo with Midjourney

I started playing with Midjourney in March 2023. This was when version 5 was new. Now, in September 2023, version 5.2 is the latest.

The logo I am basing my new design on was created in March. I liked it but had no time to work on the overall design process.

These are two prompts I used over and over again.

create a favicon for a website about traveling to and within Slovakia

a very simple favicon for a website about traveling in Slovakia, iconic, --q 2

The second one quickly came up with the following set of ideas.

I liked the warm colors of the first idea on the top left. Then, I asked Midjourney to generate variations of if.

Eventually, I settled for the following image as a basis for the website’s future logo and general style.

Keeping the style in Midjourney

I have found four methods for generating images with Midjourney based on a specific style.

• Creating variants of already generated images
• Adding all relevant style information to the prompt
• Combining variants and prompts
• Uploading the baseline image and using the --seed parameter

I use Midjourney to generate featured images from my chosen logo in the following examples. Let’s see how this goes.

Creating variants of the same image

I learned the basics of reusing an already generated image to generate more images in the same style in Midjourney from this video on YouTube.

To get started, type /settings in the Midjourney chat field. Now, make sure to have “Remix mode” enabled.

Remix mode allows you to change your prompt whenever creating a variation. Otherwise, Midjourney would reuse the previous prompt, which will not change the image’s content.

Now, I go to the original image and look for the “Make Variations” button.

Once I clicked on it, I could enter the prompt for the new image.

Low vs. High Variation Mode

In the linked video, they suggest using “High Variation Mode.” This will give Midjourney more freedom to divert from the previous style and shape. See the results from “Low Variation Mode” vs. “High Variation Mode”. The first wasn’t brave enough to remove the circle.

a train going through the mountains in Slovakia, iconic --ar 8:5

I am not doing it now, but I suggest you test the various options for “Stylize.”

Tip: Midjourney is a single threat in Discord. When you reuse the same image over and over as a basis, as I do, you can either use the “Pin Message” option behind the three dots at the top right and then access the pinned images through “Pinned Messages” or go to your Midjourney profile and mark the image as favorite.

While the generated images looked nice, I found them too far from my envisioned style. I know that the prompt is the key here. So, next, I focussed on an excellent prompt to get consistent results before eventually combining both methods.

Using consistent prompts

To use plain prompts to generate consistent results, I eventually ended up adding the colors and style descriptions. Let’s see how we can get those from our original image.

Getting the color palette

Since Midjourney does not know the hex values of colors we web developers are familiar with, one has to find words for them.

I used the free service of Coolors to do this. After uploading the logo, it gave me the color palette back. See the names of the colors printed in small in the second line.

As you will see later, I will use the color names in my Midjourney prompts and the hex values in the website’s layout later.

Using /describe in Midjourney

Some time after my initial tests of Midjourney, they introduced the /describe command.

When I enter /describe, Midjourney asks me to upload an image. It will then generate four descriptions of this image.

I did so with the original logo, and Midjourney gave me a great insight into its vocabulary and possible styles.

Let’s use the information from both tools now to create our prompt.

Writing a reusable prompt

I used the information from above to write a reusable prompt that would, hopefully, generate images with a consistent style while allowing me to vary the content.

The basic structure would be

[elements on the image] [style] [color] [options]

This is a sample prompt I came up with.

a train going through the mountains in Slovakia, in the style of vintage graphic design, naturalistic colour palette, ash grey, white, russian blue, brown sugar, iconic --ar 8:5

Note: --ar 8:5 is the aspect ratio.

The description of the content on the image is the same as I used above when creating variations from the logo. This prompt, however, does not use any reference image.

Let’s take a look at the original image again. Remember, I didn’t make any reference to it. Everything on the new images comes from the prompt alone.

Not super bad, but without having the right vocabulary to describe it, I am not feeling a great match between the logo style and the generated images. Tweaking the prompt a bit more might help, but I moved on to the next strategy combining a base image and prompt.

Combining variations and prompts

Now that I have seen decent results with variations or prompts, let’s try them together.

So when using “Make Variations” for the original image now, I enter the very explicit prompt from the previous step.

a train going through the mountains in Slovakia, in the style of vintage graphic design, naturalistic colour palette, ash grey, white, russian blue, brown sugar, iconic --ar 8:5

I ran the remix+prompt three times in a row and included all results. As you can see, the images are looking very consistent.

I think I’ve found my future workflow here.

To recap:

1. Select and reuse the same image as a baseline
2. Extract the colors and style description from the image
3. Write a reusable base prompt
4. Create variations from the base image and include a reusable prompt

I didn’t show you all the experiments and prompt variations. I removed the terms “vintage” or “iconic” from the style description in some of the images I will show you later.

Keeping the style using –seed for external images

Back in March, I tried generating featured images based on the --seed parameter. For this, I upload an image that doesn’t have to come from Midjourney and then added my prompt.

The first result I got based on the image seed for the logo above and the prompt

traveling to Slovakia by train, ash grey, white, russian blue, brown sugar, sunset, iconic --seed 123 --ar 8:5

As you see, the weak spot here is that Midjourney took too much inspiration from the circle shape of the logo and, as in the top right image, came up with weird ways to add it.

Now, in September 2023, I gave seeds another try. With “High Variante Mode” enabled, Midjourney version 5.2, the same prompt as above, and my logo as a seed, the result looks much different.

Wow, that is a big difference in quality within just a few months.

Does this work the same as creating variants using Remix Mode as I did above? I was curious enough to give it a try.

a train going through the mountains in Slovakia, in the style of vintage graphic design, naturalistic colour palette, ash grey, white, russian blue, brown sugar, iconic --seed 123 --ar 8:5

I ran this prompt three times. Interestingly, Midjourney always gave the same output unless I changed the prompt.

To create variations based on the seeded image, I then use the option to create variations of the newly generated image without the --seed parameter. This also made good alternations, though we slowly derived from the style I originally envisioned.

Variations or Seeds?

I had the impression that variations of an image created slightly different styles than using the seed parameter. Both were good, though.

For my example, I found the variations more appealing and straightforward to use than uploading an image and getting its seed number first.

You should be fine as long as you stick to one routine.

Now, let’s see how the new images look on my website.

Testing the new style

My experience told me that even though I liked the new logo and images, this doesn’t mean they will look good on the website. These are the steps I did.

• Create a copy of my website for testing
• Add the new logo to the header
• Test how the new featured images look on archive pages
• Test a general block of featured images
• Test the duotone option for existing images

So, I created a copy of the website using the WP Staging plugin. I have WP Staging Pro, but their free version works fine for testing something.

New logo and article lists

My website didn’t have a logo. Many pages and posts also used a default featured image. So, just uploading new versions of both significantly impacted the look and feel.

This was an easy win.

I have a dedicated page for each means of transportation, which I am now linking to on this landing page. I used the Query Loop block for this with the Cover block to show the featured images I uploaded for each page.

Unfortunately, the Cover block couldn’t be adjusted – is this a theme thing? The color of the link is also not ideal but could be easily changed if I decided to stick with this new image style. If I chose to keep this block, I’d probably convert it into Columns with individual images.

My goal here was to see how the various images I generated for each means of transportation work together. Despite the unfortunate image format and the automatic cropping, I find the style consistent.

Using duotone for existing featured images

Part of the redesign idea was to do it in small steps and not replace all images simultaneously. I saw the Duotone option as a compromise here. This feature comes with all image-related blocks and allows you to colorize all images using just two colors.

This is where I used the logo’s hex values of the new primary colors.

My try wasn’t successful, so I am not going deeper into the duotone feature here. See the following draft with featured images colorized in two of the primary colors.

I have played with more combinations, but none of them looked appealing. So, I will probably take the time and replace at least the featured images of the latest articles with new ones matching the same style.

What’s next?

This was it. During the process, I realized that the new style wasn’t the right one for my site.

Many of the featured images I created looked too “vintage” in the style of the 1950s in the USA. The keyword “sunset” in the description also gave all images a very narrow focus.

This confirmed something I have seen in many generative AI tools, images, text, or videos. They have a very shallow understanding of niche topics. It is expected that when you think about my particular topic of traveling in Slovakia, it comes back to a few common topics. Mountains and castles are the most Slovak these models can come up with.

However, I am still very happy since my original goal was to learn more about these tools. My travel site was just the playground to run these experiments. Without such a purpose, I wouldn’t know what to try and quickly lose interest.

Can I redesign a website using Midjourney?

I am coming back to the original question. Can I redesign a website with Midjourney or other generative AI tools for images?

Yes, I can, but it still takes time and skills. These tools can be beneficial to generate a lot of images in a consistent style.

However, putting them together for a consistent look needs skill. If that is not your strength – as it isn’t mine – and you have a serious web presentation, then a skilled designer is still worth the investment.

Takeaways

Some general takeaways for creating consistent styles:

• Take the time to create a great base image and fine-tune the prompt.
• Stick with the Midjourney version. E.g., if I generated images using version 5.2 now, I should use that version even when newer ones come out.
• Play with all elements of the prompt. Later changes might have a large impact, like in my example, the keywords “vintage” and “sunset”.
• Stick with either seed or variations, but don’t mix them later.

Generating images with text in them

While wrapping up this text, I stumbled upon ideogram.ai, an image generator that can put text on the image.

I tried using the following prompt to see if it could generate a general header image for the site.

Website header image, TEXT at the bottom saying "Slowakei-Reise", travel, slovakia, in the style of vintage graphic design, naturalistic colour palette, ash grey, white, russian blue, brown sugar, iconic

I will leave you playing now …