Shane Brennan

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

Main Nav

<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>
<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><em>In the digital landscape, there are many ways for businesses to get users to click where they want them to click. A positive user experience can leave a lasting good impression on users to keep them coming back. Designers know how users tend to behave on the internet, and so, unfortunately, they can exploit these behaviours to get them to do things they may not want to.</em></p>
<p>Deceptive Design, otherwise known as &#8220;Dark Patterns,&#8221; is a user interface designed to trick users into behaving against their own interests.</p>
<p>You’ve probably come across it in your own online activity. Subtle (and not so subtle) user manipulation is fairly commonplace, and quite often utilised by some of the biggest names in tech. Being able to recognise the different types of deceptive designs that appear across the web is the first step in avoiding them, so let’s take a look at some examples.</p>
<p>&nbsp;</p>
<h3>Deceptive Design in the Wild</h3>
<h5>Disguised Ads</h5>
<p>‘Disguised ads’ are when a part of the user interface is made to look like another functional part that a user might want to click on, like navigation or a search result. Google has been increasingly guilty of this practice over the years. The likelihood of clicking an ad (that Google benefits monetarily from), and an almost visually identical search result is very high. Coupled with the fact that 3 or 4 ads at the top of the screen will push actual search results down the page beyond the fold, it’s even harder to recognise them for what they are.</p>
<p>It wasn’t always this way. Google was one of the first to clearly label its ads and seemed to be a leader in transparency in this area. Over the years they have slowly blended their ads into the search results, making them harder and harder to differentiate. Take a look at the timeline of design changes over the years below by Ginny Marvin, and read the <a href="https://searchengineland.com/search-ad-labeling-history-google-bing-254332?utm_campaign=socialflow&amp;utm_source=twitter&amp;utm_medium=social">full article</a> for a more in-depth analysis.</p>
<blockquote class="twitter-tweet">
<p dir="ltr" lang="en">Color fade: A history of Google ad labeling in search results <a href="https://t.co/guo3jc4kwz">https://t.co/guo3jc4kwz</a> <a href="https://t.co/LMYqhmgfyE">pic.twitter.com/LMYqhmgfyE</a></p>
<p>— Ginny Marvin (@GinnyMarvin) <a href="https://twitter.com/GinnyMarvin/status/757606109322633216?ref_src=twsrc%5Etfw">July 25, 2016</a></p></blockquote>
<p><script src="https://platform.twitter.com/widgets.js" async="" charset="utf-8"></script></p>
<p>&nbsp;</p>
<h5>Forced Continuity and Roach Motels</h5>
<p>Before the subscription model took over digital services, you could simply pay for something once and you’d own it forever. In the modern streaming and software landscape, subscription model payments are almost ubiquitous.</p>
<p>There was a brief time period where one could avail of a free trial without entering credit card details, but no more. Under the guise of ‘seamless user experience,’ companies started to demand credit card details up front, to alleviate the &#8216;hassle&#8217; of entering these details later on.</p>
<p>In reality, the service provider is relying on the tendency for users to forget about the subscription, and have it charging away in the background into the future. It’s industry standard now, and likely here to stay. Ultimately, if you’re confident in the value your product brings, a free trial without card details shouldn’t be an issue.</p>
<p>The situation is worsened by the tactic known as ‘Roach Motel,’ in which a service is easily signed up for, sometimes even by accident, but then very hard to cancel. I shouldn&#8217;t have to call a customer service number and stay on hold just to cancel my subscription!</p>
<img loading="lazy" decoding="async" class="alignnone wp-image-14347 size-full" src="https://www.api.friday.ie/wp-content/uploads/2023/04/Screenshot-2023-04-19-at-17.07.35.png" alt="Screenshots showing the process for cancelling an online course subscription membership" width="1294" height="1414" srcset="https://www.api.friday.ie/wp-content/uploads/2023/04/Screenshot-2023-04-19-at-17.07.35.png 1294w, https://www.api.friday.ie/wp-content/uploads/2023/04/Screenshot-2023-04-19-at-17.07.35-250x273.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/04/Screenshot-2023-04-19-at-17.07.35-700x765.png 700w, https://www.api.friday.ie/wp-content/uploads/2023/04/Screenshot-2023-04-19-at-17.07.35-768x839.png 768w, https://www.api.friday.ie/wp-content/uploads/2023/04/Screenshot-2023-04-19-at-17.07.35-120x131.png 120w" sizes="(max-width: 1294px) 100vw, 1294px" />
<p>&nbsp;</p>
<h5>Privacy and Data Consent</h5>
<p>Social Media is known for the dopamine-exploiting ‘slot-machine’ tactics that get users compulsively refreshing their social media feeds. Facebook&#8217;s deceptive design tactics don&#8217;t stop there either. ‘Privacy Zuckering’ is when “you are tricked into publicly sharing more information about yourself than you really intended to.” It was coined in Facebook&#8217;s early days, aptly named after the founder. They were notorious for getting access to your contacts list, which you had probably shared with them without realising.</p>
<p>The online privacy landscape has been evolving over the last 5 years. Following the GDPR introduction in 2018, European companies are required to seek consent when collecting certain data about users and are getting creative with how they discourage you from fully exercising your privacy rights.</p>
<p>Often, opting into maximum data exposure is the default, or framed as a feature of the product; a benefit you can avail of that will result in a ‘more personalised ads experience,’ which certainly sounds like it’s for the user’s benefit and not the company’s&#8230; (it’s not). Other times, the action to reject or to configure data consent settings is harder to access, and the wording used in these messages is finely tuned to lead you down the path of least resistance and accept more data consent than you normally would.</p>
<p><em>Privacy Zuckering definition from: </em><a href="https://www.deceptive.design/types/privacy-zuckering"><em>https://www.deceptive.design/types/privacy-zuckering</em></a></p>
<div id="attachment_14330" style="width: 710px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14330" class="wp-image-14330 size-large" src="https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-700x414.png" alt="Screenshots of mobile website's cookie consent user interface" width="700" height="414" srcset="https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-700x414.png 700w, https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-250x148.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-768x455.png 768w, https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-1536x909.png 1536w, https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-2048x1212.png 2048w, https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-120x71.png 120w" sizes="(max-width: 700px) 100vw, 700px" /><p id="caption-attachment-14330" class="wp-caption-text">Common website cookie consent UI, where the option to reject is distanced from the user by more taps and scrolling, while the option to accept all is immediately front &amp; centre.</p></div>
<p>&nbsp;</p>
<h5>Other Examples</h5>
<p>This is a non-exhaustive list of the kinds of deceptive designs you can find in the wild. The term &#8220;dark pattern&#8221; was coined by <a href="https://www.deceptive.design/">Henry Brignull</a> in 2010, and more recently changed to &#8220;deceptive design&#8221; to be more inclusive and easy to understand. His is the go-to source for definitions and examples of deceptive design you should be aware of, both as a user and a business owner.</p>
<p>Once we know what deceptive design is, an important question to ask then is; why are they such a bad idea?</p>
<p>&nbsp;</p>
<h3>How Deceptive Design hurts your business</h3>
<ol>
<li><em>Users are becoming more and more aware</em> of the kinds of deceptive tactics that companies employ to influence more clicks, more conversions, and more data consent. If a user feels deceived by something they initially sought help from, it leaves a sour taste and a lasting negative impression in their mind, and they’ll be much less likely to engage with that service again.</li>
<li><em>A loyal customer is much more valuable than a new one</em>. Loyal users will continue to use your services into the future, creating repeat business. They might rave to their family and friends. Deceptive design practices might gain you a short-term business win but is a net negative when considering the lasting brand perception it can create with customers, especially for small businesses trying to gain momentum.</li>
<li>Although most deceptive design is not explicitly illegal (yet..), <em>you might run the risk of breaching data and consumer protection laws</em> depending on the nature of the deceit. All in all, it creates a frustrating and off-putting user experience, and your energy is better placed in business practice that creates value for your customers and earns their trust legitimately.</li>
</ol>
<p>&nbsp;</p>
<h3>If Deceptive Design is such a bad idea, why do we see it all the time?</h3>
<p>It’s true, deceptive design is still hugely prevalent on the internet for several reasons.</p>
<ul>
<li>Big tech companies usually get away with it. They can rely on large established customer bases and brand recognition for continued business.</li>
<li>There is sometimes pressure on designers from stakeholders who don’t understand the negative long-term effect of employing deceptive design patterns. They see competitors doing the same things and think it must be working. Designers have a responsibility to advocate for better UX, for both the user and the long-term health of the business, but it often falls on deaf ears.</li>
<li>The pressure from stakeholders comes from a short-sighted approach to boosting revenue, and the capitalist mindset of ever-soaring growth and returns. It doesn&#8217;t place users&#8217; interests at the forefront.</li>
<li>There is also likely an assumption by companies that users don’t care they’re being duped, won’t even realise, or blame themselves for certain mishaps. It can be true in some cases, but with an ever-increasing tech-savvy population, these practices just aren&#8217;t sustainable.</li>
</ul>
<p>&nbsp;</p>
<h3>So how do you build trust with your users in a sustainable way?</h3>
<p>Deceptive Design is often hard to define, as all design has the intent to persuade.</p>
<p>Persuasive design is the art of getting users to do what you want, without being deceptive. We&#8217;ve written on the topic before. Read Dave&#8217;s article on the <a href="https://www.friday.ie/blog/how-to-be-persuasive-the-6-principles-of-influence/">6 Principles of Influence</a> developed by Dr Robert Cialdini and our post on <a href="https://www.friday.ie/blog/persuasive-design-how-to-make-shit-happen/">effective persuasive design</a> in action.</p>
<p>Ultimately, the details lie in human psychology, and how you communicate with users in a convincing manner. While there is no moral obligation to be 100% ethical in your design and business practice, your own experience will likely tell you how frustrating it is to be duped, the impression it left on you as a result, and ultimately why deceptive design should be avoided at all costs.</p>
<p>If you want your customers to enjoy a <a class="c-link" href="https://www.friday.ie/expertise/user-experience/" target="_blank" rel="noopener noreferrer" data-stringify-link="https://www.friday.ie/expertise/user-experience/" data-sk="tooltip_parent">positive user experience</a> throughout their journey with you, get in touch with us.</p>


Author: Shane Brennan

AI tools for UI Design: Are they any good?

Deceptive Design and How it Hurts your Business