Learning to love negative space
Demonstration of negative space in a website design © Amy Richardson
For those of us starting in web development, we focus on the core skills needed, HTML and CSS. From semantics to specificity, rules must be followed for content to show. Building your first webpage is both daunting and exciting. Putting those countless hours of study into a visible structure to prove your new skills is a milestone. Before we build, we produce wireframes and documentation to detail our features. We consider where to ‘put’ everything. Yet, for many new developers, the principles of web design are often overlooked.
Ready, set, go...?
The eagerness to jump straight into coding on a new project is understandable. Who wouldn’t want to try out these new wizard-like skills? We know that planning is key but we can’t help ourselves. We fire up a new repository and begin laying blocks of code. We know how to create what we want the user to see. Yet, we have not considered the visual impact as a whole. For many, our first webpage is ‘busy’; the user has a lot of visual information to contend with. Content is placed out of balance with other content on the page. This can contribute to cognitive overload and most likely, the user will not return.
Lack of planning, and limited working knowledge of CSS, can create a lot of frustration and a knock to the confidence when previewing our first webpage. ‘Why does it look like this..?’. What often follows is lots of coffee and a crash course on browser developer tools to try and salvage our new build. Spending some extra nights studying the principles of design would prevent the new developer from experiencing this situation, but, for many, the time or the want is not there. If you have not yet crossed paths with these principles, start now, and permit me to suggest one to start with.
Negative Space
Negative space is the space that exists between and around the physical objects that we see within our environment. In design it is often called ‘white space’, the ‘lack of content’, and it is explored in ‘Gestalt Principles’. Gestalt Principles discuss the process of how we visually perceive order. The two most important principles for a beginner are 'Proximity' and 'Similarity'.
Proximity: Objects that are close together are perceived as a group. We use the section tag in our HTML structure to separate groups of different information. We use CSS to style the section. Applying the proximity principle, we would allow generous spacing between sections. Styling them close together would give the impression to the user that the information is connected. Don't be afraid to use your margin property.
Similarity: Objects which are similar in their form or colour are perceived as a group. When planning our website, we consider our color scheme. The most successful websites stick within a three colour palette for their elements. Blacks, grays and whites create excellent contrast for text with bright colours best reserved for similar areas like headings, menus or key areas of the web page. Negative space plays a key role in presenting this visual hierarchy for the user. Appropriate use creates a more coherent and pleasing experience, hopefully encouraging the user to return.
These principles, and many others, are expressed everywhere in our daily lives. You may not be aware of them when they are present in a successful design structure but you most certainly will notice them when they are absent!
Application
To summarise, on a web page, negative space exists between elements on the page and within the element’s contents. We control it with margins and padding. We gain an understanding of how much space our element occupies through our learning of the box model. It gives our CSS some predictability. Of course, it is important to mention that negative space is not necessarily ‘white’. It can be any color, it can be a pattern, it can be a large background image; it is simply the lack of content. For the next project you work on, when it comes to UI, ask yourself whether every element, content block or feature is necessary. Can it be done with less?
We build on our skills through the mistakes that we make. They help us to see the bigger picture. For me, discovering negative space was a lightbulb moment. I was studying Animation at the time and in a life drawing class, a chair was placed within our circle of easels. Our instructor had asked us to draw the space around the chair. We all paused, confused as nothing was there, but after a few moments when the concept had sunk in, we put pencil to paper. Applying this to web design, we would connect this idea to the invisible supports that hold your key features up. The absence of content and the breathing room that exists between features allow the person viewing your webpage to focus on where you would like them to go. The information presented on a page balanced with negative space is absorbed comfortably by the user. There is satisfaction in order and tidiness and we execute this concept on most of our professional materials already, for instance, our CV. Less is more.
It can be tempting to pack as much in as possible when we start building websites. There are so many incredible ways to present content, but before starting your next project, consider the negative space as your first stop.
To delve deeper into design principles, check out these links:
