White space why

The photographs reveal the story of the work they did for previous clients, such as Land Rover and Chanel. Many images link to the same page, but give the impression of linking to something different, which is a big no-no in UX design. Sasaki is a design agency providing a suite of solutions including architecture and interior design. They communicate to the user who visits their homepage that they know a thing or two about the power of good design. They do this with the carefully thought-out layout which utilizes white space to draw attention to and emphasise the colorful logo.

The immediately leaves an imprint on the mind as it stands out in stark relief against an otherwise white background. Oral healthcare company, Quip , focuses on providing a user-centric approach to the design of their products but also their website.

The Quip website uses crisp imagery against a minimalist background. They make great use of passive white space around their menu options. They also demonstrate clever use of the Gestalt principle of proximity by grouping related elements together throughout the homepage, such as similar menu options and reviews. To showcase their products, they made sure to center their images and text paragraphs, leaving plenty of lateral margin space, making the text easy to scan for the user.

Their text to imagery display follows an attractive Z pattern to keep the user engaged with the content. However, their website does more than simply tell a story of how they got started. It captivates the user from the start as soon as they land on the homepage and it does this with some clever white space design. By using an array of overlapping text and imagery against a smooth pastel space, the logo, navigation menu and hero image has plenty of breathing room.

It makes the user feel at ease, which is how they want their customers to feel in the kitchen. Wealth management company, Wealthsimple , aims to help customers from a non-financial background invest in a simple, hassle-free way, providing both technology and human support to help.

They place an emphasis on the simplicity their products and services can bring to the lives of their users by utilizing plenty of white space in their website design. Readable content follows an F pattern from left to right. Meanwhile, captivating, dynamic imagery sits cosily tucked away to the right of the screen, making it noticeable but not distracting. Interior design consultancy, Avery Cox Design , aims to showcase its design acumen with its minimalist, luxurious white space web design.

A bright and colorful hero image featuring a living room interior contrasts nicely with the surrounding white space. The dividing macro space has been well-thought-out, with the various sections of content on the homepage given adequate room to breathe.

This example is a little different to the rest that are on this list in that Heights is not actually a live website but a Squarespace template. Each of the elements are separated and given breathing room, such as the logo, the menu, the catch phrase and CTA.

The designer made great use of the Gestalt principle of proximity here, dividing the navigation menu into groups of similar options. Woven Magazine takes an interesting approach to their white space design. For example, at the top of the page, the first thing the user sees on the left is their menu.

In the middle rests the logo and to the right — a search bar and cart. Each of the three types of elements are separated with considerable but equally-proportioned white space, followed by a large hero image that occupies the rest of the screen. White space is a real element in web design. The lack of content is as important as the presence of content on your website. Think of white space as Yin and Yang.

For the content on your website to really shine, you need to follow the best practices of white space design. Not all websites in all industries will be the same, however, and you must always read between the lines when it comes to each case. Which content is the most important, and which can you keep for another page? What order should it be shown in? Where on the screen is it most likely to garner attention?

If used well and correctly, it can transform a design and provide many advantages to your website. We need to deliver and develop layouts that are easy on the eyes and make people want to keep reading. With all of these great benefits, we also need to understand that even with the best intentions, whitespace can often be crowded out of a design. In order to prevent this, we need to understand why it happens and how to resolve it.

Whitespace not only creates harmony, balance, and helps to brand a design, it can also be used to lead a reader from one element to another. Put your CTAs on the most relevant pages to improve your chances of higher conversions.

As white space reduces the chance of readers being distracted and gives more attention to your CTAs, visitors are able to better digest the information on your site. Websites that are full of cluttering information are not a pleasant experience for online visitors. This is why web design is so important. When a person has landed on your site because of a search they made on a search engine, the design of your website is a key reason for keeping them on your site. White space helps them understand your site and avoid making them feel overwhelmed.

There's more news on Ad Blocking with Adblock Plus selling ad space to site owners and content Written by James Davies Web design 3 minute read. Wondering what to read next? Where white space is said to hang , this can affect the size of the box when measured for intrinsic sizing. The property specifies two things: Whether and how white-space is collapsed.

Whether lines may wrap at soft-wrap opportunities. A line breaking opportunity exists after every preserved white space character, including between white space characters.