Web designTips

Why you should ensure that your site has rhythm

Gene Crawford tackles establishing the right visual rhythm for your site when trying to improve overall performance.

There has been a lot of talk in the industry recently about the technical aspects of a 'fast' website. This is well-founded: page loading speed is incredibly important. But I'd argue that a page design that has good visual rhythm is equally important, especially if your page is long with lots of copy and graphics.

The page design for the new Apple iPhone 5C has great rhythm. As you load the page, you find that even the rate of scrolling is timed so you can take in each section

Like a great song that gets you singing along on your way to work, your page design should strive for rhythmic success. The way in which a visitor scans the page as they scroll through it determines if they'll remember any of it, or in the worst case, read it in the first place.

Having visual cues designed into the flow of the page will help. Applying basic design principles – for example, balance, contrast, spacing, proximity and repetition – can all help the visitor identify what's important and focus on it. Having good typography, particularly proper leading and headline-to-body type ratios is also a factor in giving your page design a good visual rhythm.

The website for the web design agency The Band Agency ensures elements are spread across typical vertical design break points so the rhythm of the page moves you to keep scrolling down

Face it: people are not going to spend a ton of time poring over your impeccably designed page. They're going to tear over it for the one thing they've come to your site for. If they're viewing your page on a mobile device, it's even worse. To continue with the song metaphor, the best way to ensure that the content sticks with the visitor is to build in a good 'hook'.

Paying attention to visual rhythm should ensure that your design has all the hooks you need.

The website for the design firm Whiteboard is designed so each section of the page has easily scannable blocks of content. They work together to perfectly time loading graphics and supporting media

Words: Gene Crawford

Gene's mission is to work tirelessly at providing inspiration and insight for developers. This article originally appeared in net magazine issue 248.

Subscription offer

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection