top of page

Using AI While Branding

Using Open AI to aid in branding a high fashion website.

What's in Store

  • Problem Space

  • Project Overview

  • Utilizing AI

  • Branding Results

  • Summary

Robot

Problem Space

What's the Issue?

Designers can face decision fatigue when coming up with new branding and color schemes for a product.

This decision fatigue can leave designers feeling frustrated and defeated.

How Might We use AI to help with this decision fatigue?

Project Overview

Branding Ideation

Before we even dive into the color palette and fonts for this brand, we need to make sure we know who we are!

  • Startup Company

  • High Fashion

  • Designer Clothing and Accessories

  • For Women

Pencil

Current Content to Mood Board

Starting with your current content and ideas for the branding, create a mood board or a board of your most important content - in this case, photographs of the models in the pieces for sale. This will help give you an idea of ​the overall aesthetic of your pieces together.

From your content and pieces, you may already know who your target audience is.  In this example's case:

  • Young adults, likely millennials.

  • Working professionals.

  • Trend-following individuals who embrace startups.

MoodBoardPreAI.png

Utilizing AI

Bringing in AI Assistance

Since we have our content and know who we are as a company, we can better ask an AI tool to aid us in our branding.  Now, let's go to OpenAI's ChatGPT to generate a color palette based on this prompt:

"Make an accessible color palette for a startup high fashion company." 

From this prompt, we got these colors:

1_lWTkcTZxbcWevxfmSJyrwQ.webp
Original.png

You'll also notice in the screenshot above that ChatGPT also generates use cases and reasonings behind each color choice.  For instance, it suggests that the "Creamy Ivory" #000000 be used for text and content while "Rich Navy Blue" #001F3F be used for the primary background color, and together they have a high contrast that aids in accessibility of the site.

However, this color palette does not really match the overall aesthetic of out content, pieces, or our mood board from earlier.  It reminds us of existing high fashion brands like Gucci, Ralph Lauren, and Tommy Hilfgier, but not so much us.

So how can we make sure this palette matches our content with AI?

tumblr_m4teyjbyuk1r8qb4k.jpg

Bringing in AI Assistance, Part 2

You never want to use AI as a crutch or replacement of you.  And since the first prompt we sent to ChatGPT didn't generate exactly what we needed, let's try to get more specific with a new prompt:​

"Make an accessible color palette for a startup high fashion company for Millennials." 

From this prompt, we got these colors:

Millenials.png
Millen.jpg

ChatGPT still generated use cases and reasonings behind each color choice in this round.  It still suggests that the #000000 be used for text and content, but replaced the #001F3F for "Slate Gray" #444444 be used for the primary background color, and together they have a high contrast that aids in accessibility of the site and give a timeless look to the brand.

This palette does a better job matching the overall aesthetic of the brand, but it's not entirely perfect yet in terms of the exact shades and use cases.

So how can we make sure this palette is perfect?

Utilizing HI (Human Intelligence)

This is where your skills and creativity come in to play!​

The palette you generated is so close to perfection.  You have a great base to start with - now you just need to figure out how to perfect it for your brand.  But how?

Rubik's Cube

Step 1: Evaluate the Colors You Like vs. Don't Like (and Explore Why)

Great for the overall palette aesthetic. Great for the footer.

Millenials.png

Great for the overall palette aesthetic. Great for primary background.

Love the dusty rose, but it needs to be darker to be more accessible for title copy.

Love the addition of blue, and it's great as a secondary color. But it needs to be darker to go better with the muted scheme.

Love the olive green, and it's great for CTAs and a pop of vibrance. However, it needs to be darker to be more accessible.

Too close to the other grey in the palette - we only need one.

Great for the navigation background and for text on images and in the footer.

Too bright for our palette.

Step 2: Make Changes Based on Your Preferences & Needs

New primary background color.

Final (1).png

New primary text color

New Secondary background and text color.

New tertiary background color and text color.

New primary accent color.

New secondary accent color.

New CTA color.

And now you have your final color palette!

Back to the AI Board

Now that we have our color palette, we need to dive into our text styling for our branding.  We know where we want to start:

We want our fonts to be:

  • A strong pairing

  • Chic and trendy

  • Accessible

UsabilityAndWebsite.png

Bringing in AI Assistance

Similar to when we asked ChatGPT to create an accessible palette for our high fashion startup for Millennials, we are going to give it a very similar prompt for our font pairing:

"Make a trendy and accessible font pairing for a startup high fashion company for Millennials."

From this prompt, we got this font pairing:

Heading and Logo: Didot  Body Text: Source Sans Pro  CTA Text: Avenir Next
MillenFont.png

Return of Human Intelligence

Now that we have this font pairing, we want to add our own pizzazz to the fonts.  Just because AI told us to use these fonts in a certain way does not mean it's written in stone.​

Use your creativity, knowledge, and skills to adapt these fonts to your liking.

We really like this font combination, but we find that sometimes the fonts are a bit too narrow for accessibility and our preference.  So we can take initiative to make them bold or italic where necessary.

Didot for headings and the logo can be bold or regular or italic. For the logo,         is distorted to be tall and narrow. Source Sans Pro for body text is regular. Avenir Next for CTAs is bold to ensure accessibility and to stand out.

Branding Results

Final (1).png

Bringing it Together: AI-Only Branding

Now that we have our color palette and our fonts (plus their use cases), we can dive into creating a more accurate mood board, followed by style tiles, and finally designing the interface.

Heading and Logo: Didot  Body Text: Source Sans Pro  CTA Text: Avenir Next

Mood Board & Style Tile

Let's start with the original color scheme that AI generated.

 

If we had stuck with this original color palette, we would be left with an outdated and unrelated-looking brand and style.

1.png
OGFashionStyleTile.jpg

Style Tile

High-Fidelity Mockup

Bringing this mood board and style tile to mockups, it further confirms that if we had stuck with this original color palette, we would be left with an outdated and unrelated-looking brand and style.

We need to remember that AI, like Chat GPT’s, knowledge doesn’t know anything from 2020 to present day. So while this style tile may have worked in 2019, it may not work for current trends, designs, and today’s audience using this specific brand’s site — especially since this style fits more with a medical practice website than that of a high fashion brand.

 

This is why it is crucial to go through a couple AI generations before you get to one or two that you like.

So what will all of these deliverables look like with the addition of Human Intelligence?

OGFashionLanding_Preview.jpg
Final (1).png

Bringing it Together: AI x HI Branding

Now let's look at bringing it all together with our branding that we generated with AI and our own skills and creativity.

Using the color palette we generated with AI and then adjusted with our own skills, we can dive into creating an even more accurate mood board, style tile, and finally designing the interface.

Heading and Logo: Didot  Body Text: Source Sans Pro  CTA Text: Avenir Next

Mood Board & Style Tile

Now let's dive into what our branding created by both us and AI will look like.

From the assistance of AI to our own human intelligence, we were able to get out of our decision fatigue and curate a great, on-brand visual aesthetic for our brand and our website.

2.png
FashionStyleTile.jpg

Style Tile

High-Fidelity Mockup

These styles that we put our 2 cents into really made a strong impact on the branding for this high fashion company.

It matches and enhances the content in a perfect way where it can highlight it while also working with it to guide the user through the page, while also bringing attention to the CTAs and information about what's new and what's available.

 

This is why it is crucial to go through a couple AI generations, and insert your own skills, knowledge, and creativity, before you settle on anything.

ED.png
FashionLanding_Preview.jpg

In Summary

We need to remember that AI can’t do it all for us — it’s more like an assistance in our work rather than the do-er itself.

When using AI, make sure it’s not your crutch and you’re not relying on it to complete a task or even your projects. Use it to assist you or get you out of a rut — don’t let your AI do all your work, or you’ll end up with an outdated medical site for your high fashion brand!

Final (1).png
bottom of page