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
Start a free Courses trial
to watch this video
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