DEV Community

Cover image for Modeling Your Website pt.2
Wesley Schmidt
Wesley Schmidt

Posted on

Modeling Your Website pt.2

Welcome back! Last time, we talked about how you should concentrate your users focus and why it's important. Users are drawn primarily to the top-left corner of a page most of the time, because that is how our eyes are trained, so how do we make them look elsewhere. In this part we will learn more about how you should structure you website through color scheme.

85 percent of user's attention is caught first and foremost through color. It's important to note that the most successful, eye catching sites and brands are comprised of only 2 or 3 colors. The only exception to this are a few variations in values for those colors, ie. slightly lighter or darker versions of a color. For example:
Alt Text
Alt Text
Granted, Walmart isn't known for their website, but the fact still stands that it is easy to read and remember. So, when in doubt, less is more!

When picking these crucial colors, you don't want to simply choose your favorite ones and call it a day, you have to put a bit more thought into it. Within the first few seconds of looking at your page, the viewer will already have made a judgement based on the colors you select alone. So, let's go into a bit more detail as to why this happens and how you can use it to your advantage.

Colors bring out an emotion when you see them, whether you realize it or not, so it's important to know what you want your user to feel when browsing your website! Look at this as a reference:
Alt Text
Red colors typically evoke stronger emotions like love, leading to increased heart rate. Yellow colors usually represent clarity, encouraging communication, but has been theorized to make babies cry. Blue is often times going to be a "go to", it is associated with peace, use it when trying to evoke security and trust. Orange exudes warmth, use this color when you want a friendly and creative vibe. Green is a symbol of health, nature, and relaxation, it is also the most sensitive color to the human eye, meaning we can see the most values of green. If you're trying to build an eco-friendly website, this color is a must. Finally, purple symbolizes royalty, wealth, and wisdom, but can also be very calming, imaginative color when used sparingly.

So, now we know some of the psychology behind these colors, what about the artistic side? Contrast is a tool that ALL artists use in order to make certain parts of their art pop out from the rest, so let's think of our websites as a canvas! It's important to note that the six colors we have discussed so far are the six primary and secondary colors on the color wheel. Primaries being blue, yellow, and red, while the secondaries being orange, green, and purple. Check it out:
Alt Text
The easiest way to find these contrasting colors are to look directly across from them on this color wheel. So, for example, blue is the contrast color of orange and yellow is the contrast color of purple. By using these contrast colors next to one another, you're causing a stark change on your page, making it really stand out more. It's important to note that with all contrasting color pairs, one will always be a warm color, while the other cold. The warms being red, orange, and yellow, while the colds are purple, blue, and green.

So, when you decide the emotion you want your users to have when viewing your website, you can start looking into colors that represent that emotion as well as others that will help it stand out. Remember to limit yourself though, you don't want viewers to feel confused.

Top comments (0)