1 00:00:00,170 --> 00:00:03,070 Next up is space and texture. 2 00:00:03,070 --> 00:00:07,900 These next elements of art and design tend to focus less on concrete ideas, 3 00:00:07,900 --> 00:00:12,530 like lines and shapes, and put more focus on their characteristics. 4 00:00:12,530 --> 00:00:13,080 Let's take a look. 5 00:00:14,710 --> 00:00:22,460 When describing art, space can be divided into positive and negative space. 6 00:00:22,460 --> 00:00:28,668 Positive space is the area or volume that's occupied by something. 7 00:00:28,668 --> 00:00:32,680 On a webpage, it might be a block of text, a button, or 8 00:00:32,680 --> 00:00:36,440 a shape that contains some other elements. 9 00:00:36,440 --> 00:00:43,380 Negative space is everything else, which designers sometimes call white space. 10 00:00:43,380 --> 00:00:46,710 This is the area where there is nothing. 11 00:00:46,710 --> 00:00:48,410 Let's take a look at an example. 12 00:00:49,510 --> 00:00:54,490 The Google homepage makes extensive use of negative space and 13 00:00:54,490 --> 00:00:57,080 this helps direct your attention. 14 00:00:57,080 --> 00:01:03,160 It's hard to look at anything else except what's in the middle of the page. 15 00:01:03,160 --> 00:01:07,990 The place where you should look to take action is self-evident, 16 00:01:07,990 --> 00:01:12,660 because there's barely anything else to look at or interact with, however, 17 00:01:12,660 --> 00:01:16,960 most websites are more complicated, so let's do a search. 18 00:01:16,960 --> 00:01:22,640 When the search results come up the page still makes use of positive and 19 00:01:22,640 --> 00:01:24,160 negative space. 20 00:01:24,160 --> 00:01:30,100 This time, the positive space is occupied by the search results, 21 00:01:30,100 --> 00:01:37,290 and a few content boxes, and the negative space is blank like always, 22 00:01:37,290 --> 00:01:41,910 but what you should notice is how negative space is used. 23 00:01:41,910 --> 00:01:45,950 They could've bunched up the search results close together, or 24 00:01:45,950 --> 00:01:50,030 they could've separated each one with a horizontal line, but 25 00:01:50,030 --> 00:01:55,970 instead they chose to put some negative space between each one. 26 00:01:55,970 --> 00:02:03,640 There's also a margin along the left, and right sides to help frame the content. 27 00:02:03,640 --> 00:02:07,035 This creates a very natural and clean separation, and 28 00:02:07,035 --> 00:02:11,760 while that might seem like an obvious idea when it's right in front of our eyes, 29 00:02:11,760 --> 00:02:17,330 a surprising number of new designers forget to include room for negative space. 30 00:02:17,330 --> 00:02:22,700 Imagine if there was very little space between each result, 31 00:02:22,700 --> 00:02:27,130 and if they were pushed up against the side of the browser window or 32 00:02:27,130 --> 00:02:31,770 the screen, the results would be pretty difficult to scan quickly, and 33 00:02:31,770 --> 00:02:33,450 the design would feel very cramped. 34 00:02:34,540 --> 00:02:37,970 The next element of art design is texture. 35 00:02:37,970 --> 00:02:41,375 Texture is what it feels like to touch something or 36 00:02:41,375 --> 00:02:46,570 what something looks like it might feel like if it were touched. 37 00:02:46,570 --> 00:02:50,490 For example, an orange has a bumpy surface, but 38 00:02:50,490 --> 00:02:56,670 a pear can sometimes feel fuzzy, and an apple is generally smooth to the touch, 39 00:02:56,670 --> 00:03:01,650 but at the same time, it still has some visual texture on its surface. 40 00:03:01,650 --> 00:03:06,990 The most common example of texture in software is blocks of text, 41 00:03:06,990 --> 00:03:09,640 and although we might think of them as words, 42 00:03:09,640 --> 00:03:13,970 visually the objectification of form through mass, like a crowd of people, or 43 00:03:13,970 --> 00:03:19,740 jumble of the letters, can make it appear as one textured surface. 44 00:03:19,740 --> 00:03:24,820 Texture can be used to break up flat surfaces or help to slow 45 00:03:24,820 --> 00:03:29,650 down the viewers eye and cause them to examine something for a little bit longer. 46 00:03:29,650 --> 00:03:32,390 For example, when a solid color or 47 00:03:32,390 --> 00:03:37,910 a gradient is used as a background sometimes it can be desirable to include 48 00:03:37,910 --> 00:03:43,330 some noise to help break up the monotony of the surface and add some character. 49 00:03:44,530 --> 00:03:48,230 Texture can also make things feel more tangible. 50 00:03:48,230 --> 00:03:53,310 A line that looks like a brush stroke, or a background that looks like old paper, 51 00:03:53,310 --> 00:03:59,110 might convey a hand-crafted mood for an artisan food vendor or a classy event.