Whether you are an experienced UI designer or just a newbie freelancer – there is always a little uncertainty on how to place content. At the beginning of your career, in the middle, or even as a senior of a developing team, you will probably have some trouble. Did you ever happen to see very overwhelmed or very empty pages online? That’s the result of this uncertainty.
What is negative space and how should designers use it?
Negative Space (aka whitespace) is a space between elements on the page. Every button, link and other media content requires to be clearly separated from another to be easily noticed and fulfill its function successfully.
There are several types of negative space applied to a particular content-type:
– Compositional white space: margins, padding, general composition.
– Visual white space: graphics, buttons, form elements.
– Textual white space: headers/paragraphs, text lines etc.
Micro and Macro negative space:
Apart from being separated into types, it is also divided according to a type of page element:
There are Marco and Micro negative space.
Usually, designs of layouts include both of this types.
Marco space is used to create a so-called “big picture”. Begin with working on the new project from creating a wireframe or a prototype to see the Macro negative space. You separate a webpage into blocks of content to see the general composition.
Micro negative space regulates space between all non-significant page elements (navigation links, image gallery, lists), media content (images, icons) or for text (headlines, paragraphs).
Every web designer uses negative space differently depending on the type of content. For example, if a webpage is meant for advertising of a product or a service, you may leave a lot of negative space on the landing page to point out a CTA button. However, that won’t be possible when designing for online shops as there is much more content to place. But even in such situation you will have to leave negative space, just less. Yes, content also would be placed more carefully in comparison to spacey landings.
The main point is -Â negative space has to match the placed content. There are no certain rules that regulate design decisions, but here is a piece of advice:
1. Understand the website and its organization: decide on the right amount of attention points, so when you add something – take out one point. It will help you to avoid overcrowding the page.
2. Take a look at the arrangement of negative space in similar layout designs.
3. Keep in mind that relationship towards the content are decided by the white space around it. Passive space makes it more spacey-feely, while negative space draws users’ attention to a particular point.
How to apply negative space successfully you ask?
1. Unique. Practice different arrangements. Some websites would need more white space, while other could go with less.
2. Readable and easy to comprehend. Before sitting down to design, write down the list of necessary interface elements to estimate how much content will be placed within the webpage. Try to create a rough wireframe to see how much space is needed to clearly and effortlessly make out words and see placed media.
3. Fresh. Go for contrasts: proportionate font sizes and asymmetrical negative space create stylish layout.
Negative space effects how people see and react to this or that content. Applying negative space helps you practically and aesthetically. Practical side of negative space allows you to create a structure around content, which is vital for design’s success. While aesthetic side of it creates a complete composition.
Summing up, remember that:
Negative space helps content and overall website design.
Space between parts of content will separate it into blocks.
Additional space around a particular bit of content will draw attention of visitors as there is nothing else to distract them.
