Text-to-image AI tools like Midjourney, Dalle-2, and Stable Diffusion can generate images from plain text. Nowadays the web is filled with AI-generated images, however the query is, “Can text-to-image tools may be used for UI design?”
In this text, we are going to see how AI tools can cope with regular UI tasks comparable to creating:
- UI screens
- App icons
- Product images
- Logos
- Mascots
To make our evaluation more specific, we are going to generate UI assets for a selected product type (food delivery app).
This text doesn’t attempt to persuade you to make use of AI tools. It’s a pure experiment that shows what AI tools are able to and what UI assets they’ll generate.
This text can be available in a video format:
Midjourney is an internet text-to-image tool. To make use of Midjourney, you must join Discord. Visit https://www.midjourney.com/, click Join the Beta and follow the instructions to create your account.
When you try this, you possibly can join any channel with the prefix “newbies-” and begin generating images by typing
/imagine [what you want to generate]
Crucial thing that we want to do when working with AI tools is to write down clear prompts. A prompt is a text string that you simply undergo an AI tool in order that it might generate a picture for you. The prompt should clearly specify what you need to see.
The higher you articulate your intention, the more relevant result you’re going to get from AI.
When writing a prompt, take into consideration the way you will describe your design to an actual person and write down a precise sentence. Turn this sentence into tokens (short phrases separated by a comma).
The tokenized format is best for Midjourney since it helps you trim all unnecessary words while keeping essential contextual information.
For instance, within the context of a food delivery app, the tokenized prompt is likely to be:
/imagine high-quality UI design, food delivery mobile app, trending
on Dribbble, Behance
By default, Midjourney generates 4 options so that you can pick from. You may upscale options using the command U[number]. Let’s see what the upscaled version of the primary design will appear like.
In case you compare the upscaled version to the previous version, you would possibly notice that Midjourney doesn’t only increase the scale and quality of the image but it surely also barely modifies the layout. For instance, the upscaled version doesn’t feature a red button within the top-left corner of the screen.
You likely notice two significant problems in the pictures generated by the tool: gibberish text and corrupted food preview images. Unfortunately, these problems are relevant not just for UI screens but for a lot of sorts of images generated by Midjourney.
Our first take wasn’t perfect, so you would possibly wonder the best way to modify our prompt to realize higher results. It’s price saying that there isn’t any optimal strategy for writing prompts. It is advisable experiment with different tokens to search out an optimal solution. That’s why you need to aim for at the very least a couple of tries before you provide you with an honest output.
Let’s modify our prompt to see how the tool will react to it. This time we are going to mention “Figma” because we are going to likely need to use the assets within the design tool.
/imagine food delivery app, user interface, Figma, Behance, HQ, 4K, clean UI
Let’s see what the upscaled version of the primary design will appear like.
This version looks more like something we will use in design. The layout has a transparent visual hierarchy of elements.
Let’s make one other tackle UI design using Midjourney. This time we are going to remove tokens “Dribbble” and “Behance,” leaving only “Figma” but additionally add a parameter “ — q 2” to extend the standard of the pictures.
/imagine [what you want to generate] -- q
Here is our prompt
/imagine Food delivery app, mobile app,
user interface, Figma, HQ, 4K, clean UI -- q 2
The third option looks promising. Let’s upscale it to see more details.
You may see that the outcomes that Midjourney generates, even after the third try, can’t be used without refinement from a human designer. Nevertheless, this raw output may be very helpful throughout the early stages of the design process since it serve a visible inspiration. For instance, it’s relatively easy to create a moodboard of AI-generated images and use it as a reference for visual designers to create a correct visual language.
It’s also vital to say that we’ve used a really general prompt for UI design. If we wish to see a selected screen (comparable to a restaurant search page), we must always clearly specify it in a prompt as a token in order that the system can get us a more relevant result.
Imagery is photos and illustrations utilized in various parts of a product. Imagery is integral to user experience since it communicates essential information to users and sets the correct mood. Finding the correct imagery may be difficult during product design, so let’s see if Midjourney will help us with that.
App Icon
An app icon is a straightforward yet very powerful element since it communicates the thought of what the app is all about in addition to creates a primary impression to users. Even before users start to make use of a product, the icon is the very first thing they see, and its level of expertise directly impacts how users will perceive a product.
Since we’re designing a mobile app, we want to obviously specify the token “iOS app” in addition to mention that we wish to see high-quality visual assets (tokens “high resolution” and “prime quality”). And since our app is about food delivery, we’d need to mention one particular form of food (“burger”).
/imagine icon for iOS app in high resolution, burger, prime quality, HQ -- q 2
As you possibly can see, Midjourney generated a set of ultra-realistic icons. Let’s upscale the second option.
The style that Midjourney uses for icons is great, but it surely may not work for an actual project because many designers prefer to make use of minimalist icons. Let’s give it a second try using a rather different prompt. We want to say tokens like “minimalism” and “flat design” to signal AI that we wish to see easy icons.
/imagine icon for iOS app in high resolution, burger,
prime quality, minimalism, flat design -- q 2
Now the output looks like something we will use in an actual project. Let’s upscale the primary option.
Product images
Product images are images that we are going to show on product pages. Since we design a food ordering app, our image will probably be photos or illustrations of food. Let’s ask Midjourney to generate images for us:
/imagine burger, prime quality picture, high resolution, HQ, 4K -- q 2
Midjourney generated solid images, but they’ve one major drawback — they’re placed on a dark background, and this could be a problem because it’ll require extra work to extract an object from the background. But we will use a straightforward trick — ask Midjourney to make use of a transparent or white background:
/imagine burger on a transparent background, prime quality,
high resolution, 4K -- q 2
The primary image looks great; let’s upscale it.
Now, all we want to do is to remove the background from this image. To do this, we will use online services like Remove.bg. Upload the image to removeb.bg and download the ready-to-use visual asset.
Promo illustrations
Promo illustrations are versatile visual assets that may be used contained in the app or on a promo website. Let’s see if Midjourney can create an honest illustration. We wish to speak the concept our food is delicious. So the prompt we offer is:
/imagine completely satisfied man eating a burger, high resolution, prime quality illustration
The cool thing is that the pictures are generated in numerous styles — from watercolor painting to highly realistic photo illustration. But it surely is obvious that Midjourney had a tough time pairing happiness with eating. Let’s upscale the second image to see if the upscaled version will look higher.
You likely notice one other problem with the pictures that Midjourney generates — the issue with legs and fingers. The tool often adds an additional leg or finger when it generates images of individuals. Yet, in our example, the tool removed fingers and modified the human hand to make it appear like a claw.
Logo
A logo is a core element of branding. In relation to logo design, we have now to make sure its meaning is evident to customers and the emblem itself is memorable. The beauty of Midjourney is you possibly can ask the tool to generate images in a selected style. In relation to logo design, we will follow the form of famous graphic designers comparable to Saul Bass, who is thought for designing posters for movies like Vertigo (directed by Alfred Hitchcock).
Here’s what Midjourney creates for a prompt:
/imagine minimal logo of a burger, graphic form of Saul Bass
Midjourney indeed uses some elements of Saul Bass’s style, comparable to typefaces and color scheme, yet the end result doesn’t appear like something from his works.
Mascot
A mascot is a graphical object used to represent a business. A well-crafted mascot helps people remember a brand and communicates a certain mood. Let’s ask Midjourney to generate a picture of a mascot for a food delivery company mentioning a selected style (Japanese).
/imagine easy mascot for a food delivery company, Japanese style
Midjourney generated a couple of nice examples of mascots. But just one example may be used with minimal modification (fourth option).
No. At the least not straight away. The outputs the tools generate are very rough and sometimes require refinement from designers. Midjourney can be very depending on the prompt (the standard of output it provides can depend drastically on the prompts you provide).
Does it mean this tool has no place within the designer’s toolkit? No. The tool may be helpful throughout the early phases of a product design process, comparable to ideation and visual exploration. Midjourney may be especially useful for moodboarding. It may help a team to match a variety of visual styles before they’ll commit to at least one particular style.
Originally published at babich.biz
