Color: Fundamental Hues


Colors have both spatial and vibration or motion illusions.

When the six fundamental hues

yellow, orange, red, violet, blue, and green

are placed next to each other on a black background, the light yellow appears to advance and the violet lurks in the depth of the black background.

If the background color is white, it is the violet that seems to advance while the yellow sinks back into the background. The other colors are in-between in their effect.

It was discovered in 1915 that the depth perception of the six fundamental hues on a black background conform the ratio of the Golden Section in their gradation of depth.

The Golden section of a line can be defined as the proportion given by dividing a line at a point such that the shorter part is in the same proportion (r) to the longer part as the longer part is to the whole:


Golden Section Condition: r = b/a = a/(a+b)

which results in: r*r+r-1=0 and r=.618

For example, the depth perception from yellow to orange relative to orange to red follows the Golden Section.


Primary benefits of color



Potential disadvantages of color



Color Wheel



Observations on Color I


Observations on Color II


Observations on Color III


Observations on Color IV


Observations on Color V


Seven different forms of color contrast

1.Contrast of hue

2.Light-dark contrast

3.Cold-warm contrast

cold warm shadow sun transparent opaque rare dense airy earthy far near light heavy wet dry sedative stimulant


4. Complementary contrast

Two colors are complementary if their light sources mixed together form white, or if pigments they form neutral gray-black.

They are opposite one another in the color circle.

Complementary colors used in the same proportion give an effect of static fixed images. They tend to convey stability.



5. Simultaneous contrast

Results from the fact that for any given color the eye simultaneously requires the complementary color.

This is an illusion that generates instability and tension. It can be used to convey excitement. The can be gotten by using two non complementary colors together or taking a rich primary color with a gray background.

Example: A red error flag on a gray background with no close green is a great error indicator to shake up the user.

6. Contrast of saturation

Saturated colors are diluted by mixing them with white or black.

The most saturated or pure colors are the "florescent" tones.

The effect of the "dull-vivid" contrast brought about by saturation dilution is a relative effect.

Vivid colors can be used to set off and highlight areas of dull colors in some situations. (marking, boxing)

7. Contrast of extension

One can arrive at relative areas that different colors should take up in order to balance the contrast between the colors. This is contrast by extension.

Goethe estimated a scale using pure colors on a neutral gray background of medium brilliance:


yellow : orange : red : violet : blue : green

9 : 8 : 6 : 3 : 4 : 6

For example, yellow to violet is 9:3 or 3:1. Therefore violet must occupy three times the area that yellow does for the two be in a balanced contrast when they have the same purity. Yellow has three times the strength of violet. (e.g. p ie charts)

Using these proportions provides produce areas that are static and quite.

When one violates these ratios and allows one color to dominate the results can be extremely expressive.



Type fonts classify themselves into various types:

Roman Serifs:





Type Structure






Type Characteristics I


Type Characteristics II



Type Characteristics III


Type Characteristics IV

A K M N V W X Y k v w x y






Type Characteristics V

Type Sizing


Type Characteristics VI


Type Characteristics VII

Properties of text size and structure


The virtual line upon which the type rests. Descenders, such as the lower part of q, p, g, etc., fall below the baseline for lowercase text.


The height of the letter x. The ratio of x-height to the body size determines the visual importance of lowercase letters for a given typeface.

Faces with large x-heights tend to be very open, airy, and legible (e.g., Helvetica) and those with small x-heights tend to be more compact and restricted, but take up less space (e.g., Optima).

Given the same size type fonts those with smaller x-heights will look smaller.


Type Characteristics VIII

point size:

The distance from the lowest descender (e.g., p or g) to the highest part of the tallest ascender (e.g., d or b) is the type size.

em and en spaces:

Em is a square space equal to the point size and an en is half that size in width. For example, a 12 point em is 12 points wide and used to be a square blank piece of metal type. An en is half an em.

A single em is considered to be the minimum and default indent for a paragraph so that the indent size is proportional to the type size.

Em and En are also represented by the long and short dashes.


Type Characteristics IX

Line Size


Type Characteristics X



V, V. Va Ve Vo WA Wa We Wh Wi Wo Wr

fi, ffi, fl, ffl, ff, ae, ce.


Type Characteristics XI



Illusion I


Illusion II

1. The geometric square looks greater in width than in height. An optical square must therefore be slightly increased in height to appear to the eye as a square.

2. When a geometric figure is divided transversely, the lower half looks smaller. (consider the design of the letters A and H.)

3. The thick horizontal bar looks fatter than a bar of equal geometrical thickness placed on end. The "force of gravity" active in a form makes it broader. (Consider why we make various parts of letters thicker and thinner.) The thic k bar placed on end looks thinner in the direction of gravity (at the bottom). (Consider the design of pillars in ancient buildings such as the Parthenon.) Note that ascenders in type are usually shorter than descenders.


Illusion III

4. Reducing a black square in size makes it look like a rounded dot.

5. The geometric circle looks wider than its height. Note that the letter O is rarely a perfect circle, at least on the inside, in a type font.

6. Two constructed semi-circles, joined to make an S, cannot form and organic whole. The two movements come to a halt (to the eye) at the point of the union and this break must be smoothed over optically.

7. A circular movement flows into two straight lines. The tendency of the semicircle to close must be prevented by two straight lines. Again there is a break at the points of transition. A U cannot be constructed geometrically.


Illusion IV

8. The same black circle changes in appearance depending on its position on a plane surface. In the upper part of the surface it seems to float (balloon) whereas the lower edge it conveys a sense of weight (wheel). Our visualization of an object is influenced by prior experiences.

9. The triangle placed like a pyramid looks stable; turned upside down the same form looks unstable and irresolute. The same is true of the square sitting flat or turned on end (diamond).

10. A thick bar placed horizontally and vertically. The form looks heavy and weighty when horizontal, but lighter and more mobile when vertical.

11. Given a white square on a black background and a black square of the same size on a white background, the white square radiates beyond its edges against the black background and looks appreciably larger than the black square of e qual size on a white background.



Illusion V

12 Taking a series of parallel lines to make up a square area, the use of horizontal lines make the square look higher than it is; while the vertical lines make the square look wider.

13. Given a square formed by either two horizontal or two vertical lines, the horizontal lines make the surface look wider; the vertical lines increase its height.


14. Two lines of the same length look shorter or longer on a relative basis by the shape of the arrows on the end ( < > or > < ). Serifs on ascenders or descenders can make them look longer or shorter by the shape of t he serifs.

15. The eye creates movement as a result of its scanning process. The dot moves and gives rise to the line, the line moves and gives rise to a plane, and the plane moves and gives rise to a body.


Illusion VI




Illusion VII

Tension, Stress and Harmony



Feeling & Rhythm

tolstoy Wa r and Peace















    			"Fury said to a
             		mouse, That he
                       met in the
                    'Let us
		      both go to
                       law: I will
                              	     you. Come 
                                       I'll take no
                                        denial; We
                                       must have a
                                      trial; For
                                     really this
                                    morning I've
                                  to do.' 
                          	   Said the 
                   		             mouse to the
              			              cur, 'Such
           				        a trial,
       				              dear Sir
				            no jury
   				           or judge
       				          would be
		                                      'I'll be
                		                        judge, I'll
                             		                   be Jury,
                                                        old Fury:
                                                        try the


Lewis Carroll's 'The Mouse's Tale (tail)'


Type Contrast



vertical, passive

horizontal, active




straight, static, geometric, symmetry

oblique, dynamic, organic, asymmetry















round, soft

straight, hard




concentric, closed

eccentric, open




upper case, static

lower case, dynamic








Type Illusions I


Type Illusions II


Type Illusions III



The oldest theory about margins is known as the "golden section" (Jan Tschichold, a Bauhaus designer). Observed that many medieval manuscripts used the proportion of 2:3:4:6 for the inner, ou ter, head, and foot margins. One can construct this proportion uniquely using a compass and a straight edge on any two page layout. Other such constructions exist to express alternative versions of a basic 2:3 proportion.



The width of the page should be proportional to its depth by a ratio of 2:3. The 6 by 9 inch book format conforms to this exactly. The ratio of the text to the page area is also 2:3 so that for a 6 by 9 inch book the text is 4 by 6 i nches. Text should be at least as deep as the sheet is wide.


Poster and Screen Design


Other measures of type quality




Beauty of form:

Beauty of Uniformity:


Beauty of the Arrangement


Type and Color

Early Reading Speed Tests (Paterson & Tinker, 1940)

Color Combination

Differences in %


Black on white



Green on white



Blue on white



Black on yellow



Red on yellow



Red on white



Green on red



Orange on Black



Orange on white



Red on green



Black on purple







Semantography Samples


Semiotics (Signs) I




Semiotics (Signs) II




Semiotics (Signs) III

Other dimensions of signs are:


The Structural Model of Communications


Pragmatics: Context, Virtual Channels

Semantics: Interprets, Formulates

Syntactics: Encode, Decode


The Structural Model of Communications




The use of signs in interface design is in a very primitive state considering the dynamic possibilities of animation that can go far beyond the historical use of signs.


TERMINAL MUMPS: Popular and Bizarre Character Names


! exclamation point, exclamation, bang, factorial, excel, ball-bat, smash, shriek, cuss, wow, hey

!? interrobang

" double quote, quote, dirk, literal mark, rabbit ears

# pound sign, number sign, sharp, crunch, mesh, hex, hash, flash, grid, pig-pen, tictactoe, scratchmark, octothorp

$ dollar sign, currency symbol, buck, cash, string, escape, ding, big-money

% percent sign, percent, mod, double-oh-seven

& ampersand, amper, and, address, andpersand

' apostrophe, single quote, quote, prime, tick


Paralinguistic Cues in ASCII


Basic Faces

:-) basic smiley, ha ha, happy, humorous,smiling

:-( boo hoo, frowning, mad, sad, un-smiley

:'-( crying

:'-) crying with happiness

:-* Oops!

:-< frowning, real sad

:-> biting sarcastic face, hey hey

:-@ extremely angry, screaming, swearing

Other Symbols


-/- stirring up trouble

>w nose-thumbing gesture

@= flame, nuclear bomb going off, war started

@>--->---- a rose

@l@ too many hours at terminal

[] hugs

xx kisses

_\\// Vulcan salute

__! enough for now

|-{ Good Grief!

||*( handshake offered

||*) handshake accepted

@%&$%&$\&*@%$#@ obvious



Forms & Proportions



side ratio


equal division

inscribed square:

resulting rectangle ratio





Ö 2



square root of two



Ö 3



square root of three



Ö 4



double square, or square root of four



Ö 5



square root of five



Ö 6



golden rectangle







Golden Rectangle

Consider the summation series where each succeeding number of the sum of the prior ones:

1-2-3-5-8-13-21-34-55-89 ...

n(i) = n(i-1) + n(i-2)

Consider A:B::B:C, for example: 1:2::2:3 or 2:3::3:5. For this series, the product of the means BB is always 1 greater than the product of the extremes AC.

BB +1 = AC or BB = AC + 1

As the numbers in the series gets larger the error of one becomes very small and the resulting limit is the Golden Rectangle where the product of the means equals the product of the extremes.


Definition of GR: r = B/C = A/B

BB = AC implies BB = A(A+B)

r*r + r - 1 = 0

r = .618 and 1/r = 1.618

Logarithmic spirals found in nature (e.g., pine cones, sunflowers, flower petal arrangements, pineapples, etc.).



1. Contrast and gradation in size.

2. Converging parallels and diagonal action.

3. Position in the picture plane.

4. Overlapping.

5 Transparency and exposure of hidden lines.

6. Diminishing detail

7. Atmospheric perspective

8. Advancing and receding color.

9. Motion in and out of the plane such as zooming.





Panning in the x and y dimensions



Color & Shapes