61 Merrion Square South, <br />
Dublin 2, D02 EW25, Ireland

Main Nav

<div class="paragraph-large">
<p>The future of design as a whole is on the brink of a major shift thanks to generative AI models. As a designer myself, I&#8217;m particularly interested in text-to-image tools like Dall-E and Midjourney.</p>
</div>
<p>AI is likely to completely transform the process of User Interface Design for websites, apps, and the digital space in general. And soon.</p>
<p>Let&#8217;s take a look at some AI tools available right now, and if they&#8217;re actually of any use for UI designers.</p>
<p>I&#8217;ll also highlight some of the more promising-looking tools that aren&#8217;t yet publicly available, but definitely worth keeping an eye on in the near future.</p>
<h3>But wait, what is text-to-image AI?</h3>
<p>A brief description for the uninitiated. Text-to-image models have been around for a while now, but have been rapidly improving in quality in the last year or so.</p>
<p>Essentially, they use machine learning models to generate images from a simple text prompt.</p>
<p>They are trained on large data sets of existing images in order to understand how to turn your text prompt into an image that looks like what you&#8217;ve described.</p>
<p>So, all you need to do is type a description of the image you want and hit enter. Magic! The art of getting decent results lies in the quality of the tool you&#8217;re using, and the quality of your text prompt.</p>
<p>Just check out the thumbnail of this post for an example of an AI generate image!</p>
<h3>So what can AI do for UI Designers right now?</h3>
<p>The short answer is.. not a lot, yet.</p>
<p>Yes, the likes of Dall-E, Midjourney and Stable Diffusion can produce some astounding stuff from a purely visual design perspective. How they perform when tasked with UI-specific prompts is less impressive, for a couple of reasons:</p>
<ul>
<li>They can only produce flat images, so you can&#8217;t directly edit the output in a design program like Figma.</li>
<li>They don&#8217;t do a great job with text, it mostly looks like a cryptic alien language.</li>
<li>Results vary in quality and are probably more time-consuming than just searching on Dribbble or Awwwards.com.</li>
<li>When working on a project, you&#8217;ll have some content structure in place before you get to UI. AI tools can&#8217;t really take this into account, so a generated Home page may not be applicable to wireframes you&#8217;ve developed.</li>
</ul>
<p>These tools can produce some nice inspiration and moodboarding assets, but that&#8217;s about it right now. Check out some of the results I got from the following prompt:</p>
<p><em>&#8220;Mobile app home screen for a music festival, modern, minimal, purple colour palette, dribble, high-res&#8221;</em></p>
<h5>Stable Diffusion:</h5>
<p>Not a bad effort, but there wasn&#8217;t much of use bar the colour palette. Though the illustrations are nice, they really aren&#8217;t usable unless recreated manually in vector format.</p>
<p>The strange melding of the phones on the right is quite amusing, as the AI tries to interpret what a phone should look like.</p>
<div id="attachment_14549" style="width: 1708px" class="wp-caption alignnone"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14549" class="wp-image-14549 size-full" src="https://www.api.friday.ie/wp-content/uploads/2023/08/Stable-Diffusion.png" alt="AI generated image of a smartphone music festival app on multiple screens, using the tool Stable Diffusion" width="1698" height="832" srcset="https://www.api.friday.ie/wp-content/uploads/2023/08/Stable-Diffusion.png 1698w, https://www.api.friday.ie/wp-content/uploads/2023/08/Stable-Diffusion-250x122.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/08/Stable-Diffusion-700x343.png 700w, https://www.api.friday.ie/wp-content/uploads/2023/08/Stable-Diffusion-768x376.png 768w, https://www.api.friday.ie/wp-content/uploads/2023/08/Stable-Diffusion-1536x753.png 1536w, https://www.api.friday.ie/wp-content/uploads/2023/08/Stable-Diffusion-120x59.png 120w" sizes="(max-width: 1698px) 100vw, 1698px" /><p id="caption-attachment-14549" class="wp-caption-text">Stable Diffusion&#8217;s UI effort</p></div>
<h5></h5>
<h5></h5>
<h5>Midjourney:</h5>
<p>A little more impressive, it gives some indication of a weather tracking feature, and the details are crisper and generally better quality. It certainly has a better grasp on what a phone looks like.</p>
<p>Generally, it sparks the creative part of your brain as inspiration, but not much else, and I could find a plethora of similar images on Dribbble pretty quickly.</p>
<div id="attachment_14550" style="width: 1504px" class="wp-caption alignnone"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14550" class="wp-image-14550 size-full" src="https://www.api.friday.ie/wp-content/uploads/2023/08/Midjourney.png" alt="AI generated images of a smartphone music festival app, using the tool Midjourney" width="1494" height="741" srcset="https://www.api.friday.ie/wp-content/uploads/2023/08/Midjourney.png 1494w, https://www.api.friday.ie/wp-content/uploads/2023/08/Midjourney-250x124.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/08/Midjourney-700x347.png 700w, https://www.api.friday.ie/wp-content/uploads/2023/08/Midjourney-768x381.png 768w, https://www.api.friday.ie/wp-content/uploads/2023/08/Midjourney-120x60.png 120w" sizes="(max-width: 1494px) 100vw, 1494px" /><p id="caption-attachment-14550" class="wp-caption-text">Images generated by Midjourney</p></div>
<p>Overall, results from these tools are difficult to interpret. It&#8217;s like an alien&#8217;s best guess at what an app might look like. Given that the AI is essentially doing something similar, it&#8217;s not surprising.</p>
<h5>Magician/Dall-E</h5>
<p><a href="https://magician.design/">Magician</a> is a plugin for Figma (made by Diagram, more on them in the next section). It harnesses the power of ChatGPT and Dall-E 2 to give you some nice little AI tools right in the Figma UI.</p>
<p>I tried out the Magic Image and Magic Icon tools to generate some logos for a pharmaceutical company. It&#8217;s not revolutionary, but definitely exciting to see how this could speed up the idea-generation process.</p>
<div id="attachment_14551" style="width: 1718px" class="wp-caption alignnone"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14551" class="wp-image-14551 size-full" src="https://www.api.friday.ie/wp-content/uploads/2023/08/Dall-E.png" alt="AI generated images of a medical company logo concept, using the tool Dall-E 2" width="1708" height="793" srcset="https://www.api.friday.ie/wp-content/uploads/2023/08/Dall-E.png 1708w, https://www.api.friday.ie/wp-content/uploads/2023/08/Dall-E-250x116.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/08/Dall-E-700x325.png 700w, https://www.api.friday.ie/wp-content/uploads/2023/08/Dall-E-768x357.png 768w, https://www.api.friday.ie/wp-content/uploads/2023/08/Dall-E-1536x713.png 1536w, https://www.api.friday.ie/wp-content/uploads/2023/08/Dall-E-120x56.png 120w" sizes="(max-width: 1708px) 100vw, 1708px" /><p id="caption-attachment-14551" class="wp-caption-text">Magician uses Dall-E 2 to generate images via a Figma plugin</p></div>
<p>Side note, ChatGPT is amazing for writing short copy snippets for your prototypes, a use-case for AI that I&#8217;m already using quite a bit.</p>
<h3>The tools to watch out for</h3>
<p>The prospect of including AI as a core part of the UI process in the near future seems very real. Generating specific, editable vector UI layouts with a click could be a game changer, and it&#8217;s only going to get more powerful with time.</p>
<p>Here are some of the tools you should keep an eye on. Some are only just announced and not yet publicly available, so we can only speculate until we get hands-on.</p>
<h5>Framer:</h5>
<p>Available now and a lot of fun to play around with, <a href="https://www.framer.com/ai">Framer&#8217;s AI</a> page builder takes your prompt and starts designing in front of your very eyes. All the elements are editable, and you can regenerate the typography styles and colour schemes at will.</p>
<p>It&#8217;s a big step up from the text-to-image tools in terms of UI, but certainly not an end-product right out of the gate. There&#8217;s still a lot of work to do for a designer to bring a mockup like this to the finish line, but could shave a good half hour off the start of a given task.</p>
<div id="attachment_14552" style="width: 1454px" class="wp-caption alignnone"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14552" class="wp-image-14552 size-full" src="https://www.api.friday.ie/wp-content/uploads/2023/08/Screenshot-2023-08-11-at-15.02.18.png" alt="UI mockups of a music festival website using the design tool Framer" width="1444" height="1094" srcset="https://www.api.friday.ie/wp-content/uploads/2023/08/Screenshot-2023-08-11-at-15.02.18.png 1444w, https://www.api.friday.ie/wp-content/uploads/2023/08/Screenshot-2023-08-11-at-15.02.18-250x189.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/08/Screenshot-2023-08-11-at-15.02.18-700x530.png 700w, https://www.api.friday.ie/wp-content/uploads/2023/08/Screenshot-2023-08-11-at-15.02.18-768x582.png 768w, https://www.api.friday.ie/wp-content/uploads/2023/08/Screenshot-2023-08-11-at-15.02.18-120x91.png 120w" sizes="(max-width: 1444px) 100vw, 1444px" /><p id="caption-attachment-14552" class="wp-caption-text">A set of AI generated UI mockups using Framer</p></div>
<h5></h5>
<p>&nbsp;</p>
<h5>Diagram &amp; Figma:</h5>
<p>Figma is already the biggest player in the UX design tool space, and they recently acquired a rather successful AI Design startup called Diagram. It seems they have a few AI tools in the works, and they look promising.</p>
<p>Their <a href="https://blog.diagram.com/p/introducing-genius">Genius</a> tool claims to be able to &#8220;autocomplete your design using components from your design system.&#8221; Unlike something like Framer which just generates a unique UI each time, this could potentially work with your existing design system, and anticipate what you want to do next.</p>
<p>Actual details are rather scarce, but having seen Figma&#8217;s output so far and their commitment to the design community, I have high hopes for this one.</p>
<h5>Galileo:</h5>
<p>A slightly more mysterious player in this space is <a href="https://www.usegalileo.ai/">Galileo</a>. Similar to the previous tools, it claims to turn &#8220;natural language prompts into high-fidelity designs,&#8221; as well as produce copywriting and illustrations based on text prompts.</p>
<p>They seem to be less forthcoming about the company and the tool itself, so we&#8217;ll have to wait and see if it can deliver. With a few competitors emerging at once, it&#8217;ll take something special to really get designers on board.</p>
<h5><strong>Wix &amp; Webflow:</strong></h5>
<p>Also worth a mention are the no-code site-builders like Wix and Webflow. If you&#8217;re less design-savvy, you might go straight to <a href="https://www.wix.com/blog/wix-artificial-design-intelligence">Wix ADI</a> to generate a site based on a description of your business.. in theory. In reality, you&#8217;ll need to do lots of fine-tuning with the site layout and content, but the idea is enticing.</p>
<p><a href="https://webflow.com/blog/power-of-ai">Webflow</a> is also promising some powerful AI-enhanced content and styling functionality. It&#8217;s not a tool for beginners, but with some practice, it&#8217;s one of the most versatile ways to build a site without coding skills, and AI is only going to make it more accessible.</p>
<h3>The Future of UI Design</h3>
<p>While this is all very exciting, it begs the question; will this replace UI designers altogether? I don&#8217;t think so, not in the short term anyway.</p>
<p>UI design is a lot more than making pretty pictures, and it&#8217;s never done in isolation. So you can create a nice-looking template with a click? It&#8217;s useless if it ignores user pain points, and it certainly can&#8217;t test the UI with real users.</p>
<p>A designer&#8217;s expertise will likely always be required to both craft an AI input, and then moderate and fine-tune the output. Generative AI will likely find a home in a UI designer&#8217;s arsenal as a time-efficient extension of their expertise.</p>
<h5><strong>Realistically, here&#8217;s where I&#8217;m hoping AI will fit into my workflow:</strong></h5>
<ul>
<li>Speeding up the process of gathering lots of visual inspiration.</li>
<li>Generating a decent editable starting point for screens and specific interaction scenarios.</li>
<li>Anticipating and suggesting UI components from my component library, that fits into a layout I&#8217;m already working on.</li>
<li>Quickly producing realistic copywriting and placeholder imagery for mockups and user testing.</li>
</ul>
<p>In conclusion, it&#8217;s an exciting and daunting time to be a designer.</p>
<p>Though the AI revolution won&#8217;t outright replace designers, it will certainly leave the un-trained in its wake, which is why I&#8217;m keeping a very close eye on the ever-developing landscape. It&#8217;s changing by the week, so you better keep up!</p>
<p>We try to keep our ear to the ground here at Friday. Get in touch with our <a class="c-link" href="https://www.friday.ie/expertise/user-experience/ux-design-dublin/" target="_blank" rel="noopener noreferrer" data-stringify-link="https://www.friday.ie/expertise/user-experience/ux-design-dublin/" data-sk="tooltip_parent">UX Design team</a> to understand what an experienced team can bring to your next project.</p>


An AI generated illustration of a computer with small graphic elements on screen, representing design systems and UI design

AI tools for UI Design: Are they any good?

<p>In the ever-evolving world of SEO, AI has already played a pivotal role in transforming various aspects of how we search.</p>
<p>Google in particular have been at the forefront of utilising AI to enhance user experiences, improve search quality, and support the discovery of relevant information.</p>
<p>And now it’s about to reach the next level using, you guessed it, AI advancements again.</p>
<div style="width: 1280px;" class="wp-video">
<video class="wp-video-shortcode" id="video-14375-1" width="1280" height="720" poster="https://www.api.friday.ie/wp-content/uploads/2023/05/Screenshot-2023-05-15-at-21.40.10.png" preload="metadata" controls="controls"><source type="video/mp4" src="https://www.api.friday.ie/wp-content/uploads/2023/05/A-look-at-whats-next-for-AI-and-Google-Search-_-Google-I_O-2023.mp4?_=1" /><a href="https://www.api.friday.ie/wp-content/uploads/2023/05/A-look-at-whats-next-for-AI-and-Google-Search-_-Google-I_O-2023.mp4">https://www.api.friday.ie/wp-content/uploads/2023/05/A-look-at-whats-next-for-AI-and-Google-Search-_-Google-I_O-2023.mp4</a></video></div>
<p>In short: Google are now introducing cutting-edge generative AI technology to enhance the search experience. And I’m liking it!</p>
<p>I will stand up and pay attention to anyone who appears to be taking their time and using a considered approach to AI advancements. Much of it has been far too rushed.</p>
<p>We all know that Google <a href="https://www.theverge.com/2023/2/8/23590864/google-ai-chatbot-bard-mistake-error-exoplanet-demo">jumped the gun</a> a bit and were too exposed by factual errors, but I think the lesson has been learned.</p>
<p>Over the years, Google has introduced ground-breaking advancements such as the Bidirectional Encoder Representations from Transformers (BERT) and the Multitask Unified Model (MUM) to revolutionise search capabilities.</p>
<p>I won’t delve too much into <a href="https://blog.google/products/search/introducing-mum/">BERT or MUM</a> right now, all you need to know is that they paved the way.</p>
<p>Continuing this trajectory, Google is now venturing into a new frontier called Search Generative Experience (SGE), where generative AI takes centre stage.</p>
<p>Generative AI is a type of AI capable of creating new content, such as images, videos, music, or text, that is not directly copied from existing examples.</p>
<p>It’s a fascinating area with so many functionalities, responsible implementation questions being raised, known limitations and more&#8230;</p>
<h3>What is SGE?</h3>
<p>Search Generative Experience represents an early step in transforming the search experience using generative AI.</p>
<p>It presents an AI-generated response above the search results. Google explicitly indicates the answer as being from Generative AI, followed by a response to your query.</p>
<p>The answer is presented in a box and Google provides citations to the websites used for generating the answer. These citations can be clicked to explore further.</p>
<p>Alternatively, you can ask another question or use the toggle button at the top right for more in-depth information.</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14377" src="https://www.api.friday.ie/wp-content/uploads/2023/05/google-search-generative-ai-experience-look.png.webp" alt="" width="2048" height="1521" srcset="https://www.api.friday.ie/wp-content/uploads/2023/05/google-search-generative-ai-experience-look.png.webp 2048w, https://www.api.friday.ie/wp-content/uploads/2023/05/google-search-generative-ai-experience-look.png-250x186.webp 250w, https://www.api.friday.ie/wp-content/uploads/2023/05/google-search-generative-ai-experience-look.png-700x520.webp 700w, https://www.api.friday.ie/wp-content/uploads/2023/05/google-search-generative-ai-experience-look.png-768x570.webp 768w, https://www.api.friday.ie/wp-content/uploads/2023/05/google-search-generative-ai-experience-look.png-1536x1141.webp 1536w, https://www.api.friday.ie/wp-content/uploads/2023/05/google-search-generative-ai-experience-look.png-120x89.webp 120w" sizes="(max-width: 2048px) 100vw, 2048px" />With SGE, users will notice a revamped search results page that organises familiar web results in a novel manner, enabling you to extract more value from a single search.</p>
<p>It empowers users to ask entirely new types of questions, gain quick overviews of topics with relevant links for further exploration, engage in a natural conversational mode for follow-up queries, and effortlessly accomplish tasks like generating creative ideas or drafting content directly within the search interface.</p>
<p>So far, it looks pretty f*cking cool.</p>
<h3><strong>How SGE Works</strong></h3>
<p>At the core of SGE are AI-powered snapshots that provide users with a synthesised overview of a topic.</p>
<p>These snapshots offer factors to consider and relevant insights, serving as a jumping-off point for users to explore a wide range of content and perspectives on the web.</p>
<p>SGE also incorporates a conversational mode, allowing users to naturally ask follow-up questions and obtain additional links to resources for in-depth exploration.</p>
<p>Leveraging AI, the conversational mode adapts to the context of the user&#8217;s queries, reformulating and refining the search intent over the course of the conversation.</p>
<p>This dynamic approach ensures users have access to the most relevant content as the conversation progresses.</p>
<h3><strong>Vertical Experiences</strong></h3>
<p>SGE extends its benefits to verticals such as shopping and local searches.</p>
<p>In shopping, SGE aids users in making informed purchase decisions by uncovering insights, presenting notable factors to consider, and offering a range of product options with descriptions, reviews, ratings, prices, and images sourced from Google&#8217;s comprehensive Shopping Graph dataset.</p>
<p>Similarly, SGE enhances local search experiences by providing AI-powered insights that facilitate comparisons and exploration of options.</p>
<h3><strong>What About The Ads?</strong></h3>
<p>This is an important one, and make no mistake, search ads will continue to play a vital role within SGE. They will appear in dedicated slots throughout the page.</p>
<p>Advertisers can leverage SGE to reach potential customers at various stages of their search journeys, just as they have done already.</p>
<p>On the ethical front, Google says they remain committed to transparency by ensuring clear differentiation between ads and organic search results, utilising the usual labels. I’m sure the <a href="https://www.friday.ie/blog/deceptive-design-and-how-it-hurts-your-business/">dark patterns</a> will continue here, but let’s see.</p>
<h3><strong>Embracing Creativity</strong></h3>
<p>Generative AI capabilities in SGE unlock new possibilities for users to engage with information creatively. Beyond merely finding information, SGE supports users in utilising that information in innovative ways.</p>
<p>Whether it&#8217;s searching for a new product or brainstorming ideas for social media posts, SGE&#8217;s creative potential offers users an enhanced and immersive search experience.</p>
<p>It&#8217;s important to note that, initially, SGE imposes certain constraints on creative applications to prioritise safety and quality. However, as the system evolves and quality improves, creative capabilities will expand.</p>
<h3>SEO</h3>
<p>Whatever content SGE surfaces will still use citations and will link to content where needed, so this does not necessarily mean that we are facing a world of zero-click searches. There <em>will</em> be more of them, but this is <em>not</em> the death of your SEO traffic.</p>
<p>On the flip side, it will look for content that is trustworthy so all of the same <a href="https://www.searchenginejournal.com/google-e-e-a-t-how-to-demonstrate-first-hand-experience/474446/">E-E-A-T</a> principles will apply if you want your content to be surfaced here.</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14384" src="https://www.api.friday.ie/wp-content/uploads/2023/05/Screenshot_2023-05-16_at_10_56_13.jpg" alt="Google E-E-A-T" width="784" height="431" srcset="https://www.api.friday.ie/wp-content/uploads/2023/05/Screenshot_2023-05-16_at_10_56_13.jpg 784w, https://www.api.friday.ie/wp-content/uploads/2023/05/Screenshot_2023-05-16_at_10_56_13-250x137.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2023/05/Screenshot_2023-05-16_at_10_56_13-700x385.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2023/05/Screenshot_2023-05-16_at_10_56_13-768x422.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2023/05/Screenshot_2023-05-16_at_10_56_13-120x66.jpg 120w" sizes="(max-width: 784px) 100vw, 784px" />
<h3>Applying It Responsibly</h3>
<p>As an experimental feature, Google says they are approaching SGE thoughtfully and responsibly, in accordance with its AI Principles.</p>
<p>Many will like to hear this since there is currently an overreaction in which people think this will destroy the world.</p>
<h3>So there you have it&#8230;</h3>
<p>SGE brings cutting-edge generative AI technology to enhance the search experience, and this is certainly welcome.</p>
<p>It offers a distinctive new search experience, distinguishing itself from previous versions while retaining the familiar Google search essence.</p>
<p>Notably, Google has made improvements in linking to publishers, aiming to actually generate website traffic.</p>
<p>It&#8217;s pretty exciting, to be fair.</p>
<p><em><strong>If you want to know more about what all of this means for your SEO strategy, then <a href="https://www.friday.ie/contact/">get in touch</a> with us today.</strong></em></p>

Ai

AI tools for UI Design: Are they any good?

A New Way to Search: Google’s Generative AI