You’ve probably heard of the phrase, “don’t judge a book by its cover,” but the reality is that homepages, layouts, and the overall design of a page gets consumers looking at your products. In today’s market, where 80% of all luxury sales are influenced by visual representations of brands online, there is more pressure to ensure your website looks good and navigates well. It’s all about a seamless visual branding and great user experience. Apart from finding the right eCommerce platform for your brand, you also need to create the perfect digital storefront that consumers will love. Let’s go through some layout strategies and how your colour palette will compliment your design.
What Does A Layout Do?
It’s very important to have a good layout that ensures information is easily accessible and also creates a clear path of navigation between webpages that keeps users engaged. When exploring different layout options, take a look at your competitors and brands you admire. How much information do they give on the homepage? Studies have shown that the internet is causing us to have shorter attention spans, so you’ll need to ensure that the content you show on your site really sinks in. As part of this, you’re going to need to keep the following points in mind:
• Website goals – Define your site’s goals. Whether they are to sell products or showcase new ones, you need to know your goals so you can tailor your layout accordingly.
• Ease of access – A site that is a pleasure to use and navigate through is one that customers will be happy to come back to. Making it easy will encourage customers to explore every part of your site, thereby increasing traffic and sales.
• Traditional or alternative layouts – Just because traditional layouts are proven successful and efficient does not mean it’s the sole thing to use. For instance, you may want to break the mould with different structures in your design to make a bigger splash.
• Focal points – Headings, images and buttons are important parts of a layout, and they can also all be focal points to draw a user’s attention to. Think about what would be more effective for your chosen focal point. Users that concentrate on these focal points will be more likely to interact with them.
• Images – Did you know that we can process visuals 60,000 times faster than text? Look at your brand’s key elements and the ways you can showcase them.
• Storytelling – Many brands use digital storytelling to evoke an emotion and create a connection with the brand. CHANEL is a great example of storytelling because they create a world in which you can explore the many chapters of the brands life.
• Testing – Don’t be afraid to test several layouts to see what fits best with your brand and its content. Try different media and see what works – just don’t forget to test it out on consumers!
The Colour Palette
The colour of your site is just as important as its layout. Oftentimes, colour can be overlooked, but it is actually one of the key elements that defines who you are as a brand. The right colour has the ability to mould our perception of a brand and arouse memories and emotions. To this end, use colour theory guidelines to help you discover what goes well together. Additionally, make sure to:
• Look for a colour or palette that compliments your brand. Are you bold or edgy? What about innovative and confident? Or maybe you’re warm and comforting – is that you? A colour can often be remembered before a logo, so make it a statement.
• Think about what impact you want on your consumers. What do you want them to think of when they look at your site and your products? Cause an emotion that keeps people coming back.
• Give your site a personality. Colour not only connects your customer to the brand, but also to you. Make sure to give it personality!
• Use complimentary colours that make your site appear as smooth as its layout. You want something cohesive that looks good as a whole.
• Be careful about how many colours you use. Too many colours can make it too busy, so incorporate different hues to move customers towards links and other content.
• Use the same colour throughout your website. Using the same colours will help guide a user’s eye through your site.
Now that we have looked into layout and colour, it’s good to take a look at some brand examples to see how they’ve optimised these features.
Tiffany & Co.
A great example of a good layout and colour combination is Tiffany & Co. Each section of their homepage is designated with a banner and appears in a grid. This simple layout is effective for customers to browse through and is crucial in driving alternative sales because they make it easy to discover new products without having to touch the content bar. The site is complete with touches of their signature robin egg blue colour that appears everywhere on it. This colour, along with the logo, is so prominent within the brand that it’s also featured on products and packaging. The colour evokes feelings of romance, complimenting their story focus and signature jewellery.
Versace’s homepage layout uses a similar banner and grid combination as Tiffany’s site, yet showcases far less content for the user to see. This layout is easy on the eyes with set category options, showcasing their newest collection, followed by women’s and men’s. They have also created a new arrivals category that sits perfectly between the latter two collections, connecting them both by showcasing items for him and her.
Their colour palette is plain with grey borders; not even the signature medusa logo is sporting its signature gold colouration. Considering the variety of each collection, having a simple grey and black format for the layout works well, as there’s no clash with any colours, allowing for product images to really pop.
Gucci takes on a different approach on its homepage compared to the previous brands examined. While the product pages are set in a grid format, the homepage uses banners that span the entire page and can expand or retract to fit with the browser size without losing any part of the image. The top page features a rolling banner with images and a video; the heading and buttons for each category sit on top.
The images and products featured on the homepage are bright and eye catching, contrasting against the simple black, grey, and white layout colour palette. The site images evoke stories and a curiosity to explore links. There is even a section dedicated to brand stories.
As you can see above, each brand takes a slightly different approach to layout and colour palettes, yet they all use simple layouts and optimise them with images and features to create a simple but effective user experience.
Layout and colour are powerful components to drive traffic and sales on your site. With eye-catching layouts, paired with content that is easy to navigate and has a personal touch, you’ll be able to retain your user’s attention and keep them browsing. Cause emotion with your site; tell a story or evoke a feeling with colour. Don’t let a customer forget you, and keep them coming back for more following these guidelines:
• Establish your focal points – what would be most effective?
• Make sure your layout is user friendly
• Do you want to tell a story?
• Don’t be afraid to test out layouts
• Use a colour palette that compliments your brand
• Feed your colour through the entirety of the site
• Think about what impact you want on your consumers
• Be careful about how many colours you use – incorporate different hues to compliment your main colour.
Jessica is a creative content intern writer for creative digital agency Appnova, based in London. She writes a variety of content based on current trends within the digital world, providing insight into a range of topics from eCommerce to marketing and design.