Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The first of the ten principles of a design we'll examine is contrast. If you think about what the word contrast means, comparing two or more things and noticing their differences, you get a rough idea of how it can be used in terms of design to create visual areas of interest. In formal terms, contrast is the juxtaposition of opposing elements by way of using different colors, tones, directions, lines, shapes, et cetera to show emphasis. Creating contrast is a skill that often develops over time.
However, you can jump start your own use of it by paying attention to your site's content, and deciding in advance the relative importance of each element in your design. Which parts should be highlighted? Logo, header, navigation? Banner, side bar, news item. Side bar, featured items, article, search bar, gallery, footer. No two sites are the same. And every client will have specific needs. If you know in advance which areas need contrast, this can help inform and improve your design process.
To help site visitors stay focused on the most important part of a design, the major contrast in a work should always be located at the center of interest, wherever that happens to fall on the page. So, let's take a look at two sites. These days, many designers add contrast to their designs by placing large animated sliders or other giant photographic elements on the homepage. Usually directly below the header and the navigation. By contrast, on e-commerce sites like amazon.com, the main goal is to sell products.
So the shopping cart and the featured item areas will generally have the greatest amount of contrast, usually in size and position compared to the other elements on the page. What other ways can you think of to add contrast to a design. Here are some examples. You can choose opposite colors on the color wheels, such as violet and yellow. You could use different tones or values such as black and white or light and dark. You could play with direction by using both horizontal, vertical and diagonal elements.
You could play with thick and thin lines. You could work with hard and soft edge shapes. You could choose harmonious font pairings like a serif with a sans serif. Pairing textures and patterns with smooth surfaces can often create contrast and set areas of interest. And you can also create a sense of balance by placing a busy area next to an area with lots of white space. Unless you're going for a chaotic and confused look, carefully consider the elements of a design as you construct your web layout.
Too little contrast prevents site visitors from knowing where to look, while too much contrast can really destroy the unity and all but ruin a design. With the right amount of contrast, you can really show visitors exactly where to look by creating specific areas of interest that draw them in and keep them engaged.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 57887 Viewers
119 Video lessons · 67355 Viewers
84 Video lessons · 16709 Viewers
125 Video lessons · 29588 Viewers
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.