Space
Space
Negative space is one of the most commonly underutilised and misunderstood aspects of designing for the page. The parts of the site that are left blank, whether that’s white or some other color, help to create an overall image. Use negative space to create shapes as you would any other element.
Without space there is no music. Try to imagine every note playing at the same time or being played so quickly that there’s no distinction between one note and the next. You would’t have music. You’d have a solid wall of noise.
A few notes played together form a chord. All notes played together form noise. To create rhythm and melody requires a measured and planned space. Music isn’t sound. It’s a balance between sound and space. Without both there is no music.The same is true visually. There’s gotta be enough space. Without whitespace no elements gets seen. They become noise.
What Does Space Do in Design?
Space can be used to both separate and connect elements in a design. Wider spaces separate elements from each other and narrower spaces connect elements to reveal relationships between them. Overlapping elements maximizes their relationship.
By controlling and shaping space in our designs, we create rhythm, direction, and motion. We create design flow through our use of space.
Whitespace does three main things in a design.
- Creates groupings of elements
- Creates emphasis and hierarchy
- Improves legibility
Consistent use of white space across pages connects those pages. Space is layout. When the space in boilerplate elements remains the same your visitors don’t get disoriented. Your navigation stays in the same location. Your logo is in the same spot on every page.
You can also show difference. Sections within your site can maintain consistent space within the section and differ from other sections. As long as the boilerplate remains consistent it’s apparent the site is the same.
Consistent use of negative space is a hallmark of professional design. Look at any design that strikes you as amateur. I can almost guarantee little thought will have been given to the space within the design.
If you arrange white space well your elements fall into place and look great, but if you only arrange the positive elements, your white space will most always be ineffective.
Whitespace gives a place for the eye to rest, which it needs in order to absorb the message you’re trying to communicate. It’s a visual cue that there’s a break in the content or that the content is finished. Whitespace makes your page and site easier to navigate.
Space can be used to convey a variety of meanings, some of which include
- quality – wealth, luxury
- solitude – abandonment, loneliness
- cleanliness – bleached, washed
- purity – unsullied, unadulterated
- spirituality – sacredness, connection to something greater
- openness – distance, infinity
- calmness – placidity, inaction
Negative space can be active or passive. When the space in a design is symmetrically balanced the space becomes passive. It’s static and formal and for the most part boring. When negative space is asymmetrically balanced it becomes active. It’s dynamic and modern and interesting.
How to Use Space in Design
Space creates columns, rows, and grids.
Space in web design can be divided into to types.
- Micro whitespace – is the space within elements, such as the margins surrounding text and the leading between lines of text or the spaces between the individual characters.
- Macro whitespace – is the space between major elements in your design. These spaces tend to be larger and are usually immediately apparent
Micro Whitespace
Micro whitespace is concerned with spaces between smaller elements. It’s space between list items and space between an image and its caption. It also includes the space between elements inside a larger element. For example you might have 2 images in your sidebar that sit next to each other or a search box and a search button in a form.
Much of micro whitespace will take place in your typography. I've written recently about legibility and readability in typographic design as well as offering thoughts on building a typographic stylesheet and I’ll direct you there to more details.
Suffice it to say your use of space in typography plays a huge role in how legible and readable your text is. One of your main concerns will be setting the leading or linespacing which will help determine typographic color and is used to set a vertical rhythm in your text.
Macro Whitespace
Space is used to separate and connect elements. Boxes (borders and backgrounds) are often used to enclose and connect some elements while separating them from other elements or groups of elements. Boxes can be overkill. Yes, they work well at separating things, but they do it too well and can sometimes harm the overall unity of the page.
Space can be used instead of boxes to separate and connect. Again wider spaces separate and in comparison narrower spaces will connect. Space can be a better way to separate elements while still maintaining unity across your design.
Negative space can be used to give emphasis to elements. Those placed within or near large blocks of space gain importance by their separation from other elements. They naturally stand out in a field of empty space as well. Through emphasis we begin to create a visual hierarchy in our design.
Whitespace plays a role in many other design principles. It’s used to achieve balance, both symmetrical and asymmetrical. Space implies rhythm and movement. It’s the ground in the gestalt figure/ground relationship.
Line Colour Shapes Space Texture Typography Scale/Size Dominance Balance Harmony Main
