This past year, artificial intelligence, or AI, has been in the spotlight countless times, with many skeptical of what seems like the latest fad in tech. In reality, text prompted AI technology has been used for years across disciplines. Today, nobody denies the significant power of AI and automation tools when it comes to learning, work, career, or business. What about UI design powered by AI? You’ve probably heard of or even explored some popular tools such as Midjourney, Adobe Firefly, Kaedim 3D, etc., but would these AI tools assist a UI designer when working on a real client project? Here are some of our practical findings.
What are these AI tools?
We’ve already seen hundreds of these “text-to-image” AI tools in the design world: Midjourney, DALL-E 2, Adobe Firefly, Leonardo.Ai, LeiaPix, Kaedim, and more. Designers can create an account on any one of these tools and begin by typing in a natural “human” language. After a small wait, the tool will translate the prompts into AI-generated image results.
These text-to-image AI tools can:
- Create image artwork
- Understand natural language prompts
- Follow direct input from the user
Why Should Designers Learn to Use Them?
Good question! As UI designers, our routine work nowadays is pushing us to find ways to raise efficiency and precision to cater to our clients. Needless to say, finding ways to boost your UI design process is always beneficial. Here are just a few reasons why an AI powered tool might be just what you’re looking for:
- UI-generating tools are already trending among designers and clients alike. Your client may already be using them for their banners or icons! Rather than falling behind, staying on top of or even ahead of trends will help you understand your clients better.
- The resulting images can be more accurate to your client’s imagination whereas traditional stock photos often cannot represent the look or feel they want.
- Many generative tools are efficient, smart, and often copyright-free. While they can’t serve as part of your end product, the rapid creation and communication possible when using these UI images can really speed up your work and enrich your ideation.
How does it work to enhance UI design?
To illustrate, we’ll take a deeper look at Midjourney as the most popular weapon in our arsenal. We can incorporate AI tools into our UI process when it comes to:
- Product Images
- App Icons
- UI Icon Set
- Logos
- Website & App UI
- Mascots
- And more!
Midjourney - Kick off
Try visiting Midjourney yourself! If you join the beta and create an account, you can join any channel with the prefix “newbies-” to start learning alongside a community of other users. Once you’re in, try typing /imagine [your prompt here], and your journey will begin.
Below is an AI-generated “Washington Hold a Basketball” cartoon-style portrait created with Midjourney. After testing the tool out a bit, you likely won’t be surprised to find that in just seconds, the tool will deliver anything you can imagine.
Midjourney creates Product Images
For UI design, we can ask Midjourney to help us create main product image samples that the client wants to build. For example, a placeholder sneaker product image for your client’s online streetwear storefront. As you can see below, these are best used as rough drafts or inspiration to help your client visualize the bigger picture: their future site.
Midjourney creates App Icon
Another common scenario where we can apply Midjourney is when designing an icon for a newly launched app. The client wants a fancy and unique design, but more importantly, the icon needs to stick with the business’s brand identity and stay away from existing ideas within stock assets. Yes, we can certainly create the scripts and ideas one by one to deliver this to the client, but this can lengthen the process greatly. Designs typically face revisions and sometimes require extra communication to align your ideations with the client’s vision.
Now, thanks to the great power of AI tools, we can quickly provide AI design samples using the client’s own words. With the detailed sampled generated by AI, the client no longer needs to wait
Here are some great examples created for a hypothetical succulent e-commerce app:
It’s hard to believe these were all created by AI in the span of a few minutes! Your clients are likely just as surprised. With a revolutionary process and concrete samples of your initial idea, you and your client will be able to close in on the ideal design direction and improve the efficiency of your design procedure.
Midjourney creates UI Icon Set
I bet we’ve all experienced working with a high-taste client who always wants to be unique in every aspect of their design product. For example, your client might want a fully custom set of icons for their new App without the use of stock vectors. On its own, this is not an unreasonable requirement, but it can easily require extra time and effort during UI design work.
Now, with the versatility of AI tools, this is much more manageable! We can provide the client with several sets of UI icon design ideas that match their branding and imagination using AI tools. From there, we can quickly run through multiple iterations with the tool to narrow down our options until we are left with just one or two candidate groups. With this accelerated process, you can more confidently land on an initial design set that your client will be happy with before you set off to refine and build your samples into a solid design work file.
Here we have another example of icon set ideas for an “Account” prompt:
By adjusting the descriptive text we use in the prompt, the results can even be drastically different. Creating multiple sample sets can help guide clients in an accurate and effective manner.
Midjourney Creates Logos
Another great way that AI generation can assist us is when creating business logos for clients. Using AI, designers can quickly provide high-quality, bespoke images of logo ideas that are directly based on the client’s business, which the clients can easily review and give feedback.
Traditionally, all imagination and creativity takes time for the human designer to execute on, limiting the number of ideas we can explore. Having an AI example to work with opens the door to more possibilities within a very short period of time, allowing designers to focus their efforts on a final refined version rather than multiple scrapped rough drafts.
Check out the sample business logo UI ideas, all instantly generated by an AI tool, below. We can even add instructions like “Portuguese” to define the style of outcome.
Midjourney Creates Website UI
Picture a solutions meeting with a client who wants to build an e-commerce website. With the power of Midjourney, UI designers can prepare a series of AI-generated page design samples to guide the client in narrowing down the layout, branding style, color theme, and even functions of the page.
With a visual aid, the client can more comfortably and confidently define their website’s design requirements, helping you nail the deal!
Put yourself in the shoes of the client as you take a look at some of Midjourney’s sample UI for a sneaker website. These examples gives you a strong idea of what direction your polished designs can go in whether you ask it to create:
a homepage,
product list pages,
or product details pages.
Midjourney Creates Mobile App UI
Going beyond an e-commerce website, AI platforms can also be used to create complex app UI. With a “real” interface generated by AI, the client can get a more hands-on feel for how your future user interface will look even before the UI designer creates the designs. When prompting, keep in mind that Midjourney can understand the description of the app, major products, style requests, and the main functionality. It can then provide realistic ideations within seconds, allowing the client to enjoy these and give feedback before we begin designing.
Final Thoughts
More and more UI designers have already adopted AI tools to power their UI designs. As you can see through the examples above, it’s becoming increasingly necessary to come equipped with these smart weapons to stay sharp as a designer.
With text-to-image AI tools, the possibilities are endless. AI tools can:
- Provide you with millions of extensions to your human creativity and imagination.
- Focus on specific design requests from the client as they move through ideas instead of searching to find an approximate representation through stock.
- Deliver the rough form your client is looking for. This can close the gap between you and the client, making it easier to nail the deal.
- Cater to various directions. Clients can evaluate an enriched set of possible styles, ideas, and arrangements.
Given enough time, a senior designer is definitely able to do all of these things manually, but time is a precious resource! Supplementing your design process with AI tools can give you a lightning quick turnaround time early on, giving you more client feedback and time to perfect your final deliverables.
There’s no doubt about it: generative AI tools are a powerful way to boost your UI designs! But like any tool, using it effectively takes knowledge and practice to hone your skills. A great designer will utilize cross-learning and keep up with other great design works and the discipline required to make the most of AI is no different.
After all, current AI-generated UI results don’t come ready-to-use, and require a human designer to piece together, convert, and polish their guiding ideas into a real product. As AI capabilities continue to grow, the best way to incorporate its advantages into our everyday design processes is to get involved in shaping AI learning and to start honing our prompting skills today.
Looking to learn more about AI and its applications in design? Check out some of the tools that Martin, one of our User Experience designers, has found useful in his own design process or reach out to us directly at info@arcticleaf.io!
Arctic Leaf is a digital agency with over 10 years of e-commerce experience serving clients of all industries. Our entire team is Baymard UX certified and our amazing developers can build everything from simple Shopify themes to fully custom headless experiences.
