My approach to creative direction for the web

Over 4.5 years at Whiteboard, I developed my method for drafting creative direction. Much of it is built around my preferences. But I'm sharing because I think there are universally applicable learnings. Reach out on Twitter(X) and let me know what you would change for your process.

I prefer web creative direction to be a bit more in the weeds

It might be helpful to compare and contrast brand guidelines with web-specific creative direction. When defining a brand, it's ideal to keep a healthy amount of altitude. Lots of disciplines will refer to it: designers, writers, strategists, salespeople, etc.

To make sure it serves a broader audience, brand guidelines should focus more on the intangibles. Things like "How do people feel after they interact with our brand?" or "When people read things we've written, who do we sound like?" In other words, brand guidelines tend to be more successful when they are more agnostic of where the brand gets implemented.

Creative direction for the web, on the other hand, is about defining what it looks like for the brand to live in the browser. With such a specific context, I find it more helpful when the creative direction asks and answers more practical questions.

Take, for instance, a client who has deep experience in their industry and they want to establish themselves as a thought leader through content that's displayed on their website. In the brand guidelines, you might have more general direction on tone of voice. You might have developed the brand to feel more mature and authoritative through color, typography, and image treatments.

In the web creative direction, I think you can go a layer deeper and start asking more practical questions like: When we show thought leadership content, should it always be accompanied by a unique visual style? Do we use imagery or illustrations or keep it text-only? Do we modify the typography system a bit to emphasize authorship or should we stick to the universal system? Should the content live on the flagship site or would it help to give it a separate platform?

Getting that in the weeds at the beginning of the project helps to know how to push and pull the design system for the web. If you know on the front end that content will be a big priority, it will help to know where content should fall on a page (early on or closer to the bottom) and you can de-emphasize lower-priority sections to make the content section stand out and feel more important.

I try to create space for clients to have more of a voice in the final design

When I first started at Whiteboard, our first design deliverable for the web was mood board selection. We put together 2 or 3 boards and asked the client to choose which one they preferred. From there, we would design a full home page. We ran into a couple of issues with that method.

The limitations of mood boards

First, some clients don't know what to do with a mood board. They asked us questions like, "What should I be responding to?" or "What happens if I like elements on different mood boards?" At times they would get frustrated because they didn't have the words to explain why they responded positively to one board and negatively to another.

Second, by asking a client to choose a mood board, we're reducing their impact on the design to a single choice. They can choose A, B, or C.

And last, mood boards are really about other people's projects and not about the client's website. When they're choosing a mood board, they're letting you know what their taste is, but they're not truly helping to guide the creative for their project.

Creative prompts

Over time, we moved away from mood boards. We still used inspiration, like what you would see in a mood board, but the inspiration was there to illustrate our ideas for what the site should look like. We called those ideas "creative prompts."

In other words, instead of using mood boards to show what the visual style of the site could look like, we use creative prompts to function as a guiding principle for how to make design decisions about elements of the website. And, our inspiration helps to make that guiding principle a little more concrete by showing how others have made similar decisions.

Generally, we used 3-4 creative prompts that worked together to inform the full system for the website. So, there might be a prompt about using character illustrations to make the site feel warm and people-centered, another prompt on discoverable content to keep informational pages from getting too dense, and a final prompt on how to show product images to recreate the experience of a demo on the site.

By sharing the prompts with the client, we're revealing what our "rubric" will be for making decisions about their site and how it ties back to the strategy. They get to give input, responding to both the prompts themselves and the inspiration that illustrates them. That gives us a much clearer picture of what the final site should look like.

Make it easy to make design decisions

Creative direction is a helpful tool in aligning with a client. But, I think it should primarily be a tool for helping you (the designer) to make design decisions.

I watch a lot of fine art painters on YouTube. A traditional technique I learned about is called the grisaille. You create an underpainting using shades of a single color. Then, you glaze over the underpainting with color. The benefit of the grisaille is that you're separating decisions about value and color. In the grisaille, you don't have to worry about color.  You're just trying to get the shadows, mid-tones, and highlights correct. Ultimately, it's a method of making decision-making easier.

I think the creative direction should have a similar job. When you're designing, it's difficult to build momentum if you're having to make decisions about everything (type, color, graphic elements, etc). If you've made decisions about some of those things before you've even started designing, it'll be much easier to start and it'll feel like you're able to build momentum faster.

Choose inspiration that helps to point to where you want the design to go

Here's another learning from fine art painters: the reference is everything. One artist I've watched on YouTube, Chelsea Lang, said that 80% of the work of making a painting is everything that comes before you start applying paint and that the most critical element to ensure a painting's success (particularly if you're painting from a photograph) is the reference material.

In design, we never make design decisions in a vacuum. We're constantly being influenced and inspired by the things we see. All of our work is made in conversation with what has come before. It's a mistake to pretend that we can make something truly unique. We should lean into the natural way humans create things. No matter our discipline, all art is a mixture of our inspiration combined with and altered by our singular perspective.

Lean into that process and be intentional about what you are inspired by for a particular project. Take screenshots of things that feel like avenues you want to explore and that could make the project more successful. Do this early on so that you can digest the inspiration and it slowly starts to ferment alongside your ideas. And later on, when you're stuck, come back to your inspiration to remind you of where you originally wanted to go.

Find the patterns and give them a label

When I search for inspiration, I wait for my intuition to respond to something. I screenshot anything that feels like it could be a helpful idea for my project. When I have enough screenshots, my next goal is to figure out if there are common threads woven throughout all of the inspiration.

What I hope to uncover is the principle informing the visuals. For me, this is a key difference between copying others' work or following trends and being inspired to create original work. If I just have the inspiration and I don't know why it's inspiring, the only thing I can do with it is copy it or follow it. But, if I'm able to articulate why I'm responding to similar things, the inspiration becomes an example of the larger idea.

For example, I've noticed that a lot of crypto brands like to use futuristic landscapes as a graphic element. This might be a pattern because the promise of crypto is of a radically different (financial) world from the one we're used to and they're inviting you to be a pioneer in that new world.

Now that we know the idea of being a pioneer is the principle behind the inspiration, we can start thinking about ways to express that principle without reusing the idea of futuristic landscapes. That thread might lead us to create something radically different from other brands in the same space while still emphasizing the idea of pioneers that resonate with crypto users.

Spend time on "divergent" exploration

Not everyone is like me, but my bent is that when I happen upon a path I like, I get emotionally attached. It takes a conscious effort for me to pause what I'm working on and attempt something completely different. It feels like I have to tear that direction out of my hands.

I encourage myself to do divergent explorations by actively remembering several things:

1. The first thing you design that you get excited about is not always the best design.
2. If it is the best design, spending time validating that by trying other things eliminates second-guessing the design later on.
3. Sometimes I merge ideas from different explorations to add depth to the visual language, like having a drink with multiple flavor notes.
4. When I get feedback from peers, if I show multiple variations of things, I might realize by seeing things through their eyes that a direction I was attached to is less successful than another direction I was less enthused about.

Like I said earlier divergent exploration is tough for me. It has gotten easier with time. If it's tough for you, one exercise that I've found helpful is to draft divergent explorations of the same design.

For example, I might try 3 or 4 radically different ideas for a call-to-action section. It's almost like an A/B test for my taste. By designing with the same content, I'm spending less mental energy on answering some of the UX decisions and more time on the pure visual experience.

Take this opportunity to extend the brand where it needs it

In general, there are two main moments in a brand's lifecycle when a website is being worked on:

A new (re)brand

When an organization launches a new brand or refreshes their existing brand, they typically provide brand guidelines. Guidelines can vary quite a bit in their scope. Some simply declare a color palette and a typography system. Some outline a much more robust brand with visual guidelines, supporting patterns, and tone of voice. But with almost all brand guidelines there will not be enough to support a full website's visual language.

That is why, during the creative direction, it's helpful to begin extending the brand. Think purposefully about how the guidelines will get implemented on the site. For example, does the color palette outline the primary and secondary colors? Does it suggest a color for CTAs? A common issue with brand guidelines is that they don't have enough neutral colors, typically warm or cool grays, for things like borders, cards, and section backgrounds. As the designer, you can point out some of those holes and make recommendations on how to solve them.

The crucial thing is to be mindful of how the client will be receptive to the recommendations. If they've just gone through a (re)branding process, they will be very sensitive to any perceived changes to the guidelines. So, it's critical to present your recommendations as extensions and not changes.

A new website with an heirloom brand

Many projects also come about in the absence of any kind of brand work. The challenges with these projects can be several:

• The heirloom brand is a little bit outdated.
• The brand has gotten a bit inconsistent in application over the last several years.
• The brand is a little light because the organization hasn't had the necessary resources to invest in it.

With all of these possibilities, the client is likely aware of these issues and may be more open to evolving their brand in preparation for their web redesign. Here, the critical thing is to position the recommended changes as either evolutions or streamlining and not as a full-scale rebrand.

For example, typography is typically a huge help for these types of projects. Either the organization didn't invest in a strong type system or the type has become a little outdated. Updating the system has the benefit of dramatically increasing how bespoke the brand feels without feeling like a large-scale change. In other words, it's a change that can be made that doesn't threaten to upend brand recognition.

Think about the overall design system and bring cohesion to your exploration

After a divergent exploration phase and thinking through brand extensions, it's important to decide what is going to be brought into the creative direction and to bring a layer of cohesion to it all.

Does the new type you want to recommend cohere with the additions to the color palette? And do those changes cohere with the creative prompts and their respective inspiration? It's natural in the divergent phase for things to feel like a mix of ingredients. In the convergent phase, it's time to modify the elements, possibly removing or adding some, to help make it feel like everything is contributing to telling the same central story.

Often, this is best done with writing. We've already talked about finding patterns and giving them a label. In the convergent phase, it may help to add some exposition that unpacks those creative prompts with more specificity. Or, it might help to add some exposition to your inspiration, documenting why it's included in the creative direction.

Build trust with a thoughtful creative direction presentation

All of the previous work will not reach its potential for influence if it's not documented well and if it's not something that gets buy-in from all stakeholders (both internal and client-facing).

Take the time to design a beautifully crafted deck that carefully unpacks the creative direction. Have these purposes in mind:

1. Give the client a platform for helping to shape the visual direction of the website.
2. Create a tool that helps you to make design decisions. And, ensure it's effective not just at the beginning of the project, but also in the middle when it's easy to drift a bit from the original vision.
3. Make space for pointing out where the brand needs to be extended and build a strong case for your recommendations.
4. And, maybe most importantly, build trust with the client. Establish your expertise. Show that your design decisions are thoughtful and engineered to meet their business objectives.

Not every client is going to be a great partner. But, the more you can lead the client while helping them to influence the project through their expertise and their tastes, the easier it will be when you arrive at the more subjective feedback sessions like the home page review.