Principles of Design: Use of Space and The Figure-Ground Relationship
Welcome back to the second part of the ‘Principles of Design’ series where we’ll explicitly talk about one angle from the past article — which is The Figure-Ground Relationship, somewhat profound about this subject at this point.
Design is the game plan of both Shape and Space. To work all the more viably with Space, the main action point is to get mindful of it and figure out how to see it in the composition. You must know how to discover the example of a shape that space is framing and it’s communication.
The Figure-Ground Relationship
The Gestalt Principle, that talks about shape and size is ‘The Figure-Ground Principle’, recall the introduction of it from the last article?
Each aspect of your design will be perceived as one part or other, and the relationship between them is totally unrelated. Nothing can be seen aside from in connection to the next, and transforming one is unimaginable without changing the different too.
The Figure-Ground Relationship can also be combined so that it can improve the characteristics of one other and at the opposite side of the range it can likewise diminish the one other. Along these lines, arranging the two in connection with one another is one of the most significant and crucial pieces of the design. It sets the vibe, setting for how your design imparts and deciphered.
“White space is to be regarded as an active element, not a passive background.” — Jan Tschichold
The 3 Types Of Figure-Ground Relationships
1) Stable (Above Left)
In the above Left Composition, it’s pretty much clear What is Figure and What is Ground, there is no perplexity. One or the other dominates the composition.
2) Reversible (Above Center)
In the above Center Composition, both Figure and Ground draw the viewer’s attention equally at the same time. This creates complex uncertainty by which either can overtake the other and rule, leading to a dynamic design.
3) Ambiguous (Above Right)
In the above Right Composition, both Figure and Grounds’ Elements can seem, by all means, to be both of them, A Figure or A Ground. They form equally intriguing forms, and the viewer like you is now left to locate their very own entry point into the creation.
It’s up to you now, which relationship you want to set up and how you want to adjust Figure and Ground but you have to see that you direct the audience to look at different parts of the design and interpret what they see in different contexts.
Space In Design
Ever been at a gathering, show, wedding or explicitly where melodic instruments like Guitar is played?, No? Why?, Yes? OK!. Consider the man/woman playing guitar for a second and suppose they played each note or chords at the same time, what will you have — THE NOISE, not Music. To hear Music, you have to tune in to something in which Sounds are stood out from Silence. Fluctuating the example of sound and quietness makes Rhythm and Melody. Without Silence, there is no Music.
In fact, it’s not the notes of the music sheet that makes the Music, it’s the spaces between the notes of the music sheet that makes the Music.
Space visually performs the same function in design as the spaces between the notes of the music. It gives elements room to breathe, (yes oxygen is required). It helps in the draw of the eye in the composition by giving the freedom to move. To remind you, the positive is seen only in contrast with negative, the black is seen only in contrast with white.
Without Space, you don’t have good design, you have good clutter. And People are less likely to complain about too much space than about little.
In any case, as usual, there will always be a sort of people who prefer Noise and you need to impart it to them. In this way, there’s consistently the exemption.
Space can do the following in your composition:-
- Set up the contrast, emphasis, and good hierarchy.
- Make dramatization and tension.
- Give visual rest between a gathering of components.
- It offers oxygen to the component, with the goal that it can live and be seen :P.
Also, Figure-Ground relationship infers that you have space just when something is available inside it. Prior to the addition of elements in the composition, space is indistinct. Along these lines, this relationship must be set up before space can exist and it’s starting of communication. Individuals should know what the Figure is and what the Ground is, in short.
Space In Typographic Communication
Recall the example of music from above? Watch this small extract from the film ‘Helvetica’, released in 2007 by Gary Hustwit (Producer and Director) of the legendary designer Massimo Vignelli, who talks about the same in typography area.
In Typographic Communication, one of the significant functions of space is to improve readability and intelligibility. There are two types of space in typography — Small-Scale Space and Full-Scale Space.
- Small-scale Space — The space which is available between minor elements in a gathering. It’s the space between elements like letters, words, sections. Small-Scale Space makes the content progressively legible, yes I’m ‘a’.
- Full-scale Space — The space which is available between significant elements in a composition. It separates elements/groups of elements and aides in the draw of the eye according to the hierarchy and gives spots to rest between the elements. Full-scale space makes the content all the more welcoming. Come Read Me, pls.
Correlation Of Space
Actually I think, Space now generally correlates with Quality and Sophistication. Why?. Ever observed top of the line/premium and discount retail locations, and watched the contrast between them regarding space. Which one has more space inside or which one has occupied every single space of the store with items? Which one? And after you realize the truth, the spaces communicate is fill in the blank, i.e. is quality.
Space can also convey other attributes like Simplicity, Luxury, Cleanliness, Solitude, Openness, Sorted.
Look at the images below, and try to answer the questions that follow:-
Which fashion store do you think has the expensive and inexpensive items? Which store do you think has the items which are good in quality?
It’s pretty much clear from past experiences that the left store looks more sophisticated, premium and represents luxury. Which most of the people ultimately want.
A good design is eventually a course of the arrangement of space, and that incorporates the shapes framed by space. I strongly recommend that view Space as a significant design component, at whatever point you start your new project.
Extra-Info Is Always Extra
Figure-ground is not the only gestalt principle in which space plays a prominent role. Two others are these:
- Principle of Proximity — The principle of proximity use space to associate and separate elements by enclosing a few elements in space. The ideal example which can be expressed here is Text Paragraphs — The Space between lines of text is littler than the space between the new sections of paragraphs. So as to see a proximity relationship, the elements need not to be similar. They simply should be gathered close to one another in space.
Principle of Closure — The principle of closure utilizes space as interrogable gaps between elements. The most intriguing piece of this rule is that the group of people fills those space with their very own information, perception to understand the best possible communication behind the design.
In any case, to apply this principle you should be shrewd enough to know excessively and too little space. An excess of space? Closure doesn’t happen, individuals can’t get it. Too less space? Closure again doesn’t happen, individuals understand it in one look, and that is not the goal of this principle. Just the right balance among space and filled-in space will activate the space and prompt to this principle.
Examples Of Space In Websites
Let’s look at the design of some websites to understand ‘Space in design’.
1) Spotify
What do you see first? — ‘Music for everyone’? That’s what the perfect use of space here, we know what the ground (orange and pink abstract) and figure (texts and CTA button in the center) are. Our eyes are automatically drawn towards the Figure of the page and that’s what the objective is — Copy with Intent and CTA. No additional elements are on the homepage which will disturb the user from tapping on the CTA button, only good space.Examples of Space in Websites
2) Google Design
On the Google Design page, the information is pleasantly presented using the principle of space here. Recall the principle of proximity on the right side — Information is contained and separated by space, recognizing the gathering of elements- one segment speaks to one article.
Furthermore, to make the design intriguing, the recent blog appears in a different and bold way as compared to the left ones by using the bold/abstract image and brief content which takes over the first attention of the user’s eye when she/he enters. While the page is overly generous with space, you’re unlikely to complain that there’s too much of it, which makes the overall relationship, a stable relationship.
1) Android
Again on the Android homepage, usage of space is conspicuous. Making it clear what it is and what to do, with light navigation on top which is not distracting. The principle of closure is at work here, showing less than half of the smartphone and leaving it on the user to interpret that the design is about the smartphone. The White-to-Grey gradient (Space actually) which is flowing from light to dark is actually making the user’s eye to see from bottom to up, see the smartphone > read the content and then navigation.
2) The Pianoman
The Pianoman Website has changed the use of space in a rich route here. As we can see that Logo is the starting point of the user’s eye to begin, use of space around the logo makes it all inviting and prominent. After the logo, the second target of demonstrating what happens when is appeared in a calendar/numbered format.
Notice how the blank area shouldn’t be white. While the page is excessively liberal with space, you’re probably not going to complain that there’s a lot of it. Just significant data — for this situation, dates, scenes and times — interfere with space.
Summary
So, we’ve been educated about two aspects of design in this article. Firstly, the use of Space in design and the Gestalt Principle of Figure-Ground Relationship.
Gestalt standards are imperative to get it. They are the center of whatever we do outwardly as visual designers. They give a depiction of how we outwardly become mindful of objects. In the event, if you haven’t read the initial segment of this principle of design series which is a prologue to gestaltism, you can read it here.
To show signs of improvement and understanding of space in design, explore designs of different spectrums and see how space is used. In fact make an effort of examining space around you like at your home, office and perceive how you’ve unconsciously applied the principles of space there.
Don’t let space be a byproduct of your elements. Don’t allow it to be what’s left over. View it as an essential design element, like type. — Anonymous
In the coming weeks, we’ll continue to look at how gestalt influences design. In the next article, we’ll specifically see how contrast and similarity work in design.
Originally published at https://charchitgarg.com on November 17, 2019.
