Space & Grouping5:11 with Mat Helme
Space & Grouping are extremely important to a balanced design. In this video we will breakdown both.
[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 up