Step 3: How to connect with your customers through layout

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.