Can you hear the sleigh bells jingling? The holiday songs you hear on the radio have rhythm—and so should your website.
In web design, rhythm suggests implied motion and moves the eye of the viewer throughout the design. In my series, Applying the 7 Principles of Design to WordPress, I’m giving some examples of sites that use rhythm in a cool way, and sharing some tips on how to do the same.
Example: 2015 Lunar New Year Election
The Lunar Election website uses lines that lead the eye down the page with implied movement. On the flipside, the site also uses actual movement in the news ticker with breaking news and with the goat, ram and sheep in formalwear that keep the viewer’s eye on the page.
Example: Cornelius Krumps
Cornelius Krump uses direction to dig deeper. It employs the parallax effect to keep the background moving separately from the text. Recipe cards fade in and out creating an interesting rhythmic experience throughout the site.
Tips to create rhythm
- Use lines, arrows or other visual cues to draw the viewer’s eye
- Position faces so they engage with the design and do not allow the eye to wander of the page
- Include transitions or other moving elements to create interest
Know any sites that are using rhythm really well? I’d love to see them. Next up—Design Principle No. 7: Space.
