Brainstorm and build a moodboard

Moodboards are a collage of images, text, and other visuals that help us better understand a brand. This is an informal assemblage — there's no intrinsic need for hierarchy or organization. But when viewed in gestalt, patterns and themes emerge. Putting a moodboard together helps you communicate visually what can otherwise be difficult to describe.

Before you start, have the client put together a list of words or phrases they associate with their brand. This should be a quick exercise focusing on the immediate feelings or emotions the brand stirs up. Think Coca Cola, Apple, and Whole Foods — what words do these brands bring to mind? Your moodboard should start with its own strong list of ideas and emotions.

Imagine you're putting together a moodboard for an organic soap company. What would the emotional identity of a brand like that be? You'd most likely put together elements that evoke nature and a DIY aesthetic. Maybe images of flowers, swatches of pastel colors, and blocks of handwritten text. But depending on the brand’s specific goals, vision, and voice, you might find the visual building blocks need to be very different — it all depends on what you and your client work out together.

Having these different visuals in one place lets you see larger themes and generate ideas. Themes can be tough to communicate, given their abstraction — moodboards help the client and the designer visualize a brand’s essence and how the design will communicate it.

Create a style tile

Let's say you wander into a fast food franchise in a country where you didn't speak the language. Whether it was Burger King, McDonald's, or Kentucky Fried Chicken, you’d know immediately where you were.

Even if you couldn't read the logos, you’d recognize typography, graphic design, and colors. The interior design of the restaurant would also be a tell. Countertop tiles, furniture, and wall colors are all part of the brand’s visual identity. A website’s design should conjure this same brand recognition.

A style tile is a collection of visual components used for constructing a design. They take the broad strokes of the moodboard and transform them into actual building blocks.

A style tile provides a visual guide for the website’s various design components including:

• Logos
• Headers
• Body copy
• Buttons
• Color palettes
• Patterns
• Other brand-related visuals
• Optional: words and phrases that evoke the emotional aspects of the brand

In collaboration with the client, refer back to the words that inspired the moodboard and any other thematic ideas it may have generated. Words like “elegant,” “trusted,” and “quirky” all bring to mind very different things. Consider how to visually manifest those concepts using the tools of your trade: color, space, type, etc.

Then create a(t least one) style tile using the moodboard and the list of words to inform a collection of colors, typography, buttons, and other navigational elements that could potentially become part of the design.

You might even find it valuable to build out multiple iterations of the style tile, both for your own iteration and, potentially, to give the client options. Sometimes showing a couple ideas you don’t want can lead clients in the right direction. Just know that you should be ready to work from any style tile you present!

Clients want to be a part of the process. It's tempting for designers to put on the captain's hat and plow full speed ahead. After all, you're the expert, right? When it comes to design, yes. But your client is the brand expert, so build in time and space to hear their ideas.

When clients know their input matters, they'll be happier with the final product. Style tiles and moodboards create an opportunity for clients to be heard and watch their feedback shape the final website.

Check out our free responsive style tile if you need some help getting started.

Build an element collage

Do you have cool ideas for interactive elements or other dynamic wizardry? Element collages are a good way to collect these in one place and have them look and function as they would in the final design. Whether it's a button with a fancy hover state, or a creative way of revealing different types of content, element collages show the client how things will work when the site is live.

Element collages present various slices of a website's functionality in semi-isolated states, which can make it difficult to imagine how they'll look in a more fleshed-out layout with actual content. Element collages are helpful, but don't get too focused and spend too much time on features that may not make the final cut. Ultimately, element collages are probably best suited for use as a sort of personal scratchpad, where you can add interactivity and animation to flesh out elements from your style tiles and/or moodboards, rather than as a communication tool with clients or coworkers.

Start designing

The look, feel, and visual elements have all been approved. Now it's time to start laying out the pages and integrating content.

A style tile gives you a head start. You’ll save time and have a more focused design rather than working things out as you go. There won’t be any surprises for the client because they’ll already be familiar with the graphic elements.

Style tiles are a good starting point, but you can always make changes if something isn’t working in the actual layout. That bright color scheme that looked so amazing may actually be overpowering. And that overly stylized logo may be distracting in a more minimalist layout. The only way you’ll be able to tell if these styles work is to apply them to the actual design.

During the visual design stage you’ll be:

• Laying out images, text, and other content
• Creating menus and other navigational components
• Making sure the content and design are working together to achieve the site’s goals
• Refining design and content, and making changes as needed
• Integrating client feedback

But before you get to all that, you’ll want to translate your style tile work into real HTML/CSS for use on the site. I.e., to …

Create a living style guide

Most brands have a style guide. Any designer who’s been doing it for awhile has taken a deep dive into Dropbox and Google Drive in hopes of finding the most current version. Even if you do manage to find the latest version, things have likely changed since the guidelines were chiseled into the PDF (ugh).

The best way to make an easily updatable and findable style guide is to create a living style guide. A living style guide exists on the web, in conjunction with the site it serves to provide guidelines for. It’s usually a password protected page on a live website. Here, all of the styles live in one place, where they can be immediately changed and applied.

That’s the key here: when you alter your Webflow style guide, every element that shares the modified class will automatically update. For those of us used to defining a style change, then implementing it, then updating the guide, it’s a sea change.

Editing styles from the living style guide lets you make changes across the site. Feedback from a client can be quickly integrated and a living style guide shows the different visual elements in a design globally applied across the site. How to build a living style guide in Webflow will show you how easy it is to create one.

From a kaleidoscope of ideas comes a clear vision

Improve the web design process. Communicate ideas early and more clearly. Do the prep work — map the content, construct wireframes, and build the visual elements. It's tempting to skip steps, but this will only create complications later in the project.

Be meticulous in your work and in communicating your process. Vagueness leaves room for unmet expectations. When everyone understands the project’s vision and goals, they’re more likely to be happy with the final product.