Web FoundationsTHURSDAY, OCTOBER 17, 2013

LECTURE 14: SITE DESIGN SKETCHES & COLOR STUDY

Site Design Sketches

We spend good part of our time in front of a monitor, most likely we have more than one computer, not mentioning iPhones, graphic tablets and all the other ultra modern devilries that invade our desks. We are all part of the generation that need a mouse to leaf through an album with the family photos (goodbye to dear family albums with the pages left to yellow) and Facebook to send birthday wishes to a friend.

Yet, in the middle of this digital era, the best allies of a web designer are common tools that can be bought with the change under your couch cushions. I’m talking about making pen, pencil and paper a part of the creative process that other “non-digital” designers have been using for ages: sketching.

Site Design Sketch Sites• 20 Examples of Site Sketches• 18 Great Examples of Sketch UI• 60 Beautiful Hand-Drawn• Wireframe Sketch Sheets• Free Sketch Paper Templates

• Sketch Tools (What I Use)• Gray Marker Pens• Layout Pad• Collins Ruler• Geometric Shapes Template

Site Design Sketches

Color Study

Color is the first item by which one can judge a site. It’s the splashes of color and an eye-grabbing design that a visitor to your site sees. Better use of color means a better website. If you can carry a color scheme to every page, you’ll automatically create a cohesive look and feel for your site.

A color scheme is a set of colors that helps define the mood, educate the user about navigation (subtly signaling what’s “hot” or “clickable”), and reinforce the site’s identity, or brand image. Developing simple color schemes becomes second nature the more you work with color.

Color TheoryLook at these two websites and without thinking too hard, ask yourself which one uses color better. Chances are you said the second one, right? Now, here’s another question:

Why is the use of color in the second webpage better than the first? After all, the two pages use essentially the same colors — blue and green. What is it about the second page that works so well?

That question is a bit harder to answer, and it basically comes down to your gut. Something about the color in the first webpage made you say, “Arrgh!” whereas something in the second webpage made you think, “Ahh.” But what is it that inspires that Ahh-ness?

The answer to that question lies in color theory. This field of thought quantifies the Arrgh- and Ahh-ness of certain uses of color. Color theory can make sense of the at-times daunting task of figuring out how best to mix and match the 10 million colors visible to the human eye.

Color Theory

We’ll be honest with you: Color theory can seem a little intimidating at first. After all, color is some-thing we take for granted. It’s constantly surrounding us, and unless it’s being used particularly well or particularly poorly, its influence is mostly subconscious. This raises the question: How do you quantify something so innate? Don’t worry, it’s actually not that hard! Most of color theory is putting a name to what you already know. And even if you aren’t consciously aware of some of the relationships it examines, they’ll make perfect sense to you.

With that in mind, just remember that when it comes to color, you don’t want to over-think things. Keep color theory in the back of your mind as a set of guidelines, but always remember to go with your gut. Make all color decisions by this simple rule: If it makes you say “Arrgh!” you should prob-ably try something different; if it makes you say “Ahh,” even if you aren’t sure why, it’s a good decision.

Color Theory

We’ve mentioned color theory a few times already, but we haven’t really given it a satisfying definition.

Here it is:

Color theory is the body of knowledge about how color works. This includes the way that colors interact, different ways colors can be mixed together, and anything else you can imagine that pertains to how colors work and interact. One of the best ways to visualize how colors relate to one another is through our old friend the color wheel.

Color TheoryAs you can see, this color wheel is divided into six sections, called base colors. Three of the base colors are known as primary. Now, when you learned about colors way back in art class, you were probably told that the primary colors are red, blue, and yellow. And yeah, that’s true when you’re working with paint. But when you switch over to the realm of computers, things change, and the primary colors become red, green, and blue. (We’ll talk more about why this is in the Color on the Web section.)

The other base colors are known as secondary colors, and on computers they are yellow, cyan, and magenta. Naturally, there are other mixtures of colors, but you can’t see them in the simplified color wheel we used.

Now you’re probably familiar with the term hue in a colloquial sense, as a synonym for color, but that’s not exactly right. A hue is a pure color, whereas a color (technically speaking) is a hue with black, white, or gray added to it. Hues are typically represented using what’s called a hue scale, a rainbow gradient ranging from 0° to 360°.

Color Properties

The most basic attribute of a color is also known as hue. Each hue is a specific spot on the color spectrum. A spectrum can be as simple as a band or a wheel. Additional color attributes you should know about are value, contrast, brightness, and saturation.

Color Properties

The range from black to white is called value. It’s good to be aware of situations where colors have different hue but are close in value; in some cases, they can be hard to distinguish.

Value is the amount of black or white within a color.

Color Properties

Brightness adds white to an image; reducing brightness tones down the image.

Brightness levels from low (left) to normal to high (right).

Color PropertiesContrast is the degree of separation between values.

Contrast levels from low (left) to normal to high (right).

Color Properties

Saturation is the measurement of color intensity. The lack of saturation looks like a black-and-white television picture.

Full saturation (top), half saturation (center), and no saturation (bottom)

Color Symbolism

So far, we’ve gotten into the technical aspects of color theory — hue, saturation, brightness, all that jazz. But that’s not what color theory is really all about. Believe it or not, the key to understanding color is all about paying attention to your gut. We’re extremely visual creatures — after all, color vision is closely tied to our survival as a species. It’s also our main vehicle for interpreting the world. As such, color has developed deep psychological, emotional, and cultural connections. So, before you go ahead and start trying to pick out a scheme for your website, you need to consider the meaning inherent in certain colors and color combinations. Ask yourself the following questions about any color you want to use in your website:

• Nature: Where does the color appear in nature? What kinds of associations do those natural elements have? • Psychology: What are the feelings that come to mind when you think of the color? • Culture: What cultural significance does the color have? Think about broader cultural associations, such as religion and government, as well as the everyday, such as popular products, organizations, street signs, etc.

In the coming pages, we’re going to take a look at some common natural and psychological associations of different colors. Just remember that these will change depending on which culture you’re dealing with.

Color Symbolism

Now that you’ve learned a bit more about the unique meanings and emotions tied to each color, your ideas about picking out color for the web are probably a bit different than they used to be.

You can’t simply choose at random, and you can’t just settle for matching.

Instead, you should take the meaning of your colors into account.

Here are just a few ideas for what kinds of colors you should use to achieve certain effects on your website

Color SymbolismColors don’t exist in a vacuum; they interact with one another, creating more powerful messages than they ever could on their own. Some colors make great backdrops, whereas others work better as accents.

Think about how pretty much everything goes with blue jeans. That’s because the range of medium to dark blue you usually see in jeans is fairly neutral.

Most of the fun of working with color is seeing how different hues interact. The ideal interaction is harmonious, which means the overall effect is soothing and peaceful. You can achieve a harmonious effect through a number of different color combinations

Monochromatic color schemes essentially use variations in value of a single hue, using more or less black. For this example colors are picked from the red “pie slice.”

On a color wheel, similar or analogous colors are found next to each other. To pick analogous colors, simply pick one color on the color wheel and its nearest neighbor to the left and right)

Complementary color schemes are color choices that are opposites in terms of hue. These are literally on the opposite sides of the wheel, but usually the same distance from the center, of similar value

Color on the Web

When you studied colors in art class, you probably learned that red, blue, and yellow are the primary colors. This isn’t the case on computers. The thing is, the colors that computers emit come from light — red, green, and blue light, to be exact. As a result, red appears a little more orange than true red, green tends to have more yellow in it, and blue contains more red. Here’s the other thing about computer color: It’s not exactly the same from machine to machine. Yeah, sorry... Although your colors will be consistent (i.e. red won’t appear as blue), they may display a little differently depending on what hardware, software, operating system, and personal computer settings your website visitors use. You may not have absolute control over how exactly your colors look on every computer ever, but you can be reasonably assured that your colors will show up correctly. How, exactly?

Simple: Test, test, test. Test your scheme on different computers, different operating systems, in different browsers, and in any other situation you can think of where color might change. Seasoned web designers should already be testing their work in different browsers and operating systems, so just add color to the list of things to keep an eye on.

Color Models

A color model is a mathematical system used to identify colors. This gives designers a way to specify colors more exactly than just by using vague, subjective terms like “red” or “blue.”

Here are the color models you’ll encounter the most in web design:

RGB

The RGB color model specifies the amount of red, green, and blue in a color on a scale of 0 to 255. Here’s an example of the RGB color model in action:

Color Models

HSB/HSV

The HSB/HSV color model identifies colors by hue, saturation, and brightness (or value) — hence the abbreviation HSB/HSV. Hue is measured in degrees, and saturation and brightness are measured in percentages.

Here’s an example of how red, purple, green, and blue would be expressed using this color model:

A representation of the HSL color system commonly used in color pickers.

Color Models

Hexadecimal

Like the RGB model, the hexadecimal color model specifies the amount of red, green, and blue in a color. However, instead of using values ranging from 0 to 255, it uses a set of characters from 00-FF. When used in an HTML or CSS document, hexadecimal codes (aka hex codes) have to be preceded by a hash symbol (#).

Here’s how hex codes translate to colors:

Color Models

Web Safe Colors

The web-safe color palette consists of 216 colors that were standardized to always be consistent across operating systems and browsers (though individual user settings still affect them). These colors are usually represented in RGB or hex codes.

Here’s a complete list of all the web-safe colors:

Color Sites/Software• Color Matters• Kuler (Adobe)• Color Schemer Gallery• colr.org• Color Scheme Designer• Color Palette Generator• I Like Your Colors• Color Tools

Color