We can all agree that one shouldn’t judge a book by its cover, but we also know that we’re all guilty of doing just that. In fact, visitors will land on your page and decide whether or not to engage without even realizing it, all based on your web design. Visual cues speak so much louder than words and will lead a visitor to judge your website as relevant or random, legitimate or flimsy before they even read the header text.
If this visitor decides they jive with your branding and clicks through, your web design will determine just how far they get. Effective web design is where CRO (conversion rate optimization) and UX (user experience) meet. All of the effort you’ve poured into your thorough data and analytics, on-point SEO (search engine optimization), and clear calls-to-action could be in vain if your web design doesn’t properly ground those features and retain your visitors’ attention.
But don’t let the importance of web design scare you away from making big, bold choices! The beauty of web design is that no decision is ever final. With some pointed A/B testing, you can easily find the sweet harmony between your design elements to really get those trackpads clicking and boost your visitor engagement stats. Don’t know where to start? Here is a list of web design elements that you can play with to refresh your website and convert your visitors into users.
1. Visual Hierarchy
One of the most important things to understand when designing a landing page is visual hierarchy. There is a specific pattern the eye tends to follow when presented with a new webpage. The most successful landing pages are organized in a way that takes advantage of the eye’s tendency to scan the screen in an F or Z pattern. Working with the natural flow of your visitor’s attention will help you to guide their attention through the most important visual information, and land on your strategically placed CTA (call to action) button.
So how does it work?
Users first make a horizontal scan across the top of the content, forming the top bar of the F. They then tend to scan across horizontally, a bit lower on the page than the first scan. This is usually a shorter scan and forms the lower bar of the F. The user then scans down the left side of the content, forming the vertical bar of the F. This means that if we were to split the content in half diagonally from the top right corner to the bottom left corner, the left side is where a user’s eye is more likely to linger. This could be because users are used to expecting navigation bars, and tend to repeat the pattern they usually make, running along the top and left sides of webpages.
Now while this has been proven to be true with text-heavy web pages, image-based web pages tend to receive attention in a Z-shaped pattern. Landing page design in particular relies on the Z-pattern to guide new visitors’ eyes easily from captivating images, through crucial information, towards a perfectly placed CTA button.
Examples in Web Design
Check out how French fragrance brand Diptyque focuses all of their text-based information on the left-hand side, and their visuals on the left. They’re not trying to challenge your eye and force it into an unnatural pattern across the page. They’re letting it linger to the left so that the visitor can scroll through their products easily.
A French digital marketing agency called Reestart is a great example of understanding the rules and deliberately breaking them. They play with the fact that your eye will scan across the page and lead it along a zig-zag path as you scroll down throughout their testimonials (which, by the way, are an amazing element to tie into your web design. They offer social proof that what you’re selling is doing what you claim it does, and add a human touch.)
2. Colour Palette
Choosing the appropriate colour palette is one of the most essential web design decisions you’ll ever have to make. Colour speaks to our emotions and we all know that eliciting an emotional response is key to engaging visitors. This is one element of web design that is actually applicable to much more than just what we see on the internet, and we can use that fact to find endless inspiration.
Feeling overwhelmed with the choice of colours in front of you? Unsure which hue works with which tone? Build yourself a mood board or follow a website colour guide with plenty of potential palettes to choose from. Great sources of colour combinations you might never have thought of are photos of interior design, textiles, nature photography, vintage book covers, and even street fashion. Gather all of the images that make you stop and take a second look and pick out the colour moments that seem the most fresh. Focus on neutrals to create a sense of calm and serenity, complementary colours for a sense of excitement, or keep it simple and cultivate some mystery by sticking with mostly black, white and shades of grey.
Never forget the power of colour. The combination of bright green and black from Spotify is iconic, as are Facebook’s blue, Slack’s purple and Google’s primary colour palette. The great thing about colour is that a little change goes a long way. Hold onto your F- or Z-shaped page organization, but swap out the colours for an easy refresh.
Examples in Web Design
Look at how striking natural wine importers Ward et Associé’s landing page is, balancing out their neutral base colours with a vibrant salmon hue. It’s buzzing with excitement and pairing the minimal design with such an electric colour is bound to make the visitor curious about what kind of wild products they’re about to find.
Compare that to tableware importers Fable’s pale, comforting tones that evoke a more relaxing, easy energy. The visitors to this website will be happy to find minimal, beautifully crafted products that will fit seamlessly into their cozy homes, just as the light pink and navy blue seem to suggest. Note the decision to go navy and not black-navy is a much softer alternative to potentially jarring black when juxtaposed with such a delicate tone of pink.
3. Fonts
While we’re talking about easy changes for major impact, why not freshen up the fonts on your website? It’s important to use a variety of fonts to differentiate sections of text because it will help the visitor’s eye glide along the page and follow that F-shaped pattern we now know is so important. The fonts you choose say a lot about who you are, so do this with a clear vision of your branding in mind.
Imagine what it would look like if you changed the larger blocks of text on your landing page from a sans serif font to a classic typewriter font. Or what about changing the navigation button text for something a bit more subtle than what you currently have? Have fun with it and don’t be afraid to experiment, because this one simple change can lead to big improvements in visitor retention on text-based content. If you’re not satisfied with the data after making this kind of change, simply change it again!
Examples in Web Design
Looking for examples? Check out designer Tej Chauhan’s gorgeous industrial design website. The industrial typewriter font he uses fits perfectly with his branding. This choice has a lot more impact than had he used a more simple sans serif font. Notice how the second big block of text is in an even cleaner font. This makes the large amount of text seem a bit lighter as it’s been broken up stylistically. Companies like Amply web design agency know how to create that brand vibe.
4. Lightboxes
Lightboxes have the dual advantages of tidying up clutter on your landing page and grabbing visitors’ attention in a more targeted way. Interrupting the visitor’s scanning of the page with a lightbox will show them a limited time offer or something new they would not have seen the last time they were on your website. They are one of the simplest ways to improve your UX and conversion rate in one slick little rectangle. Or square. Or circle, who am I to judge? Lightboxes can be added on top of whatever design strategy you have going on at any given moment, so they are simple to add and painless to remove. They will never require you to modify your design as it is, which saves you precious time and energy.
Examples in Web Design
Advertising an offer on a landing page is a surefire way to get your visitor to consider your product or service a little more deeply. Take a look at this lightbox that pops up on Blue Apron’s website, for example. They create a sense of urgency by adding a countdown, and their language of “reject” or “get” is highly effective. Who would want to reject an offer for $60 off of anything? Using such a strong word evokes an emotional response which we all know is the best way to get a visitor to engage.
5. Animations
Animations and video just scream for attention, and they always work. They can capture a mood or an emotion, but also practical information and ideas, depending on what works best for your brand. Videos and animations can convey loads of information while taking up a small amount of the page’s real estate and are therefore very useful tools. The danger with them, however, is that they can slow down load times, especially on mobile, so the line between just enough and too much can be quite thin. When considering adding animations to your arsenal of web design elements, be mindful and go easy on those potentially sluggish components. It is possible to have too much of a good thing!
Be sure to focus on responsive web design so that visitors across a wide array of devices all have a positive experience with your website. Mobile browsing is predicted to account for 54% of all e-commerce sales by 2021, so while those large videos are catchy, they could also cause your visitor to leave the page before it’s even finished loading.
Examples in Web Design
So how do you do it the right way? Take a note from Paloma Wool, a small Spanish slow fashion brand that really takes advantage of having one large video on their landing page. This niche kind of fashion is all about moods and emotions, less about ideas and information, so this large, single-shot video fits the brand perfectly. (And remember the mention of using street fashion for colour palette ideas? Scroll a bit further down, past Paloma Wool’s video and you will find great examples of fresh colour combinations. Seafoam green, flamingo pink, oatmeal and burnt sienna? Who ever would have thought of that…)
Let us help you!
Web design is one of our specialties. This list just scratches the surface of what we can do for you to help optimize your website and increase your conversion rate and UX. Learn more about our web design service here.