This article was contributed by Josh Carlyle.
Achieve order & balance within your next web design by being attentive in the weight applied to the logistics of colors, size, shape and motion.
Here are 8 facts that you need to understand to make white space work for your next web project.
1. Understand clearly. Interpretation = Perception
Understanding that you, the web designer, are the interpreter of your own language or code, is much of the battle when translating your design rendition to the audience.
I interpret that two half circles =(equal) a full circle. This notion isn’t pre-conceived, it’s drawn upon based on my own instinctive interpretation.
When the human brain observes an object or an image, our ‘perceptual’ thought process instinctively categorizes its basic characteristics.
The next spontaneous step the brain takes is to find a place inside its memory bank that corresponds with the object or image.
When you apply your design to white space, the action of the user ‘should’ comply with your instruction – which is the object, image or message that you translate
How this works
The instinctive and spontaneous process the brain uses in ‘figuring out’ image characteristics, is rooted within the ‘Gestalt’ concept in psychology. Gestalt meaning, ‘the whole is greater than the sum of its parts’.
This concept supports the idea that people interpret and perceive images in their simplest form possible.
Our mind acts spontaneously in being able to recognize and fit basic forms, and then make a decision on what to do with it (the meaning=interpretation)
Theoretic of a logistic in white space
In web design, The Law of Proximity and establishing a clear differentiation of boundaries is key in any design piece.
Observing the fundamentals that, elements grouped together are assumed to belong.
Knowing that ‘things’ of a shared likeness such as color, contrast, shape, contour or motion are instinctively interpreted by our brain as the same group or kinship. This is why it is important to clarify relationships when using white space, by ensuring that you set definitive boundaries.
Balance of aestheticism
A principle rule in web design, is BALANCE.
Balance is, in essence, the precursor to establishing an effective negative space arrangement.
Let’s consider the analogy of being in the grocery store at the peak of a Saturday afternoon. Cluttered and overcrowded aisles, trouble manoeuvring your shopping cart, not to add all other interesting and bemusing factors. Still, it’s a distraction when you have a specific intent.
Considering that we don’t come online with the intention of having to task ourselves with additional investigative methods placed upon us, too much content overwhelms the user and is a distraction. Too little content, however, certainly will draw attention to a focal point on the page; but, beware, minimisation applied incorrectly can create the effect of finality or missing elements.
Balance should always strive to improve the organizing of content for easier comprehension. Prioritizing hierarchical elements, reducing clutter and adding content that supports users on their journey, are primary factors when using white space.
Cognitive (digestible) load
The power held within authenticating white space comes from the limits of human attention and memory.
From the ‘don’t make the user think’, school of thought in 1956, Scientist, George Miller released his findings that, our short term memory can usually retain between 3-6 items before forgetfulness sinks in. These findings have led to important interpretation and dissemination methods, such as ‘chunking’ relevant pieces together to make them more memorable. (Remember that earlier concept? – The whole is greater than the sum of its parts)
Too many elements on a page cause cognitive interface strain:- a mind overload, a distortion, therefore reducing the effectiveness of your message and the user’s perception of its meaning.
Attracting attention – This way
Based on facts by Princeton psychologists, Janine Willis and Alexander Todorov that, it takes a tenth of a second to form an impression, and seconds to convey your message, it is, therefore, imperative to be absolutely specific in conveying the elements you interpret in your negative space canvass.
By allowing important elements to be the focal point of space, it establishes a hierarchy in contrasting relationships.
For example, if you have a piece of art, a painting and want to draw attention to it, would the art gallery recommend A) put a frame around it? or B) make a statement by making sure there’s nothing else on that wall, thus being independently proud?
Conviction – Usability is not optional
Every detail of white space use has significance, what you remove from your design is equally as important as what you add. Everything you do, needs planning and purpose; just because there is room for “one more innovation” doesn’t mean there needs to be something there.
The empathic message where content is KING
How clearly defined is your statement?
Put simply, the fact is, trying to say too much equates to an overly complicated message. A good concept is content that matches the style of design.
One size doesn’t fit all. When using negative space, high quality and unbounded authentic content that consumers can actually consume and digest are what will get you the crown.
Rags to Riches – Editing
This is the Achilles heel for many a web designer, that feeling of knowing when ‘it’s right’, intuitively and interpretively can define the outcome of your campaign.
Analyse, adapt and remove every element or piece of content that does not directly relate to the focal point – nail biting, perhaps, but, anything remotely arduous or extraneous is an interference from the intent of the message. Keep in mind that you can always re-add better innovative approaches later.
In Drawing A Line
Why does everyone feel that simple is more sophisticated and beautiful? Probably because simple is scientifically easier for us to process.
The fact is, reduced complexity sites don’t require our eyes, and brains to work as hard to process and decide upon an action.
Attention in striving to prioritize order and balance within your space, is achieved by being attentive, and controlled, in the weight applied to the logistics of colors, size, shape and motion.