[?music?]
Some of the most important and exciting elements of design
are color, value, and texture.
With this trio, you can create some really beautiful visuals.
Color theory is a very deep topic, and it'll be covered in another chapter.
For now, it's just important to learn the basics
and where it sits in relation to the other elements and principles of design.
Color can be described as the way light reflects off of a surface
and it's a great tool to draw attention to your page elements
because it is capable of generating a lot of visual excitement.
In the case of You Know Who, which is a web design and development studio,
color is used very effectively.
The large band of purple contrasts with the white below it.
Because such a large amount of space is dedicated to it,
the purple really defines the whole feel of the page.
Now, usually, you don't see such large areas of color in a web design
because they're really difficult to pull off.
This design does it brilliantly, though, for two reasons.
The gradation between the lighter color purple and the darker color purple
creates some really nice variation, but by itself,
this gradient isn't quite enough to carry such a vast area of color.
The second component of this is this patterned texture
that you see in the background.
This patterned texture on the top of the gradient creates some really beautiful values
and adds in enough variation and texture to make it work.
Another really nice part of this design is the orange toolbar in the iPhone screenshot.
Yellow and purple are complementary colors and they bounce off of one another
quite well because they sit opposite one another on the color wheel.
However, purple and orange aren't quite complementary colors.
The reason these two colors still look visually intense when put together
is because the orange is actually very close to yellow,
which is the color opposite of purple, and this purple color
is actually very close to blue, which is the color opposite of orange.
Now, at this point, you may be feeling a little bit confused,
but don't worry, we'll be covering color theory in much more detail
in another chapter.
You Know Who makes great use of texture,
but there's another example that has even more texture.
Texture can be defined as a concentrated area of variation in value or tonality.
To put it another way, texture is the perceived roughness or quality of a surface.
Now, there's such a thing as implied texture
and then there is real texture.
Real texture is easier to understand conceptually
because it's the way that something like sandpaper or fur
actually feels when touched.
Implied texture is the way that something looks.
Even though in real life, the fur of a dog might look and actually be very soft,
you could look at the wild tangling of hair
and say that it's a very rough-looking texture.
The job board on the web designer's wall is filled with all sorts of different textures.
This background looks like a corkboard
and in addition to this cork texture, it also has these really interesting-looking watermarks.
These watermarks are also carried over to the corners of this paper,
which adds in a little bit more texture into the content area of the site.
This paper in the upper left also has some very rough edges
and it feels like it was very spontaneously torn off.
There's also a texture in the text and it feels like it was handwritten.
In this case, the wild use of texture communicates a more spontaneous feel.
The web sometimes lacks a lot of life and can feel very static,
but texture can make the web feel more like a used, living environment.
You can compare this to your favorite sci-fi movies;
sometimes the spaceships feel very polished and freshly manufactured.
Other sci-fi movies portray spaceships as being heavily used
with battle scars, rust, and other intricate details.
In other words, texture can make web pages feel alive
because it implies some kind of history, like someone was there before you were.
The next element of design is value.
The term value refers to visual brightness or darkness.
Everything on a web page has some sort of value regardless of whether or not
it has a color.
In fact, an image can be comprised of a single color
and still communicate visual information through the use of value.
Another company does this really well.
Their homepage has hardly anything on it
except for this large black and white photograph of an office.
This works beautifully as an example of value because it has lots of subtle changes
in brightness and darkness.
The darkest values are in these chairs, in the window frames,
and in a lot of the detailing and shadows.
The lightest values are in the lights up at the top
and in the windows; however, what makes this photo so beautiful
are all these small changes in value.
Even across one of the walls or in the texture of the floor,
there are lots of soft changes in value.
This is contrasted with the sharp lines of the desks and of the windows.
Using color, value, and texture in your designs
can dramatically increase the visual excitement.
That wraps it up for the elements of design,
but now it's time to take a look at the principles of design.
[?music?]
[Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]