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 first of the eight elements that we'll explore is color. In graphic and web design, we really must consider the colors used in the design to set the right mood and to convey a deliberate feel or emotion that supports the information within the design. Before we get too far into the concept of choosing colors to set a mood. Let's take a look at the color wheel for a quick review of color. The three primary colors are red, blue, and yellow.
And the three secondary colors are orange, green, and violet. The secondary colors are created by combining two adjacent primary colors. So for example Yellow and red equals orange. Yellow and blue equals green. And blue and red equal violet. Now, if you combine a primary color with a secondary color, you get what's called a tertiary color. For instance, >> Yellow and green create yellow-green. And violet plus red create violet-red.
So, here's a good design question for you? What happens when you add white to a color? Well, you get what's called a tint. The more white you add to a color the lighter the tint. Similarly, when you add black to a color, you get what's called a shade. The more black you add, the darker the shade. Here's a look at the complete color wheel with all of the primary, secondary, and tertiary colors along with each of their tints and shades. So, now that you see how all of these pieces fit together, we can talk about color harmonies which are combinations of colors that people tend to find aesthetically pleasing.
The easiest color harmony to understand is what we call monochromatic color, which represents a single color and all of its iterations from white to black, kind of like this. Next is complementary colors which represent a pair of colors at opposite ends of the color wheel. Such as red and green. Or violet-red and green-yellow. Split complementary color harmonies are created when you select a main color like yellow-orange, and then choose two colors on either side of that first color's complement.
Such as yellow-green and green-blue. >> Analogous colors, or adjacent colors, are created when you pair any 2 or more colors that are right next to each other on the color wheel. Then there's triads. Triads are any three colors that are equally distant on the color wheel, like red, green, and blue. So, let's get back to color as an element of design and talk about why it's useful for your designs. When you use color deliberately, it can help you set the mood or feel of your design.
And if you think about it, you probably already have natural associations with particular colors. For example, red makes us think of passion, orange is energy, yellow is happiness, green represents harmony. And blue brings a sense of calmness. For many people, violet is the color of luxury and black is used for power, white for purity and brown for friendliness. And there's lots of other interpretations for these words and image associations that the colors conjure up in your mind.
And these colors can actually be quite distinctive in different countries around the world. Some industries tend to use the same colors to represent their brands and promote their products and services to their target audiences. So, for instance, many bakeries and cupcake shops use pink and brown color schemes, while most legal practices and banks tend to favor a more conservative dark navy blue, red, maroon, silver and gold color palette. Spas are another really great example of when choosing the right color can really help communicate a desired mood to potential customers.
Here's a mock layup of a spa website with a dominant red color palette. Not the most relaxing or appropriate colors for this site, wouldn't you agree? What would work better is a more neutral or monochromatic color scheme that is soothing, inviting, and relaxing, evocative of how you'd feel during and after your treatment at the spa. So, let me show you what some other color schemes might look like. So, here's a neutral palette. It definitely looks better than the red. But, it's kind of boring and bland and maybe a little personality-less.
Then we could try green. Green is getting closer to the right vibe, but this hue is still not quite right. A little too vibrant. A blue theme work evokes thoughts of clean calming water, but it might be too obvious of a color choice, and maybe still a little too bright. We can try an aqua. For the aqua, it's a little bit greener blue. It still seems friendly and calming, but still maybe too energetic for a spa. So, what about something like a pink? With a pink it could be a good choice, especially if their clientele is primarily female.
But, you know, maybe if you want to have a spa that caters to both men and women, this would be too feminine and be off-putting to the male customers. So, the last thing was the original, which is really neutral. We can combine a little bit white, a little bit of blue, a little bit of gray, a little bit of tan, and create a soothing calming effect that's professional, inviting, and relaxing. When choosing colors for your web layouts, think about which colors will best represent the product or service you're designing for and which colors will appeal most to the site's target audience.
Think about the mood you want to project and refer to the color wheel to ensure that you choose color harmonies that are tried and true.
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.