How to use ChatGPT for UI/UX design

Ira Mataić / 09 Apr 2024
  • Inovacije
how-to-use-chatgpt-for-ui-ux-design.webp

TABLE OF CONTENTS:



On November 30th in 2022 OpenAI launched their new software, a chatbot called ChatGPT.


It was the start of revolution, with AI being used across industries and for any use one can


In October of 2023 OpenAI integrated DALL·E 3, their generative image generator, with ChatGPT. This was a game changer, since it allowed ChatGPT to read and create images.


This has led to some very creative uses such as creating websites.


Can we design a website using ChatGPT?


Whenever you visit a website, the first thing you notice is load time and the second thing is design.


A fast website is the result of good coding, the eye-catching detail, functionality, and good experience is the result of design.


In essence you need two ingredients to make a good website: UI and UX design supported with code.


Turns out, ChatGPT can help you with AI assisted design and AI assisted website coding.

ux-vs-ui-design-differences

Can ChatGPT help with UI design?


Yes! ChatGPT can definitely help you create a good user interface.


There are plenty of reasons why UI design is difficult for a seasoned designer, let alone a program.


For the purposes of this blog, we have tested ChatGPT capabilities, and while the simple answer is yes, there is more to it.


You can more easily discover alternative perspectives, generate ideas, and create simpler designs. But with 3 websites created every second, creating a truly standout quality design seems to be beyond current AI capabilities.

Can ChatGPT help with UX design?


User experience is the sum total of everything that makes up a website.


A lot of work goes into crafting a pleasant user experience. So, how can ChatGPT help?


Creation of user personas and user journeys is integral to understanding how people interact with your product. Writing them all out becomes easier with a proper prompt example list and data feeding.


You can also more easily get information about UX methods and strategy or use ChatGPT for UX design prompts. It also makes discovering websites for UX inspiration much less time consuming.


Even though AI can help you with certain UX design process steps such as wireframe creation, it still has much room for improvement.

ux-design-process-loop

How to use ChatGPT for wireframes?


With the added ability to analyze and create pictures, OpenAI chatbot can help you create or analyze wireframes. Or at least it can in theory.


We have tried generating wireframe pictures, but have confirmed that ChatGPT cannot do that as of yet.

chatgpt-wireframe-generation

But ChatGPT can be used for UX design prompts, help with UI/UX fundamentals, and analyze existing wireframes with varying success.


Surprisingly, ChatGPT can conduct A/B testing, or at least help you build testing plans and generate reports.


When we asked the chatbot directly if it can conduct A/B testing it has said the following:

can-chatgpt-do-ab-testing

Example: Develop a rapid prototype for a mobile app

It all starts with a question: “Can ChatGPT help develop a rapid prototype for a mobile app?”

can-chatgp-develop-a-rapid-mobile-app-prototype-1
can-chatgp-develop-a-rapid-mobile-app-prototype-2

Being prompted to explain how it can directly help with those steps, the AI language model claimed to be able to assist in the following ways.


1. Define the Objective

AI helps clarify the app’s purpose and goals, while also asking questions, acting as a guide in the brainstorming process.


2. Research and Ideation

It can provide research-based insights and best industry practices that can help generate app ideas.


3. Sketching and Wireframing

It claims not to be able to create sketches or wireframes, but it can guide us through the process and provide feedback for created sketched and wireframes.


4. Design

It can offer advice for UI/UX design principles, layout, color schemes, and visual elements to help create mockups and prototypes.


5. Prototype Development

The chatbot can help conceptualize and plan the interactive elements of the prototype, such as user flows and navigation.


6. Test and Iterate

It can help by suggesting testing methodologies and criteria while assisting to interpret user feedback and iterate the prototype.


7. Refinement

It can offer suggestions for prototype refinement based of feedback and testing, thus helping to prioritize and implement changes.


8. Documentation

Open AI bot can help organize and document design decisions, user flows, and interactions.


It claims to be able to help with every step of app prototype development, but the limitations and common problems of today’s AI models bring into question how effective it truly is.

Integrating ChatGPT into your workflow


Even though ChatGPT has been online for only two years, it has become basically ubiquitous in the modern workplace.


Here in the content creation department, we use ChatGPT quite often. AI is mostly used to generate ideas, refine texts, check the grammar, fight writer’s block, and locate missing words; making it fully integrated throughout the process.


To find out how designers integrate AI into their workflow, we interviewed our own team.


Our Design team lead and our UX/UI designer both use ChatGPT to help generate dummy text, replacing the common Lorem ipsum or creating fictional names and other placeholders.


Sometimes AI is used to generate new ideas, help organize terms and lists of data, and create or tweak complete styleguides.


On the other hand, our 3D and graphic designer, Sara Katona, had found AI to hinder her workflow and creativity, forgoing the tools altogether.


Judging the responses we received, integrating ChatGPT into your workflow greatly depends on your preferences and work style.


If you struggle with ideas try and use the chatbot alongside other sites such as Dribbble and Pinterest to get the ideas flowing.


On the other hand, if you need suggestions choosing a font, a color palette with a certain emotion, element placement advice, or a helpful reminder of design principles – you can ask your digital colleague.

Can ChatGPT replace Web designers or product designers?


Most likely ChatGPT will never replace web or product designers, primarily because that is not its main purpose.


On the market today there are other, more specialized AI tools like Galileo AI, that market themselves as Text to UI, creating interfaces using text prompts.


Even though these tools can be useful, currently none of them can replace an experienced designer.


Our design team seems to agree that in some aspects, AI will never be able to replace a human touch.


“Clients have issues describing what they want. You cannot just listen; you have to understand them.” and “AI recycles and human minds creates. It is hard to create something unique from a trained model.” were some of the things they’ve mentioned.


Finally, they all seem to agree that, in design, there is a notable emphasis on emotion and psychology that is impossible for AI to process and replicate.


"I believe AI software are tools, and when utilized correctly within the right context, they can significantly streamline workflows, making them more efficient. Regarding design, already there are AI platforms capable of generating functional interfaces based on textual input. However, despite technically well executed and proficient, the end product often appears generic and bland. 

UX enhances the usability of digital products, while human eye coupled with a designer's experience serves to elevate the entire design to a next level. I predict that in the world of design, be it graphic, product, UX/UI, or any other, this trend will further increase the difference between designers who mindlessly place pre-existing or predefined components within templates and those who invest the time and effort to create something truly unique." - Ivan Leš, Design Team Lead

Can ChatGPT 4 design websites? No.


Will it ever be able to create websites? Most likely also no.


But with the rapid development of AI technology, software, and different tools, we will see what the future brings.