Step 3: How to connect with your customers through layout

Find out how to connect with your customers through web layout

How’s it going with your online store? We’ve got 5 simple steps you can use to build success with your e-commerce website. You can find our earlier articles about Step #1, Message, here and here. Find an article about Step #2, the significance of imagery, here.

Now for Step 3: A quick one about layout.

I’ll try to make this fast and painless. Because, unless you’re a graphic designer, you probably don’t enjoy discussing layout! So here’s what you need to know about layout for a killer site that allows you to get noticed and sell more stuff with less hassle:

Typography. This is the term for all the text in your design, the fonts and sizes used, and how they show up on your site. You should use a consistent hierarchy throughout all pages when applying size, weight and strength of your header, sub-header and body text.

The size of your text should be balanced and consistent. That means use the same font throughout your site for your body text, and the same font for all of your headers.

There are so many fonts to choose from and it can be tempting to try to use all your favourites, but, limit yourself here! Choose one font for headers and one more for body. Maybe if you’re feeling really creative, choose one more additional display font. And make sure your chosen fonts play well together! Don’t pair two serif fonts together, or two really boring fonts. Again, you’re looking for balance here. There can be a bit of an art to this. Working with a good designer can help here, because they’ll do this automatically and you won’t have to think about it, but you can totally do this yourself too.

Bonus Tip: Here’s a good cheat sheet for how to pair fonts together!

Keeping it simple with typography ensures that your site visitors are not being distracted by how your words look, but they’re actually reading and connecting with your thoughtfully planned out message!

This goes without saying, but please use very readable fonts and text sizes! Same as above, don’t distract your customers with funky things that are hard to read.

Colour and White Space. Be sure to use colours that compliment your branding. Stick with one main accent colour to draw attention to certain things (like your call to action buttons!) Use restraint here as whitespace is your friend!

French composer Claude Debussy said, “Music is the space between the notes.” The space between notes allows them to resonate, reverberate, and reach their full potential. Without this space, the result would be noise!

Yes!! It is the same thing here! Let the white space allow your message and your images to resonate with your customer! Don’t contribute to the noise on the internet!

Don’t contribute to the noise on the internet!

Animated Elements. There are lots of spinning, sliding, fancy things that developers can do on a website. Some of them are cool, some people like them – whatevs. We are of the opinion that simplicity is best: less is more. But if you like a cool animated element and want to use it – go for it! Just make sure it enhances your customer’s experience and doesn’t distract from it.

Just the right layout can be a tricky business, but hopefully these tips help you connect with your customers by being easy on their eyes!

Step 3: How to connect with your customers through layout

You can skip to other articles in this series:

Blog Series

Categories

Recent Posts

Step 3: How to connect with your customers through layout

You can skip to other articles in this series:

Blog Series

Categories

Recent Posts

You May Also Like

How to Cut Down on Customer Service Emails with your Shopify Website

Three Things That Give Your Website a Killer First Impression

Getting Your Website Ready for Inbound Holiday Traffic