How to use Midjourney when you are a designer? How to find crazy inspiration for your new UI?
In this article, we will try text-to-image AI tool to generate UI designs from plain text. Actually, in the phase of the research for a visual solution (when there is already an understanding of the user flow and all the business logic), such traditional solutions always helped me to find a great visual look: Behance, Dribble, Pinterest. All of them are filled with a large number of good designs that help to obtain the final design vision of the product, and, as a rule, it is very useful to view the libraries of the most successful designers for developing your own good taste and style.
From this year a new source of imagination came – Midjourney. Below I will try to describe my experience with a new resource that will help with ideas in any direction of visual design.
Table of Contents
- How to use Midjourney when you are a designer? How to find crazy inspiration for your new UI?
- Midjourney for UI Design Inspiration
- Midjourney App Icons Design Examples
- Midjourney Landing Page UI ideas
- Midjourney UI Dashboards ideas
Midjourney for UI Design Inspiration
Blind generation of UI
high-quality UI design, mobile bank mobile app, trending on Dribbble, Behance
By default, Midjourney generates four options for you to choose from. You can upscale options using the command U [and choose the number, they are placed from left to right]. Let’s see what the upscaled version of the first design [U1] will look like.
If you compare the previous version with the upscaled version, you may observe that not only does Midjourney enhance the size and quality of the image, but it also alters the layout slightly.
There are two noticeable issues with the images produced by the tool: nonsensical text and numbers, as well as distorted previews of people. Unfortunately, these problems are not restricted to UI screens but can also affect various other types of images generated by Midjourney.
Our initial attempt was not flawless, so you may be wondering how to refine our prompt for better outcomes. It’s important to note that there is no definitive strategy for composing prompts. You will need to experiment with various tokens to discover an optimal solution. Therefore, it’s best to attempt at least a few times before producing satisfactory results.
Let’s modify our prompt and observe how the tool responds. This time, we will mention “Figma”, will remove tokens “Dribbble” and “Behance,” and also add a parameter “ — q 2” to increase the quality of the images. So our prompt will have a look:
Food delivery app, mobile app, user interface, Figma, HQ, 4K, clean UI -- q 2
Wow, such versions look more like something we can use for inspiration. Let’s make another take on UI design using Midjourney.
Even after three attempts, the results generated by Midjourney require refinement from a human designer. However, these unprocessed outputs can still serve as a useful source of visual inspiration during the early stages of the design process. For instance, AI-generated images can be compiled into a moodboard to guide visual designers in creating an appropriate visual language.
It is worth noting that the prompt used for UI design was quite broad. To obtain more relevant results, it is important to specify particular screens, such as a bank search page, in the prompt using a token. But in any case, as a designer, I am both delighted and horrified by my choice of profession 😅
In my opinion, a more productive approach is to provide the system with examples you prefer and attempt to generate content based on those. This represents a second option.
UI Generation based on examples
If you find some interesting images or styles, you can upload such an image to Midjourney and then use it as a reference for your UI design. In this case, the result will be more predictable. For example, I really like one shot with white UI elements and I would like to try to make something based on it. So I click on the “+” button,
choose and upload the file, click on it in Discord, and choose – “Open in Browser”.
Then I use the link of the file in my Midjourney Prompt:
The final prompt can look like:
https://cdn.discordapp.com/attachments/1081573801483042826/1090595811500494878/cd9a5de0b33b236f44453740c5860d7d.png E-health mobile application user interface design ios clean, clear, airy, light, simple, front view
And the results:
These UI examples again cannot be used as ready-made elements, but they can provide additional ideas and design inspiration for the next project.
I have also a number of interesting prompts that will quickly help you start your own experiments in search of design inspiration.
Midjourney UI Design Prompts Examples
https://cdn.discordapp.com/attachments/1081573801483042826/1090595811500494878/cd9a5de0b33b236f44453740c5860d7d.png Smart home mobile application user interface design ios clean, clear, airy, light, simple, front view
https://cdn.discordapp.com/attachments/1081573801483042826/1090595811500494878/cd9a5de0b33b236f44453740c5860d7d.png Meditation mobile application user interface design ios clean, clear, airy, light, simple, front view
E-health mobile application user interface design ios, clean, clear, airy, light, simple, front view
https://cdn.discordapp.com/attachments/1052355703903371354/1052381984405594172/Screenshot_2022-12-13_at_7.30.13_PM.png App UI design, minimal, front view
https://cdn.midjourney.com/63366a49-7739-496a-b382-563652eed1e6/grid_0_384_N.webp A simple to do app ui and ux, front view, --q 2
Midjourney App Icons Design Examples
An app icon is a simple yet very powerful element because it communicates the idea of what the app is all about as well as creates a first impression to users. Even before users start to use a product, the icon is the first thing they see, and its level of craftsmanship directly impacts how users will perceive a product.
Since we are designing a mobile app, we need to clearly specify the token “iOS app” as well as mention that we want to see high-quality visual assets (tokens “high resolution” and “high quality”). And let’s imagine our app is about food delivery, we might want to mention one particular type of food (“burger”).
/imagine icon for iOS app in high resolution, burger, high quality, HQ -- q 2
Although the style employed by Midjourney for icons is impressive, it may not be suitable for an actual project as many designers prefer using minimalist icons. Therefore, let’s attempt a second design by modifying the prompt slightly. To communicate our preference for minimalist icons, we need to use tokens like “minimalism” and “flat design” to indicate to the AI that we desire simplistic icons.
/imagine icon for iOS app in high resolution, burger, high quality, minimalism, flat design -- q 2
Let’s clarify, our burgers, for example, this is a premium product, let’s add a couple of keys
/imagine icon for iOS app in high resolution, luxury minimal style, burger, high quality, HQ --q 2
Options 3 and 4 stand out from the rest and can be used as ideas for further development of the new product. Let’s try to get away from specifics and get broader examples.
/imagine Beautiful application icon for a food delivery app, design, ux/ui, ux, ui --v 4 --q 2
The first and last options look interesting. So it seems that the service is very convenient for creating all sorts of icons that can be polished by the hands of a graphic designer to the desired look or used as a mood board for something more targeted.
Midjourney Landing Page UI ideas
/imagine Beautiful landing for a travel website, design, ux/ui, ux, ui, behance, dribbble --ar 3:2 --q 2
Midjourney UI Dashboards ideas
/imagine Beautiful hq dashboard, design, ux/ui, ux, ui --q 2 --ar 3:2
/imagine Beautiful hq dashboard, design, starwars ships, graphs images and stats, ux/ui, ux, ui --v 4 --q 2 -
To make our analysis more specific, we will generate UI assets for a particular product type (food delivery app).