Space: Design Principle No. 7

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

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

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!

About Jill Anderson

Hi, I’m Jill, a WordPress web designer/developer who partners with talented designers, copywriters, and agencies on their websites, and their client’s sites. I’m passionate about crafting beautiful and innovative WordPress websites focused on clear positioning and positive user experiences.

Get new blog postsGET NEW BLOG POSTSIN YOUR INBOX

Like this? Get new posts via email.

No spam, no worries. Just my bimonthly(ish) blog posts straight to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *