The current trend in industry is that programmers are not responsible for the graphical design of the user interface. But smaller companies may have the programmer graphically design the interface by default. Also if you should work with graphical designers, you should understand their designs and concerns. Nevertheless you will have to graphically design your project.

We will discuss two aspects of graphical design: visual organization and color. There are also other aspects such as typography.

Visual Organization

Content organization drives the visual organization, and good visual organization makes it easy to locate content.  We will consider the visual organization at the page level using the gestalt perception principles. (From Webster’s gestalt is a configuration, pattern, or organized field having specific properties that cannot be derived from the summation of its component parts; a unified whole.)

• Proximity
• Alignment
• Consistency (Repetition)
• Contrast

Sometimes called CRAP.

A good visual design generally uses a combination of these principles.

Proximity

Related items should be close to each other, and unrelated items should be distant.  MacCraken gives an excellent example.  Consider the list of potential links in a web page:

The list is alphabetical and all items are grouped together. This is poor visual organization.  A better organization using proximity is:

The organization need not be vertical grouping, and can be organized horizontally.   Horizontal grouping is useful for dynamical layout (sometimes called responsive layout) when you do not have control of the page width. Unrelated groups would separate further as the page becomes wider. Items in the same group should stay close together.

Alignment

Alignment can be vertical or horizontal.  Traditionally, English text is laid out with left alignment or justification. The alignment suggests to the user that the items are related.  In general pleasing design have few breaks or jags in the layout line.   For this reason centered alignment is generally bad, for example the center justification of the above list:

The above list is not as pleasing and interferes with the grouping.  Center alignment can be used to good effect in titles and with lines of large variation in length:

This example is effective because the grouping suggest that items are related, but the justification makes it clear that they are also distinct.

Deliberate indentation can be used to suggest the hierarchy and split up the grouping.  Also table layouts can efficiently organize many groups.

Consistency

Consistency across the web pages can assure users that they are browsing the same web site. Also consistency makes recognition of the organization fast and understandable.   Consistency within the page also enhances grouping.  For example the same color or font can be used to represent groups.  Another example is could be displaying temporary items in a freehand font, while more permanent items can be in times new roman font.

Contrast

Contrast can be used to separate items.  For example, fonts for titles are larger then the body.  McCraken suggest making the font contrast large.  I find it unnecessary to make the size different this great, and it also may be detrimental.  For example high contrast in color can be distracting, and excessively large fonts waste space, a premium on most screens. I prefer the saying a “little contrast can go a long way.”

 Color

Color can be used to add attractiveness and usability to the interface.  Color can be used to group items, and give hints at the function of buttons.

Physics of Color

Visible light is a small spectrum of the electromagnetic spectrum that lies between the infrared and the ultraviolet.  The part of the electromagnetic spectrum near the visible from long wave, low frequency to short wave, high frequency is:

• AM radio
• Short band radio
• FM radio
• Microwave
• Infrared
• Red
• Orange
• Yellow
• Green
• Blue
• Violet
• Ultraviolet
• X rays
• Gamma rays

The lens of the eye focuses the light on the retina. Cones are photo receptors that respond to the color of the light.  There are three types of cones; one response to blue, another to green and a third to red.  The three types of cones’ response curves overlap.  Blue is the less responsive of the two, and the green and red combine to peak in the yellow.

Color Models

Color models attempt to categorize the color quantitatively.

The Primaries: Red, Yellow, Blue (RYB)

This color model that you learned in primary school is also the model used by most artists.  The three primaries; red, yellow, and blue, mixed together will produce black.  The primaries can create almost all colors by mixing.  A color wheel illustrates the model.

Additive Color: Red, Green, Blue (RGB)

This model is called additive because the three lights colored red, green and blue shined on the same surface will produce white light.  This is the color model used by stage lighters. It is also the light emitted by diodes in the monitor and so colors on the web page.  The monitor has three types of phosphors composing the physical pixel.  The intensity of the each is expressed as an integer value between 0 and 255, where 0 means no emission, and 255 means full emission.  Note the environment effects the perception of the color from the monitor.

Subtractive Color: Cyan, Magenta, Yellow (CMYK)

This is the color model used by printers. It represents the color of the most intense dye.  The print is given its color by transmitting though the dye and reflecting off the white paper background. The physics of the color model is subtracting color from the illuminating white light. Cyan, magenta, and yellow are complements to red, green and blue.  So cyan subtracts red, magenta subtracts green, and yellow subtracts blue. For example cyan, and magenta printed on top of each other would appear blue.

The black achieved by the mixture of the three dyes cyan, magenta, and yellow in not very dark so black ink is added represented by K.  The specification of CMYK in the print shop is difficult because the dyes vary, but in photo software the values are generally expressed in percentages.

Hue, Saturation, Brightness (HSB) System

In this system, the hue is the color. Generally the hue is expressed in degrees around the color wheel. 0 represents red, 120 represents green, and 240 represents blue.

Saturation is purity of the color, how much white is mixed with the color.  So 100% saturation is pure color, and 0% saturation is some form of gray.

Brightness represents the color along the black and white axis.  100% brightness would render any hue white and 0% would render any color black.

Comparing the Four Models

The RGB system is the most similar to the hardware, the screen. It is probably the most accurate for web pages or UI interfaces on devices.  But without color picker software it takes a lot of experience to express a specific color in its RGB value.

CMYK is appropriate for printed matter.  But this system is also awkward for inexperience users to express a specific color.

The HSB system is perhaps the most intuitive for a novice to use, but is not tied to any hardware system.

In practice the color systems are not synonymous. Each has a slightly different gamut. The gamut is the range of colors that they can express.

I recommend that you start by learning two, RGB and HSB well.

Most people are acquainted with RYB system, and the English language reflects this common knowledge.  Because the HSB is based on the same color wheel the transition is easy.  The color wheel is a good tool for creating color schemes.

Color-Harmony Schemes

A color harmony scheme is the selection of colors that are used on a page.  Although I believe that all schemes are good some are harder to use then others, and certainly a scheme will affect the message of the page.  For example a page composed of three bright primaries will give a different message than a page composed of shades of brown.  So harmony should be selected with the message in mind and your skill at mixing colors.  Generally the more color in the scheme the harder it is to get right and manage.

Monochrome

A scheme that uses colors from the same hue is called monochromatic.  In practice the addition of grays to the color pallet is still monochrome.  This scheme is the simplest, and naturally increases the cohesion of the page.  Do not under rate it effectiveness.  Mature graphic designers will most likely use this scheme.  The choice of the color will have a profound effect; consider the difference between using a red or blue scheme.  Also the saturation will have a profound effect.  What would be the difference between a bright yellow schemes and a toned down yellow?

Complementary

A complementary scheme uses two hues on the opposite end of the color wheel.  So black and white are naturally colors in the scheme.  This scheme can be used to increase contrast in the page, but is harder to use than manochrome.  In order to avoid the clashing effect of complementary colors, one hue can be the dominated color, filling in the larger areas.  Also, seldom have adjacent complementary color at full saturation.

Analogous

Analogous color schemes are the opposite of complementary scheme.  Analogous color schemes use two colors close to each other.  This is the color scheme most frequently found in nature, and consequently the analogous scheme is frequently pleasing.

Triadic

Three hues approximately equally spaced around the color wheel, for example the primary or secondary colors.  This color scheme is very colorful, but can easily get out of hand.  If all the colors are saturated and bright the web page may look gaudy.  Better to use the colors that are toned down.  I recommend using this color scheme sparingly.

Text and Background

The choice of text color and background can affect readability.  Studies have shown that dark text on light background is preferred and easiest to read.  Although I have found that pure white background can get tiring after reading for a long time.  Still the background should be brighter then the text. The choice of the text color is also important.  For example consider reading yellow text on white.  Brown text on white is easy to use and read.  The brown is a mixture of red.  The difficulty is that the eye responds less to blue.  The contrast between yellow and white is only in the blue; the yellow has no blue.  The contrast between brown and white is in both blue and green.  For readability it is important to have sufficient contrast.  But too much contrast such as red and green, red and blue, or magenta and green can create a perception of vibrating text and is hard to read.

Color as Organizer and Attention Getter

Color coding can organize items into groups.  It can be used to enhance proximity grouping and increase contrast.  The color coding can also transcend proximity grouping, such as in an IDE.

Also a single color will attract the eye.  Consider the red stop sign or yellow warning sign on the highways. Why do the highways use green signs for directions?