The Creative Juices

Archive for February, 2008


Posted on February 28, 2008 - by Thomas

Web Color

Web Color

The psychology of color

Color psychology is a field of study that’s devoted to analyzing the emotional and behavior effects produced by colors and color combinations. E-commerce web site owners want to know which color will make their web site visitors spend more money. Home decorators want to know which color will transform a bedroom into a tranquil Zen retreat. Fast food restaurant owners are dying to know which color combination will make you want to super-size your meal. As you can imagine, color psychology is big business ~ Beaird, J. (2007). The Principles of Beautiful Web Design

Color Associations

Red:
stimulation, exciting, dramatic, passion .. a very rich color
Orange:
active, energetic, not as passionate as red though. Happiness, sunshine, enthusiasm, and creativity.
Yellow:
Highly active, highly visible; happiness and energy. The original orange and lemon-lime flavors of the sports energy drink Gatorade are still the best-selling of the brand’s products. Too much yellow can also be overpowering.
Green:
Associated with nature. Very soothing color that symbolizes growth, freshness, and hope.
Blue:
Symbolizes openness, intelligence, and faith. Found to calm people, but can reduce appetite - maybe due in part to the rarity of blue in real food. Blue has also be seen as a symbol of bad luck and trouble. This emotional color connection is evident in blues music and in the paintings of Picasso’s depression-induced Blue period.
Purple:
Royalty and power. One of the least commonly used color.
White:
Clean, perfection, light, purity.
Black:
Often seen as negative, it can also be a color of power, elegance, and strength.

Classic Color Schemes

Monochromatic:
The monochromatic color scheme uses variations in lightness and saturation of a single color. This scheme looks clean and elegant.
Analogous:

The analogous color scheme uses colors that are adjacent to each other on the color wheel. One color is used as a dominant color while others are used to enrich the scheme.

Complementary:
The complementary color scheme is made of two colors that are opposite each other on the color wheel. This scheme looks best when you put a warm color against a cool color, for example, red versus green-blue. The complementary scheme is intrinsically high-contrast.

Web Color Reference Links


Posted on February 28, 2008 - by Thomas

Web Typography

Web typography may not seem important at first glance, and may even seem more problematic than what it’s worth, but your web site cannot be a successful part of your interface design without proper typography – and it needs to be understood, since 95% of the information on the web is written language.While there are a few ways we can deal with typography on the web, know there are occasions in which some font sizes and line-heights will not follow the norm. Web typography isn’t always as easy to structure as print typography. You have more variables to deal with in web (screen resolutions, browser rendering, font variations between operating systems, etc.) that will, on often occasions, have you beside yourself - even for the most seasoned web designers.The one thing that is usually a consistent pattern is the scale to font sizes (in both print and web).

In the sixteenth century, European typographers developed a series of typeface sizes, a scale (the musical analogy is a good one - stick with me). As shown in the diagram they are sizes we’re are all familiar with. Six point through to Seventy-Two point type has remained pretty much intact for over four hundred years. In fact, they are the default font sizes in many applications (give or take a few.).So, what’s so special about these sizes? Well, because this scale of sizes has been used for centuries, if set correctly, type set in this scale will appear more pleasing to the eye and therefore more legible.~ Mark Boulton

While there are different ways to expressing the values of font sizes (px, em, %, etc.), it’s best to keep to something you feel you can understand most clearly – while still keeping to a good vertical rhythm:

Pixels (px)

For pixel sizing, which is the easiest to understand, you can follow along with Wilson Miner’s tutorial of setting type on the web to a baseline grid.

EMs (em)

For em sizing, which is more complex than setting the line height and font sizes in pixels, you can follow along with Richard Rutter as he explains how to establish a vertical rhythm using the em values

Typical Size Settings

A typical pattern among your font size settings would be:

  • 12px - Body Size (paragraphs)
  • 24px - Main Header (<h1>Andrews University</h1>)
  • 18px - Heading for Entries (<h2>College of Arts and Sciences</h2>)
  • 16px - All navigational and sub-topcs (<h3>Our Instructors</h3>)
  • 13px - All other headed elements (<h4>Robert Mason</h4>)

You can read more about this in Part 4 of Mark Boulton’s series on web typography.

Leading

The leading, or line height, is usually set in relationship to the body font size. If you nave 12px for your font size, a typical setting, for web, would be around 18px.

When reversing colour out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines. - Mark Boulton

Resources for Web Typography:

You need to a flashplayer enabled browser to view this YouTube video


Ad