AI tools to improve your design process

In the ever-evolving landscape of design, artificial intelligence (AI) tools are making significant strides, offering designers innovative ways to enhance their creativity, streamline workflows, and gain valuable insights. This blog post explores AI tools tailored for enhancing your UX/UI design, tools specifically designed to help you in the creative process. Let's review a selection of these transformative tools:

• ChatGPT
• Khroma - The AI colour tool for designersKhroma - The AI colour tool for designers
• Photoshop Generative fill
• Immerse.zone – Reverse image search engine
• Attention Insight
• DALL·E and Midjourney

ChatGPT

We all know ChatGPT by now as one of the most commonly used forms of AI tools to improve our productivity. 

Designed to generate text that mirrors human communication, It's primary role is to cater to a diverse array of tasks. Whether it's answering your inquiries, delivering informative content, crafting creative pieces, or participating in engaging conversations about countless of subjects. So how can we use ChatGPT to help us with design?

Well let's ask the chat! "How can you help with a UX/UI design process?"

1. Idea Generation: If you're looking for creative ideas or concepts for your project, I can provide suggestions and brainstorm with you to generate innovative design ideas.
2. User Research: I can help you formulate questions and prompts for user research to gather insights into user behavior, preferences, and pain points. Additionally, I can assist in analyzing and interpreting research findings.
3. Wireframing and Prototyping: Describe your design goals, and I can help you outline wireframes or create basic prototypes. I can also provide guidance on structuring user flows for optimal user experience.
4. Content Creation: Need assistance with creating compelling and concise copy for your interface? I can help you draft user-friendly content that aligns with your design goals.
5. Usability Testing: I can assist in creating test scenarios and user tasks for usability testing. Additionally, I can help interpret test results and suggest potential improvements based on user feedback.
6. Design Principles: If you're looking for information on design principles, color theory, typography, or other design fundamentals, I can provide explanations and insights to guide your design decisions.
7. Feedback and Iteration: Share your design concepts, and I can offer feedback or suggestions for improvement. I can also help you iterate on your designs based on specific criteria or user feedback.
8. Design Trends: Stay up-to-date with the latest design trends by asking for information on current UX/UI trends and best practices.

Some useful prompt ideas

• "Train ChatGPT in the way you want your questions to be answered with a prompt letting it know you want responses from a designers point of view."
• "I need icon ideas for the following list:"
• "What serif font works when paired with Helvetica"

Keep in mind that although ChatGPT provides helpful assistance, relying on your own judgment and design expertise is crucial. The AI's responses stem from patterns learned across diverse data, but it's no substitute for the nuanced understanding and creativity inherent in a human designer's contributions.

Visit: https://chat.openai.com/ 

Khroma - The AI colour tool for designers

Khroma is an AI colour tool designed to enhance the design process by creating personalised colour palettes for users. To get started, users select 50 different colour options, spanning a wide range of hues, values, and saturations. This diverse selection helps Khroma understand the user's colour preferences. The chosen colours are then utilised to train a personalised colour generator algorithm.

The tool stores user data in localstorage accessible only on the current browser and device, ensuring privacy. At Morpht we are familiar with using localstorage to bring Personalisation to your websites.

Visit: https://www.khroma.co

This tool is beneficial during the initial stages of a project when you aim to define the atmosphere and character of your design. Whether you're in the process of creating an entirely new colour palette for your project or seeking a complimentary option to integrate into an existing style guide, this tool provides a solid starting point for your creative project.

Photoshop Generative fill

Adobe Photoshop's AI Generative Fill feature has been around for a while now. We have seen some impressive and humorous results. 

One notable strength is its ability to enhance stock photography. Have you ever found yourself struggling to locate the perfect image for a teaser, banner, or social media post, only to realise it would be ideal with a bit more negative space to complement your text?

Enter Generative Fill—the magic wand and time-saving feature. Allow me to illustrate with an example: consider a stock photo (Photo by Brooke Cagle on Unsplash) with the focal point being the centre of the image. Using the Generative Fill feature in Photoshop, we can effortlessly crop and extend the image, tailoring it to our specific requirements. This extension of the background environment creates an even favourable backdrop for your design needs.

We start by extending the image with the crop tool. In photography the rule of thirds is ideal for a good composition. Follow the grid guidelines to allow for a good end result.  

Select the area you wish to fill with the selection tool of your choice. In this case the rectangle selection tool was used. Then navigate to Edit > Generative Fill. This will prompt box, you don't need to use the prompt text feild but you can experiment with this if you wish to try and steer the AI in a direction to your needs. 

By default Photoshop will provide you with 3 variations to choose from found under the Properties panel. If you don't like the results you can use the Generate button found above the Variations to return more results. 

The end result is an image more fit for your needs to be used in your design. 

Photoshop's Generative Fill is incredibly useful and can help you out in a flash if you found the (almost) perfect photo but require some extra room to work with. Definitely explore adding new elements to the image as well with different prompts and selected areas of your canvas, just be prepared for some interesting results! In short, it does simple stuff very well and will only improve with time.

Immerse.zone – Reverse image search engine

Immerse is an advanced reverse image search engine. Its AI model excels in providing accurate search results by understanding queries in both image and text formats. Designed for art and photography professionals. 

Search results can be found by the use of reverse image search, sketch (put your drawing skills to the test) and and keyword-based searches. 

What is particularly great is the reverse image search feature which allows users to upload an image to generate and curate a list of similar images. This tool is powerful for those, like myself that frequently explore royalty-free stock photography platforms like Unsplash and Pexels. The results compile comparable royalty-free images from various sources, streamlining the process of finding the perfect image in the one place.

The results include tags extracted from the search results, offering additional assistance by suggesting search terms that users may not have initially considered to further refine their search.

Visit: https://www.immerse.zone/

With so many free to use images sourced from different locations, this has easily become a goto for me. The different ways to search also provides a better google/pinterest type UI which is a much improved user experience compared to other stock photo websites. 

Attention Insight

A recent discovery that I personally have yet to try but very interested in. Attention Insight is a platform that uses AI and eye-tracking technology to provide insights into how users might visually engage with a design or webpage. It helps designers and marketers optimise their visual content for maximum impact. Simply upload your design files or a URL to your website. This tool will generate attention heat maps to help identify what part of your design is/isn't working. This tool would be particularly helpful in a redesign scenario to help identify what UX problems your websites' users are encountering to fix. 

• Heatmap Generation: Attention Insight creates heatmaps using predictive models, illustrating the areas in a design or webpage that are predicted to gain the most attention.
• Attention Prediction: Through algorithms, the platform forecasts the likely focal points of users' attention, facilitating the optimisation of critical elements within a design.
• Design Analysis: Leverage Attention Insight to assess the effectiveness of layouts, color palettes, and other visual components.
• Comparison Tools: Compare diverse design variations, helping identify which one is more apt to capture attention effectively.

As I have yet to try this tool out I am unable to provide any pros or cons for this tool but it sounds like a valuable insight to your designs. 

Visit: https://attentioninsight.com/

DALL·E and Midjourney

As an illustrator, I hold strong opinions regarding AI image generation and where the images are sourced from. Feelings aside, these tools have the potential to serve as sources of inspiration. Much like ChatGPT, AI image generation tools can be used to generate ideas and concepts. It is highly recommended that if you choose to utilise images created using these platforms, you engage in further iterations and refinements. Manipulate and edit them using other programs, such as Photoshop, to add a human touch into the images. 

The copyright laws related to the use of AI image generation are relatively new and vary by location. However, the current general guideline is that images created by a machine are not eligible for copyright. I am not a legal expert, so conducting thorough research is advised if you wish to delve deeper into this topic.

Visit: https://openai.com/research/dall-e & https://www.midjourney.com/