How designers can use AI to help generate mood boards

[Editor’s note: This is the third in a series of blog posts about how builders can inject AI into their software development process. This article was written by Thais Kashmir and Lari Didone, members of ArcTouch’s award-winning digital product design team.]

After 15 years of creating lovable apps and websites, we follow the same general process we’ve perfected across 500 projects. That process typically starts with research and discovery from our product strategists, designers, and engineers.

The ArcTouch process: we start each project with research and discovery before our designers define an app UX or design UI screens.

We recently wrote about how to use AI for app strategy and research. AI also offers tremendous value in the early phases of this process for UX/UI designers.

A clear example of how AI is helping our design team is creating mood boards. A mood board is a collection of curated images that guide the possible colors, fonts, textures, and animations in a project. They are the North Star of the UI visual style in apps and websites.

When we start considering the user experience and visual design for a new app or website, the potential paths seem limitless. Just gathering and organizing branding materials and visual references from competitive companies, even narrowly defined, can take many hours. So many hours that we humans sometimes don’t feel like we have enough time to properly analyze those materials — before we define the path forward for our projects.

In this post, we share step-by-step details of how we used AI to research and create a mood board for our ArcTouch website redesign project. (Editor’s note: This project is active, so stay tuned for more later!)

You’ll see how generative AI is a powerful tool that ultimately allows us human designers to focus on what we do best: Creating lovable experiences.

Mood board AI experimentation

Before starting on an actual project, we wanted to experiment with AI to see how close it could get to generating the types of mood boards we like to use in our design process.

We identified the elements of an effective prompt:

• The output: “an image of a digital product mood board.”

• The style: e.g. Minimalist, Navy, Playful, Modern, or Retro.

• Examples of references and desired elements, such as colors, scenery, and icons.

We tried the following prompt:

“Create an image of a retro-futurist style digital product mood board. The image shows a color palette, icons, and a lifestyle scenery.”

The result was encouraging:

The generative model understood the structure, elements, layout, and visual style we were looking for. It was a bit too abstract, but it gave us confidence that this approach and tool was going to satisfy our needs.

For the second test, we changed some information, such as the product and visual theme we were interested in:

“The image is a children’s digital product mood board. The image shows a color palette and a family-focused image.”

The human figures looked uncanny and even comic (although this has since improved from the various generative AI models). We were intrigued by the color palette and patterns. This encouraged us and confirmed that AI when thoughtfully managed by our human designers, could generate a mood board quickly.

Ultimately, we learned it would take more than a single prompt to get to our desired outcome.

How we used AI to create a mood board

We started our website redesign process the same way we start any client project: with lots of research. We interviewed all of our business stakeholders to understand requirements, analyzed our current site, and even talked to some of our current customers to understand what they would expect to find on our website.

This process can be challenging because it often takes place over a short period of time — and the directions it could take are almost infinite. Meanwhile, subjective tastes also influence outcomes – and differences in opinion can sometimes stifle a project.

So we thought: AI is trained on massive amounts of information to understand commonly held beliefs and information. Therefore, if we help it understand our brand identity, then it should be able to find visual references that represent our brand. And maybe this could streamline our process to identify a concise vision and ultimately create our mood board for the project.

So we put the idea to the test. The first thing we needed was a list of keywords that represented our brand.

Step 1: Identify brand identity keywords

Writing great prompts starts with the language we use. AI tools and humans can only succeed in a task if they are provided clear instructions and the appropriate contextual information.

To obtain the desired aesthetic, we interviewed members of ArcTouch’s leadership, design, and marketing teams to define the most important keywords and phrases that represent our brand.

Here’s what we came up with:

• Build lovable products

• Lovable workplace

• We are very reliable

• Commitment

• Sense of ownership

• We care about the results

• Trust

• Polish

• Useful

• Refinement

• Delightful

• Accessible

• High quality

• Technology

• Premium

• Modern

Step 2: Apply keywords to the prompt structure

We used the keywords and phrases identified in Step 1 in various combinations for our mood board AI prompt structure that we tested during the design experimentation.

• The output

• The style

• Examples of references and elements

Now, the fun part – prompting and iteration.

Step 3: Prompt iterations and results

When we started this exercise, we didn’t know how much of the AI-generated content we’d use in our final mood board. We expected that the output might not be completely usable as-is and that actual creative hands-on work would be required to finish this task. What follows are a series of prompt experimentations that generated useful results. For brevity, we didn’t include every variation of prompts we tried, which didn’t generate useful content.

We started with colors. Our branding is known for its bright orange color, so with our first prompt, we kept it simple and direct:

“The image is a modern, refined, and affordable style digital product mood board. The image shows a color palette considering the color orange, icons, and images.”

The result captured the overall feeling we wanted. The composition with orange was interesting and gave us an optimistic view of what would be possible to create. It understood the concept of a color palette. And we liked the overall contrast and distribution of elements. Now, we wanted to dig deeper into technology and our keywords, so we followed with these prompts and results:

1. “The image is a modern, refined, and polished technological style website mood board. The image shows a palette of colors, icons, and images.” (shown at top-left below)

2. “The image is a mood board of a handy, technological, high-tech, modern digital product. The image shows a palette of colors, icons, and patterns.” (shown at top-right below)

3. “The image is a mood board of a premium, technological, high-tech, affordable, and modern digital product. The image shows icons, images, and patterns.” (shown at bottom-left below)

4. “The image is a mood board of a modern, polished, refined, useful, accessible technological product. The image shows icon styles and images.” (shown at bottom-right below)

The subtle variations in our prompts led to a nice array of elements, patterns, and visual styles. Through the experiments, we gained a sense of how the AI tool was working; sometimes, it generated truly original and inspiring results, fusing different elements and, in so doing, creating something completely new.

When we felt we had enough material to define our direction, it was time to assemble the final board.

Step 4: Create the final mood board

Like when a designer goes through their inspiration board and selects the references for any project, we faced the task of assembling our website mood board in much the same way. Starting with colors from our first prompt, we selected portions that were more connected to how we wanted to present our branding: minimalist, energic, and modern.

From the other prompts, we looked closely through the visual references connected to technology. The images with concise round patterns against white backgrounds with soft diffuse light captured the feeling of “polished” that we were aiming for. We added some diffuse light orange elements that could serve as inspiration when we wanted to be more playful with the branding tones. Our human-led, AI-injected process culminated in this final mood board:

We now had our visual North Star for the next phase of our website UI design.

Key takeaways from using AI to generate mood boards

Using AI to help create that mood board definitely saved us some time researching the universe of references and possibilities.

In addition to saving time, the tool provided incredible and surprising results. From just a few keywords entered, we saw results with different levels of complexity that inspired and aligned us as we continued on this project’s creation and design journey.

Here are some of our other key takeaways from using AI on this design project:

• Prompting trial and error is crucial: You need to explore, test, evaluate keywords, and even tweak sentence structure to take AI where you want to go. While our five prompts shown above generated useful and inspiring results, dozens of other prompts didn’t.

• Take an iterative approach: Through the prompts we shared above, you can see the evolution of the visual output. Each prompt had subtle changes based on how the previous one performed. This iterative refinement helped keep the outputs related while offering slightly different results.

• Keyword mapping is fundamental: Defining accurate keywords is fundamental to ensuring results are in line with your brand. Use a balance of descriptive and broad terminology to guide the output without limiting creative possibilities.

• Generative AI is great for components, not necessarily the whole: As you read, AI generated some great components we used as a part of our final mood board. This is consistent with how many professionals are using generative AI tools. It’s great at accelerating parts of a process or project (including how we’ve used AI for app research in our discovery workshops). However, our experienced designers ultimately decided what to include in our final mood board.

Overall, using AI to generate mood boards served its purpose. It provided both inspiration and direction for our designers, simplifying what could have been an exhaustive and time-consuming research process. The tool offered diverse results from our keywords. It served as design inspiration. And it saved us time upfront, so we could move on to what we do best: designing lovable experiences.

Follow along

To read our series about injecting AI into software development, join our mailing list and follow us on LinkedIn and X.

About ArcTouch

ArcTouch has been building lovable apps, websites, and connected experiences for more than 15 years. And now we’re using AI to do that faster and better than ever before. Want to learn more? Contact us for a free consultation.