Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
A basic understanding of the principles of good design (such as contrast, unity, and balance) is the foundation for creating beautiful websites. In this course, Sue Jenkins explains design aesthetics in simple terms, and shows how to incorporate the principles of design in specific ways that improve your site. Learn how to adjust adjacent colors to add contrast, create depth with texture, incorporate movement, and use repeating shapes, patterns, and borders to unify your design. Then, in the final chapter, learn about special issues designers should address in their web layouts, such as responsive design for mobile devices, accessibility, and originality.
The second of the 8 elements of design is value. Which refers to the relative lightness or darkness of a color within a composition. As with color, the values of colors you choose can also help to convey emotion and meaning, as well as add contrast to define areas of interest in your designs. For our purposes then, the definition of value is the degree of lightness or darkness in a given color. Referring again to the color wheel, we can see that pure colors in that whiter center ring, and the values of each color range inward and outward from light to dark.
In other words, when we take a pure color and add white, we get a tint, when we take a pure color and add gray, we get a tone and when we take a pure color and add black, we get a shade. Some colors make us instantly have positive or negative associations, or even particular emotions. For example, pastel colors might make us happy, seem more feminine. Or evoke thoughts of spring or Easter or babies. Muted colors, by contrast, could seem sad or perhaps masculine.
And make us think of autumn or winter. Or things like legal services, banking, sports bars, or camping. In web design, colors can be used to create contrast in areas of emphasis. As well as to set a focal point within a composition. For example, any light object on a dark background is usually the first place the eye goes to. So let me show you what I mean by adding some elements into this design. So first we'll drop in a logo, Drop in some navigation, add a little footer bar down at the bottom.
As you can see, any light object on a dark background is usually the first place your eye goes to. And the location is usually immediately recognized, whether consciously or not, as the center of attention. So right now looking at this, maybe your eye goes right to that chevron shape, the logo above the word forward. But watch what happens when we add an area to show recent work. The eye immediately goes to this area since it's the largest light area within the composition. This same phenomenon also works with dark objects on a lighter background.
So let's add in a logo, a little bit of text. It also works with bright objects on neutral or lighter backgrounds. So we'll add in some bright little indicators or thumbnails where you could put images that relate to other parts of the website. Another way that you can work with values to add contrast is with gradation. Gradation in value can give the illusion of depth as evidenced by the popularity of all those glossy reflective surfaces made popular by Apple, which can be applied to virtually anything including a shrimp.
Another way that you can use light and dark values in your designs, is to use colors strategically to create the illusion of depth, as with drop shadows and inner glow. Or shading on a ribbon that wraps over the edge of a layout. As you can see, the value of the colors that you choose can be just as important as the colors themselves. Color values can set a mood, create contrast, add depth, give the illusion of reflections. Most importantly, you can use color values to create visual areas of emphasis within your web designs.
There are currently no FAQs about Design Aesthetics for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.