Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 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.
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.