How To Incorporate Your Brand Into Your Website

As you may have guessed from the breakdown of Beardsgaard Barbers’ website and the rather lengthy case made against ugly websites, your salon’s website is a hot button issue for us. At the risk of sounding like a broken record, we can’t stress enough how important your website is to your overall business health. One of the things that we’ve been discussing this month is the fact that your site is the very first impression that a new potential client has of your salon, so it should definitely reflect your brand. It’s all fine and good to state that, but I think we can take it a step further and show you how. Let’s get to it.

*Want to take it a bit further? Learn the basics from this article and put it to use with our Build A Better Website for Your Salon eClass!

Site Structure

Believe it or not, the way that your site is set up and how it is navigated is a reflection of your brand. If your salon is billed as “cutting-edge” or “ultra modern,” you will want to keep the site clean, simple and minimal. Your content and pages should be kept to a minimum and I would suggest having large, prominent imagery (that you pay a professional to take for you). Sites with a parallax scroll feature—which is a background that moves more slowly than the site’s foreground—are a really popular design choice and for good reason; the large images and space for auto-play videos makes a serious impact.

If your brand is a little more on the traditional, homey or even kitschy side, you may want to take the focus off the photos and incorporate more design elements like icons, backgrounds and illustrations. Like our Anatomy of a Salon Website example, Beardsgaard Barbers, you can have a little more fun with your section titles and navigation, and in general, just more of everything.

One final note on site structure. Regardless of your brand aesthetic or personality, you will want to make sure that your site design includes a hamburger menu. If you are viewing Industrie on your smartphone, you will see 3 lines at the very top of your screen, below our logo. That is a hamburger menu. In contrast to a traditional horizontal menu bar, the hamburger menu is more streamlined and tailored to mobile navigation. Given that 80% of internet users own a smartphone, you’re going to want to make sure that your site is responsive (read: mobile-ready).

Copy of Hipster_palette1

Color Scheme

There are two main schools of thought when it comes to identifying a brand color scheme: single associated brand color (a la Tiffany’s) or an entire palette that a brand will utilize for different purposes. At Industrie, we use a hybrid approach. We have a “hero” color that acts as the cornerstone of our brand palette. We use this color on all of our branded materials, and very, very sparingly as an accent color on our site. We have a lot of reasons for this, but the main one is because our site’s imagery changes out so often that we wanted to leave room for experimentation rather than tying ourselves down to a single color.

Your brand maybe different. A lot of salons use a single hero color to differentiate themselves from their competition. If you are targeting male clients, for example, you will want to stick with a color (or colors) that appeal to the demographic of men that you are focused on (you can see which ones those are, HERE). If you have a single brand color, look to a few obvious places that you can incorporate it into your site design. Section titles, blog post titles/in-body headings, and buttons are great places to add a punch of color and to keep the thread of branding running throughout your site without overwhelming your visitors.

The biggest takeaway here is to make sure that your color usage does not compete with the other elements of your site. So, if you want to use multiple colors on your site, keep everything else, namely fonts and images, clean and minimal. A lot of color is its own visual statement.

Beardsgaard_photogrid

 

Images

This is arguably the most important feature of a salon website. Remember, your site is just a vehicle for your product—your salon services. The use of high-quality imagery can make or break a website design. Put some thought into how you want to showcase your brand, and how you can use your photos to reflect that. Is your salon decor really indicative of your brand? Using a lot of in-salon shots, both pulled back to show as much space as possible in the frame and close up to focus on individual elements, can give a great feel for your brand.

If your salon is more about showcasing client work then it could be beneficial for you to set up a separate area to shoot before/afters so that the images on your site have a consistent look and feel.

There is so much that can be discussed when it comes to imagery, that this is neither the time or the place to delve into it all. So, here are the two main things to remember when choosing images for your website:

  1. Consider the space: A full frame image (like a full-width header or the background to a parallax scroll site) needs to be shot wide in order to fill the frame. Unless you are using a wide-angle lens, you will need to shoot to reduce by about half. This means, whatever photos you are taking, imagine it cut in half, in order to crop it wide.
  2. Scope out the neighbors: Every time you shoot an image for your site, think about what is sitting next to it. Think about color as well as composition. For example, if you have an image with the main subject off to one side, you will want to balance that image with whatever you place next to it. Take the photo grid on the Beardsgaard Barbers’ homepage for example. See how the composition pattern is “middle, middle, to the right”? It keeps the page section balanced.

Site Copy

Fun Fact: I love fonts. I could scroll through pages and pages of fonts for hours on end. While I was making my third cup of coffee this morning, I was thinking about making a Master Guide to Google Fonts. Everyone has their thing, ok? So mine is fonts. Big deal. A good font choice can really differentiate a brand, and make a serious impact. Used wisely, a single font choice can make your brand recognizable, anywhere. Let’s take…oh I don’t know, the New Yorker for example. This high-brow periodical uses a distinctive font (their signature is Irvin if you were curious, but as Irvin doesn’t work on mobile screens, they switched to Neutraface for digital applications) and incorporates it in areas of high interest across their site, mainly as article titles, and section headers. It is also the main—and in this site’s case the only—decorative font used in design pieces like page headers or slides.

Of course, like all good things, decorative fonts are best used in moderation and if you have a really ultra-modern brand aesthetic, not at all. Before you commit yourself to potential weeks of font research, think hard about your brand aesthetic and site layout. To avoid clutter, you want to limit yourself to three fonts across your site: headers/titles, design elements, and body copy. The first two can use the same font, but the body copy should always be in a font that is clear, simple and legible. The body copy is the bulk of the wording on your site and you want your visitors to be able to read it easily.

Another note on copy is voice. The way in which your site is written is just as important as how it looks. If your brand is all about vintage pin-up girls, victory rolls, and rockabilly, for example, you may want to toss in some slang like “Daddio,” “Hepcats,” and “Welcome to downtown Coolsville. Population, us.” That type of voice only works for a very specific brand, though, so give careful thought to how you want your brand portrayed. Classic and traditional? Hipster? Masculine? Casual and friendly or ultra-professional? One of my favorite all-time examples of brand voice is Thug Kitchen. This cooking blog has spawned two best-selling cookbooks and a huge social media following and here’s the kicker—it’s vegan. Sure, their recipes are delicious, but the hook is the brand voice. Granted, Thug Kitchen has become hugely popular, but that voice would not work for say, the New Yorker (actually, come to think of it, that would be hilarious. I’m half tempted to make a parody mash-up site now, just for kicks). In any case, before you sit down to compose or rework your site copy, give careful thought to what your brand should sound like.

Shameless Plug: We have an entire section dedicated to developing site copy in our Build a Better Website for Your Salon e-class, complete with worksheets to walk you through it.

Incorporating your brand into your website really comes down to paying attention to the details. By employing a few tools and devices, you can impart the feel of your salon in the digital space giving potential new clients a good indicator for whether or not your salon is the right fit for them.

*Was that a bit much? Or are you just not into building websites at. all. That’s ok, we can do it for you! Check out our Salon Snapshot!