Aside from when they’re sitting on Santa’s lap, people usually give each other a certain amount of personal space. But personal space doesn’t just exist for people. It’s necessary in design too.
In web design, space refers to the area surrounding the elements that allows a design to breathe. To wrap up the series, Applying the 7 Principles of Design to WordPress, I’m sharing some tips and examples of websites that nicely demonstrate the design principle, space.
Example: ADC
With vast white space around its elements, the ADC website uses a less-is-more approach. Logos are arranged nicely and the slider peeks at more if you want it—but space is plentiful no matter which route the user takes.
Example: Vogue
With ample line spacing and varied image sizes, the Vogue website uses columns and grids to arrange elements with plenty of white space throughout. The cut-off logo also adds white space and simplicity to the header.
Tips to create space
- Allow elements on the page to breathe by providing adequate white space around text, images, navigation items, headlines, etc.
- Use a grid and columns for layout
- Allow enough line-spacing between text for easy readability
Have any great examples of websites using space well? Share away!
