Website design with AI

I'm not there yet, but if I wanted to build a WordPress website, I would of course want to use AI for the design. We are going to test that on our trusted AI platform. Meanwhile, at NightCafe Creator we can try even more versions of Stable Diffusion, so while we're testing one, we're also testing the other :).

Another surprise: when looking at some WordPress tutorials, it became clear that WordPress.com and the widely used Elementor plugin also have built-in AI support for writing texts and generating images. WordPress.com currently uses the tools of OpenAI, the maker of ChatGPT.

It took us a while to find the right wording, but with the following text we got hold of a website design (with Stable Diffusion 1.5):

professional WordPress website design for a Japanese Garden with clear menu, logo and map, screen print , Intricately Detailed, 8K Resolution, Trending on ArtStation, HDR, Perfect Composition

For the subject I chose 'Japanese garden', which immediately becomes clear on the screen, so that's good. It has a clear header (bar at the top) with the logo of the garden, a clear menu and a button that could say 'book now'. This is a regular design that can be built without too much effort. (Click on the image to enlarge.)

The next design is already more exciting, but also less user-friendly: the user has to scroll down for a menu and more information about this Japanese garden.

professional WordPress website for a Japanese Garden with clear menu, screen print , Intricately Detailed, 8K Resolution, Trending on ArtStation, HDR, Perfect Composition, cinematic, masterpiece, 3D 16K Octane Render, sharp focus, clear contrast, beautiful light shadows, CryEngine

To get more functionality on the opening screen we add 'logo and map':

professional WordPress website design for a Japanese Garden with clear menu, logo and map, screen print , Intricately Detailed, 8K Resolution, Trending on ArtStation, HDR, Perfect Composition, cinematic, masterpiece, 3D 16K Octane Render, sharp focus, clear contrast, beautiful light shadows, CryEngine

An opening screen like this would encourage me to stay on the website and scroll down or click on the menu.

With the same prompt and a different seed value, we come up with more options. This example puts a lot of emphasis on the photos of the garden, which is also an attractive design.

We took this design as inspiration for a website with a different theme (namely the National Hug Holiday) to see if that would change much. The changes are mainly in the placement of menus, buttons and texts. Below are four examples.

Small changes in the text can then have major consequences. Here comes:

National Hug Holiday professional WordPress website design with clear menu, logo and calendar , screen print , Intricately Detailed, 8K Resolution, Trending on ArtStation, HDR, Perfect Composition, cinematic, masterpiece, 3D 16K Octane Render, sharp focus, clear contrast, beautiful light shadows, CryEngine

All attractive designs.

So far I can conjure up quite a variety of designs with Stable Diffusion 1.5. What I have not yet seen is a design with a sidebar (a toolbar or menu on the left or right side), which I often use in tools I work with. So I'll try:

professional WordPress website design with black sidebar, clear menu, logo; screen print , Intricately Detailed, 8K Resolution, Trending on Behance, Dribble, ArtStation, HDR, Perfect Composition, cinematic, masterpiece, 3D 16K Octane Render, sharp focus, clear contrast, beautiful light shadows, CryEngine

Ah, no sidebar to be seen.

Let's use a higher version of Stable Diffusion, version 2.1. We use the same prompt and ask for a sidebar again:

professional WordPress website design with black sidebar, clear menu, logo; screen print , Intricately Detailed, 8K Resolution, Trending on Behance, Dribble, ArtStation, HDR, Perfect Composition, cinematic, masterpiece, 3D 16K Octane Render, sharp focus, clear contrast, beautiful light shadows, CryEngine

Mmm - still no sidebar. We can try again with different seed values, or a different image size, or...

We'll try it with an even higher version: SDXL Beta. This is from Stable Diffusion's latest line with more pixels, which is why it costs more credits. In theory you have to redefine which prompts work best for each new version, but in practice the old prompts work adequately enough - but not now.

Perhaps the concept of 'sidebar' is not yet sufficiently known in the training data, because we are only getting further away from home.

Then there is of course another solution: we generate a design without a sidebar, and add it ourselves later :).

The image at the very beginning of this blog and to the right was the result of the following prompt, created with SDXL 0.9 (the successor to SDXL beta):

professional WordPress website design with black sidebar, clear menu, logo; screen print , Intricately Detailed, 8K Resolution, Trending on Behance, Dribble, ArtStation, HDR, Perfect Composition, cinematic, masterpiece, 3D 16K Octane Render, sharp focus, clear contrast, beautiful light shadows, CryEngine

This one also did not give the requested sidebar.

We now generate a square design so that in practice a sidebar can be placed next to it. A website about cats for a change.

responsive Wordpress theme about cats, iridescent highlights, intricate and hyperdetailed, cinematic intricately designed, Intricate digital detail; 16K Octane Render photorealism sharp focus clear contrast beautiful light shadows

A minimalist design, also because we did not explicitly ask for menus and other functions. In this case, I would put the menu on the left so the cat's eyes would point it out to you. Would you also click on it immediately if you saw this in front of you?