How to Create Beautiful UI/UX Website Designs Using Midjourney’s AI

Julius Ritter
4 min readDec 22, 2022

--

Prompt: Collection of the most beautiful websites for a modern start-up you can think of, ui/ux, ui, ux ar 3:2 — v 4 — q 2 -

You have probably heard of DALL·E 2 to create stunning AI art. I find Midjourney’s Beta image generator even more impressive, especially when it comes to generating webpages. This article thus lays out how to get access to the beta version and gives some tips on prompt engineering to generate the most stunning drafts! You might want to use these as a foundation for your Figma designs or even utilize certain elements.

Using Midjourney to create your own Webpage Designs

To use the Midjourney Beta, you will need to have a Discord account. You can sign up for a free account on the Discord website or download the app for your phone or computer.

Once you have a Discord account, go to the Midjourney website and select “Join the Beta.” This will take you to Discord, where you should select “Accept Invite.” Once you’re in, you’ll have access to a free trial (25 prompts). After the trial, you can choose to purchase a full membership. To start using the beta, go to one of the “Newcomer Rooms” channels on the sidebar and enter the command “/imagine” followed by your prompt.

The AI is fantastic at dystopian-looking creations. Prompt: Beautiful website for ChatGPT or Large Language Model with interactive, speaking AI + 8k + hyperresolution + design + graphics, ui/ux, ui, ux, UI — ar 3:2 — v 4 — q 2

The bot will then create four images based on your prompt. When the images are finished, they will be displayed in a new message. From there, you can select options like “Upscale” (U1, U2, U3 and U4 depending on the image you would want to enlarge) or “Variation” (V1, V2, V3, V4 to create similar versions of the selected variant). You can also refresh the images to get four new ones based on the same prompt. To save the images, you can either download them on mobile or open the original on a desktop. Keep in mind that certain words are not allowed, but otherwise you can use the bot to create and explore new images. Have fun!

Tips to get the most out of your creations

Here are some phrases you can use to sart with:

Beautiful {insert adjectives} website/webpage for/of...

Refine with:

... with {insert color or "gradient"} background
+ stunning design + hyper resolution + impressive + 8k

and/or

ultraresolution
depth of field, f/2 [if Bokeh-style is the goal]

End with:

+ user interface, ui/ux, ui, ux ar 3:2 --v 4 --q 2

“— v 4” describes the version of Midjourney and enhances the quality.

I created some example UI/UX frontend designs that used exactly that technique:

Beautiful landing page for space rocket company that enables space travel, dark, mystic, colourful, fire, astronaut + hyperresolution + design + graphics, ui/ux, ui, ux, UI -- ar 3:2 --v 4 --q 2
Almost too playful?
Beautiful website for climate tech start-up with green elemts + white background + stunning design + hyper resolution + impressive + user interface, ui/ux, ui, ux ar 3:2 --v 4 --q 2 
Gorgeous.
 Beautiful colourful web3 crypto fintech start-up website with gradients, design, ux/ui, ux, UI -- ar 3:2 --v 4 --q 2
Looks a bit too colourful in my opinion; kind of like a meme of the entire web3-design-scene.

Here, find a bit longer prompt for a stunning cinematic avatar image from the community:

Avatar 3d, Color grading, Depth of field, Hyper detail, Beautiful color, Crazy details, Intricate details, Beautiful color grading, Unreal Engine, Color grading, Photo shoot with 70mm lens, Depth of field, Shutter speed 1/1000, F/2, 32k, Super resolution, Megapixel, Pro Photo GB, VR, Massive, Backlight, Natural Light, Optical Fiber, Dark Light, Soft Light, Volumetric Light, Contre-Jour, Beautiful Lighting, Accent Lighting, Ray Traced Global Illumination, Optics, Glow, Shadows, Flicker, Reflections Ray Tracing, Lumen Reflections, Screen Space Reflections, Diffraction Grading, Chromatic Aberration, GB Shift, Scan Lines, Ray Tracing, Ray Traced Ambient Light Occlusion, Anti-Aliasing, FKAA, TXAA, RTX, SSAO, Shaders, OpenGL Shaders, GLSL Shaders, post-processing essing, post-processing, cellular shading, tonemapping, CGI, VFX, SFX, insanely detailed and intricate, hyper-maximalist, elegant, hyper-realistic clear, dynamic poses - @nazzgull (fast)

Do you have any prompt recommendations a well?

--

--

Julius Ritter

Passionate about Entrepreneurship, Education, AI and our careers!