Line, Shape, and Form4:50 with Nick Pettit
First, we're going to focus on line, shape, and form. These are some of the most fundamental elements of art and design, and they're all closely related.
- Line - A point that moves continuously.
- Shape - Areas defined by contrast.
- Form - Geometry that exists in 3 dimensions.
First, we're gong to focus on line, shape, and form. 0:00 These are some of the most fundamental elements of art design and 0:05 I think you'll find that they're closely related to one another. 0:08 The most basic element of art and design is line. 0:12 A line is a point that moves continuously, like the motion of a single brush stroke. 0:17 Sometimes a line is all that's needed to create an image. 0:25 Like in this case of a figure drawing, lines can both unify and divide. 0:28 A horizontal line might create a peaceful horizon in a landscape, 0:36 or a line can be used to break up a space. 0:42 For example, horizontal and vertical lines can be used to divide different sections 0:46 of content on a website into logical groups. 0:50 And communicate organization and stability. 0:53 However, lines can also be diagonal or wavy in shape. 0:57 There could be scribbles all over the screen that are still just lines. 1:04 This has a tendency to communicate disorder and 1:08 chaos, and that's not necessarily a good or a bad thing. 1:10 Understanding the elements and principles of art and 1:15 design from an objective perspective can help you use them to your advantage. 1:17 You might use diagonal lines to help lead the viewer's eye. 1:23 Or you might use chaotic squiggly lines to draw more attention to 1:28 a part of your design. 1:32 Lines can also take on different qualities. 1:34 Lines might be solid or dashed. 1:38 And they might have a very straight edge or a rough edge, like a brush stroke. 1:41 If you're familiar with CSS, the border property maps to this idea. 1:47 A solid line can communicate something that is definitive and 1:52 absolute, while rougher lines might indicate that something is more temporary. 1:57 For example, dashed or 2:03 dotted lines are sometimes used to indicate an edge where someone should 2:04 cut the paper with scissors, such as a coupon or a shipping label. 2:09 The next element is shape. 2:15 Shapes are areas that are defined by contrast. 2:17 For example, a shape might be defined by a set of lines coming together 2:22 to form a closed area or a shape might be defined by a difference in value. 2:27 A shape could also be an area that's different in color. 2:34 In software and on the web, you find geometric shapes everywhere, 2:38 and in particular you find lots of rectangles from content cards, 2:43 and drop down menus, to the actual screens themselves. 2:48 This tends to give software a very boxy look, with lots of horizontal and 2:53 vertical lines, and lots of rectangles arranged in a grid. 2:58 This can communicate a lot of stability or organization, which can be a good thing. 3:03 But you can also break away from the grid and 3:08 rectangular shapes to draw attention to an area of a web page. 3:10 Similarly, a complicated layout might use too many rectangles and too many shapes. 3:15 This can create what I like to call a box within a box aesthetic, 3:22 where there's just too many nested shapes and rectangles. 3:25 Instead of adding organization or structure, 3:30 this can actually cause the page to feel cluttered with lots of visual friction. 3:33 The last element that we'll talk about here that's closely related is form. 3:38 Form is geometry that exists in three dimensional space. 3:44 You might think this isn't applicable, 3:49 since software typically exists on a flat bed of pixels. 3:51 But artists have used shading and perspective for 3:55 thousands of years to create the illusion of depth and form. 4:00 Photos and illustrations can appear to have depth, and 4:04 technologies like WebGL can add 3D models to a web page. 4:08 And furthermore, the future of spatial computing using virtual and 4:13 augmented reality makes form more relevant than ever. 4:17 Form can elicit a strong emotional response because it maps to our 4:22 everyday experience of a tactile and three-dimensional world. 4:26 3D geometric shapes might be used to break up a space on 4:30 a page in the same way as line. 4:35 Or the same way that you might use shapes to, once again, 4:37 direct the user's eye toward an important page element. 4:41 As you can imagine, the possibilities are quite literally endless. 4:45
You need to sign up for Treehouse in order to download course files.Sign up