Did you know your web design has a temperature? Not a fever, but a temperature like warm, cold, hot or even neutral. Temperature is another way to describe your design’s tone.
Tone is the balance between light and dark in your web design. Combined with hue, tone is in the shades and tints that make up the full spectrum of colors we see. These basic art concepts are important to talk about with your web designer. But art isn’t for everyone. That’s where temperature helps. I find that everyone agrees more easily when we talk in common terms.
We’ve already featured web designs with nice, warm tones. Warm websites use yellows and reds as well as smiling, welcoming faces to make visitors feel cozy. But warmth isn’t the be-all and end-all of web design tones. Let’s flip the script and talk about web designs that cool it way, way down.
Café Evoke uses a cool tone to set themselves apart from other wine and restaurant brands. They feel elegant and refreshing, casual but focused. My favorite part of this design is how lines and colors overlap each other, almost haphazardly. Tricky effect to pull off, but the tension between the slightly shifty color blocks and carefully placed lines makes the overall layout feel effortless.
Second favorite thing about this design? Check out those great colors! Fresh mint, muted gold and plenty of white space keep this site cool. Thin borders and no less than four unique fonts suggest a curated, but unstuffy variety of products to experience. Cool natural light in the photographs ties them to the mint color and differentiates the cafe from the typical warm and rich restaurant branding.
Black is the coolest color. So cool it’s technically not even a color. Finely’s spare homepage is like a CIA-redacted letter. Information’s on a need-to-know basis. Everything else is blacked-out. To their credit, the text is sharp and plainly written. But you get just the facts.
While it all feels a little brisk, there’s nothing like an elegant cold-shoulder to make you curious, right? Keeping information off your site is one way to get interested parties to call your number.
You might wonder how this site performs in organic search. It probably doesn’t do so hot. There are just a few words per page and no blog. And considering this agency operates in London, competition is fierce. But it may not matter! Finely must have other marketing initiatives to back up their sales, using the site to make a great second impression as their staff networks and builds relationships in-person.
Like Café Evoke, Tyler’s site uses a crisp color palette based on sparing shots of cerulean blue, warmed up with easy-to-read grays for body text. It’s a very neutral design, letting the portfolio screenshots stand out. The blue spikes it with just enough branding and polish to make Tyler’s site stand out from the millions of other portfolio sites.
Like Finely, Tyler’s site seems shallow. But it’s a great starting point for exploring some featured projects, his posts on the portfolio site Dribble and other social media sites. Besides the logo, the only other blue of that shade is the primary call to action. Clearly, he wants visitors to reach out by email. And beside seeing more details about his projects, that’s all you can do on the site. Which is actually pretty neat. As a visitor, I like having options (like seeing all those projects) but I really like it when my next step (get in touch) is set out clearly before me.
There’s nothing blue about Bioscience Advising. But like Finely’s sleek, black homepage, this site’s crisp edges and elegant black and white photographs are designed to invite questions. That’s why it’s cool. Like we learned exploring warm web design, tone isn’t just a color thing. Color contributes to building an emotional state in your visitors that aligns with your goal for the design. Text and photography help too.
Bioscience Advising cultivates a professional, polished look that asks visitors to step back a little. Maybe read the services page first and learn about their expertise. You may find on your own that you’re not the right fit. But it’s not all cold calculation. Green picks up the biology aspect and orange draws attention to the primary call to action.
Air One’s web design is primarily cool, crisp and professional, favoring blue and grays that are easy to read and invite trust. Red, for heat (and America!) is strategically deployed in calls to action. A company that specializes in keeping you cool (and warm, when the weather’s right) needed a little heat to even out the temperature.
Each of these designs uses color, shape, line and content to develop a cool tone. Whether they’re building trust, keeping secrets, taking things seriously or breaking from the norm, these web designs are the product of careful planning to choose and develop tone. Businesses are looking for action, requiring thoughts and perceptions, which require a specific feelings that tone can help create. How do you want visitors to feel about your business? What do they need to feel to be persuaded to take the action that meets your goals?