Prologue
This week Kyle gave us a link to a talk by Liz Danzico, the talk about the Power of the Pause.
The Power of the Pause
Liz talks about how the Pause and Silence can be powerful. She uses the term whitespace which basically mean pause. As designers, as much as we value whitespace, we tend to fill it. This was something I was taught to do in Art and Design, fill up all the white space. In UX Design, it is the opposite. The basic role of white space is to let your design breathe by reducing the amount of text and functional elements that users see at once.
Pauses and whitespace highlights important information.
The majority of information we have on the web and in mobile apps is in written form. So, it’s essential to design in a way that makes it easier for users to read your content. White space can enhance readability by making it easier to follow content and see elements on the page.
Create connections between individual elements
White space has a tremendous impact on how people comprehend information because content relationships are defined by surrounding negative space. The Law of Proximity, one of the basic Gestalt laws, states that objects located near each other appear similar. It’s possible to say that white space acts as a visual cue to give our brains a signal that the image below is not a collection of individual objects, but rather a single unit.
Drive user’s attention to particular objects
Good design guides users through the interactions on a page, and white space plays a major role in this process. It’s possible to define a relationship between an amount of white space and user attention, the more we add white space near a particular object, the more attention it receives from users. This occurs when the area that the object is near has nothing distracting away from it. The technique of using white space to drive user attention works well for promo landing pages. It’s possible to direct user attention towards specific content or functional elements (such as call-to-action buttons) using white space.
Create visual hierarchy on a page
Visual hierarchy is about organizing content to help users easily process the information on the page. When visitors open a new page, they scan it rather than read it. Good visual hierarchy significantly improves the scannability of a website. White space allows designers to create a general flow that the user’s eye will follow when they scan a page. There are two basic approaches to placing elements on a web design grid, symmetrical and asymmetrical. Symmetrical layouts can be easier on the eyes. Since symmetrical design has built-in order and stability, it becomes easier for the brain to comprehend information.
Asymmetrical, on the other hand, is the absence of symmetry. In design, asymmetry is often used to create visual tension. Designers typically create asymmetrical layouts to bring attention to a particular area or elements on the page.
It’s important to remember that both symmetrical and asymmetrical layouts should be balanced. To master balance, you need to measure the visual weight of each individual element in your composition. Visual weight depends on the size of an element (smaller objects weigh less than larger objects) and visual attributes, such as contrast (contrasting elements attract more attention than neutral elements).
Convey a feeling of elegance
White space has a significant impact on how your design is perceived it plays a vital role in brand positioning. Paired with crisp typography and powerful photography, generous white space can easily make your design look luxurious. It puts a product you want to promote in the spotlight and gives users a clear signal that the product is the most critical part of the page.
White space is never wasted space
White space is a powerful tool in the designer’s toolbox. Applied properly, it becomes an integral part of visual design that acts as the glue that holds the different elements on a page together while improving the interface’s usability. We need to remember white space right from the beginning of a project creates a spacing system that specifies the set of possible spacing values. As a white spacing system becomes a part of your user experience UX design systems, it forces you to choose from the list of predefined values, which allows you to produce a more consistent design.