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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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.
Definitions
- Line - A point that moves continuously.
- Shape - Areas defined by contrast.
- Form - Geometry that exists in 3 dimensions.
Art Examples
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
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up