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.