22 January 2018
web design,website development,designers,white space
Sabnam Thapa
Well, how many of you know that Google also includes a website’s loading speed as one of the crucial factors for search engine ranking?
As a result, today, web development has been all about code optimization in order to decrease the file size and increase the speed of the website. Simply put, code optimization is the removal of the dead codes and white space from the code so that the size of a file decreases, and hence, loads faster.
But, developers often forget that User Interface is also counted when ranking a website; and white space is one of the aspects to consider when creating a good UI. Only a designer can understand it. Though the influence of white space on website design is subtle and isn’t visible right away, it is one of the active elements of web design that cannot be ignored.
So, what is white space? Basically, it is the negative space in a webpage; the space that is left unmarked in web design. Reiterating what you might have already known, white space is of two types. Namely;
· Macro white space - the large space between major elements, such as that between header and the contents.
· Micro white space - the one existing between smaller elements, for example, texts, indents, and buttons.
On the other side of the road, today’s most popular and successful epitome of minimalism are Volkswagen, Apple and not to forget, Google. They perfectly highlight the importance of white space in designs.
Below are the top three facts about white space that no designer should miss.
1. Avoiding cognitive information overload:
One of the best designers, Steve Krug states in his book that th web applications should explain themselves, and if they don’t, the users will have to waste their mental energy on processing information about where to find what they came looking for.
Luke Wroblewski, currently a senior product director at Google also states that “Getting in the way of a speeding freight train usually doesn’t end well. It takes a lot of effort to shift the course of something with that much momentum. Rather than forcing people to divert their attention from their primary task, come to where they are.”
In other words, when a brain searches for one particular information on a web page, and instead finds compelled to process a large amount of information all at once. The result? Without wasting time, they divert their direction i.e. they press the ‘Back’ button - the most used feature of any web browsers - thereby, preventing the cognitive information overload.
The simplest solution to this is the use of micro white space. Increasing the space between the paragraphs, buttons, etc. helps the page appear less crowdy, and thus the mind can easily distinguish the elements on the web page and subtly understand where to go next, thereby, decreasing the information burden from the conscious part of the brain.
2. Tacit Relationship and Hierarchy
According to a research performed by Berlin School of Experimental Psychology, human brains tend to create relationships between disparate visual elements when certain principles are applied to them. In this context, white space helps form mental perception of relationships between the visual elements.
These principles are: - Similarity, proximity, closure, continuation, common fate, and figure-ground.
Namely, by using white space according to the Gestalt principle of Similarity and Continuation, designers can create an informational hierarchy and guide the users from one portion to another in a web page.