Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Space & Grouping are extremely important to a balanced design. In this video we will breakdown both.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[Mat Helme] In this video, we're going to bring a whole new dimension to our design through space.
0:00
Also, we'll learn the different ways to group elements or objects within the composition.
0:05
Let's get started—
0:11
Space in a 2-dimensional design creates a third dimension.
0:13
We can achieve this illusion through depth.
0:18
Say if we take 2 alike objects and scale them differently, we have achieved the illusion.
0:21
We know these 2 objects are the same when side by side,
0:27
but when one is in front of the other, we've created depth.
0:31
So, from a side view, the objects might look like this.
0:36
When we are questionable or think there are 2 or more possible meanings to the actual layout,
0:40
this is what we call "ambiguous space"—it's questionable space.
0:47
So, for instance, if we have 2 squares, where 1 appears to be popping up—
0:52
or, wait—is it set in? This is what we call ambiguous space.
0:57
It's a pretty cool trick or usage of space if you want to, say, trick the viewer.
1:02
Now, if the squares are overlapping, making no sense of space,
1:08
this is known as "impossible space."
1:13
Another way to view depth in space is through atmospheric perspective.
1:16
We can achieve this illusion by blurring out the smallest or furthest-looking object,
1:22
or by applying darker tones to the objects that appear to be further back.
1:28
So, again, we can do this by either blurring the smallest object or by making it darker.
1:34
Simply applying those 2 features to the furthest object, which is the smaller object.
1:41
My favorite illusion is linear perspective.
1:48
This is when we take a straight line, which we refer to as the horizontal line
1:51
and add 2 points on either side, called vanishing points.
1:56
Now, when we connect our lines to 2 stacked dots below the horizon line,
2:01
we are able to create a third dimensional object.
2:07
This technique comes in super handy when creating point of view compositions.
2:12
The last illusion I would like to show you uses mass to achieve a third dimension.
2:17
We simply create an object that appears to have weight to it.
2:23
We can take a circle and turn it into a 3-dimensional sphere
2:27
by simply adding shading to the circle to make it appear to be a 3-dimensional sphere.
2:31
Now, I would like to mention 2 words you're going to hear a lot in design, and that is "white space."
2:38
White space refers to the comparison of elements within a composition.
2:45
You might hear a phrase like, "Let the logo breathe a little bit more."
2:50
Simply add more white space around the logo or space between the elements—
2:54
this is referring to the white space.
2:58
By adding more white space around the logo itself,
3:01
we're letting it breathe a little bit more, we're letting it stand out.
3:06
Now that we understand space, let's take a look at grouping.
3:10
The word "grouping" simply means the unity or connection of 2 objects.
3:14
Now, there are different forms of connections these objects can have.
3:18
Take a look at these 2 objects right next to each other—
3:23
they are referred to as having a "touching" group.
3:26
If the objects are on top of one another, they are known as "overlapping."
3:30
Even if the objects have a low transparency,
3:34
the objects might form a third object through overlapping transparency, thus creating a new color.
3:37
If the objects form a new singular object, it's called a "union" grouping.
3:44
If the objects are intersecting, which cancel out each other, this is called "subtraction."
3:49
The piece canceled out is known as the "intersection."
3:56
These principles are known as the Gestalt Principles—
4:00
touching grouping, overlapping, transparency, union, subtraction, and the intersection,
4:03
which is the canceled out piece within the 2 pieces that are subtracting.
4:11
When we look at the composition of objects that appear closer than others,
4:16
they automatically appear grouped.
4:20
This is because the proximity, or measurement between them, is closer than others.
4:22
Another way to group objects is through a similarity or continuity in size, shape, color, and space.
4:27
There is also a principle called "common fate,"
4:36
which states that objects moving in the same direction belong together.
4:39
Take, for example, falling Dominoes—
4:44
they appear to be falling in the same direction, thus we automatically group them together.
4:47
Another principle states that if objects create another object,
4:53
this is known as grouping through "familiarity."
4:57
Space and grouping are very strong tools in creating a solid, aesthetically pleasing design.
5:01
Do you think you have the tools? Test your knowledge in this next quiz.
5:07
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up