Your salon’s site is more than just an obligatory line on your business card. As stated in No More Ugly Websites, Please, it’s a one-stop hub for your entire business. Since your website is likely the very first impression that a potential new client will have, it should be treated as simply another extension of your brand.
There are various ways and means for incorporating your brand into your website, but the end goal should always be that a visitor will have a taste of what it would be like to visit your physical location, via your digital one. Here, we will examine our featured shop, Beardsgaard Barbers’ website, to see how they worked elements of their very strong and very niche brand into their digital presence.
Beardsgaard went with a simple parallax-scroll site structure to keep the focus on the content of their site, while still maintaining a strong brand “feel.” This site structure has become increasingly popular, as it allows the focus to be put on a single element by having the background move at a slower rate than the foreground. Some parallax sites stack images and backgrounds, and once the user scrolls to the next section, the background will move with it. It is even possible to use videos in this format, and when used properly (note: with images/videos of the proper size and resolution) it can make for a really impressive site experience.
The main design element of Beardsgaard’s site is the wood grain background, which plays nicely into the woods-y “craftsman-of-the-shire” feel of their shop. With so many elements of woodland fantasy (a la Lord of the Rings) at play in their physical location and their online retail arm (which we will cover a little further down), it made perfect sense here to use this style.
Beardsgaard is a barbershop, which means the use of natural darker colors is a great choice. The main color at play here is gray (in various tones), which is offset by a little taupe, courtesy of the wood-grain, along with white and black. The accent color, a brightish mossy green, has been used very sparingly, on just a couple of links and buttons. This subdued color scheme is not only in keeping with the Beardsgaard branding, but also a great choice for their target clientele—dads and either overt or closet supernerds, but otherwise they vary from the giant biker/Viking/lumberjack types to modelesque grandpas to average Joes.”
By keeping the number of colors used to a minimum, the overall effect is clean and uncluttered without being stark. Most importantly, it puts the focus on their incredible imagery.
Depending on how you structure your salon’s website, the images may have the leading role. This is something that we cover extensively in our Build A Better Website for Your Salon e-class; the cleaner the site, the more focus is put on your imagery. In Beardsgaard’s case, it works, as they have access to trained photo pros and really fantastic natural light. The color scheme used on the site also plays really well with the decor of their physical space, which is why it all flows so nicely together. By putting the focus squarely on their imagery, they are able to give potential clients the feeling that they are getting a glimpse into the world of Beardsgaard. This is the end goal of a business website. It is a place for current and potential clients to still feel as though they are interacting with you and your business.
In an alternate example of the power of site imagery, let’s examine Beardsgaard’s e-commerce arm: River Peak Apothecary. Here, we see an entirely different aesthetic, but by keeping the overall feel the same, via color choices and the use of hand drawn illustration, which mirrors the Beardsgaard logo, the continuity is kept. This may seem like a small thing, but it allows Beardsgaard to keep their target market focused and delivered a continued branding experience from the point of entry all the way through the purchase.
Now, I’m going to cheat a little here and talk about two things at once—voice and font choice. As the Beardsgaard brand personality is such a distinctive one, both the voice used to develop the site’s copy and the font choice to portray it are equally as distinctive. While I would normally caution against the use of a highly decorative font in a lot of areas (the prettier they are, the harder they are to read), here, it makes sense.
The smatterings of Olde English throughout client, service and look descriptions keep the feel of the shop running throughout the site and further emphasizes the fact that this is not merely a brand to the Barbers of Beardsgaard—it is a lifestyle. The sheer commitment to this sort of branding cosplay speaks volumes about Beardsgaard’s authenticity; an integral quality of any good niche brand. The site keeps its kitsch factor in check by providing more useful information than jokes. The breakdowns of popular looks, care and styling guides, and instructions on how to properly use various styling products are knowledgeable, to the point and still enjoyable to read. As a whole, the site conveys the exact feel of the shop—that one nerdy friend in the group who may reference a lot of shows and movies that you’ve never heard of, but who knows everything there is to know about their “thing.”
Altogether, where Beardsgaard’s site truly excels is in the cohesiveness of their site with their brand. From visiting the site, you get a real sense of what a visit to their barbershop would entail, which is the main goal of any business website. There are clearly defined areas of interest a unique retail experience and plenty of attention to detail. Much like the work they perform daily on the various beards and fades of their native land so does Beardsgaard take great care in maintaining the integrity and purpose of their brand, throughout their digital realm. And lo, the people did rejoice, for there was much excellent bearder-y to go around.