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.

 

Typography

Type fonts classify themselves into various types:

Roman Serifs:

 

Others:

 

 

Type Structure

 

 

 

Serifs

 

Type Characteristics I

 

Type Characteristics II

Counters:

 

Type Characteristics III

 

Type Characteristics IV

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

AEFHIKLMNTVXYZ

BCDGJOPQRSU

CDGOQ

BHRKE

 

Type Characteristics V

Type Sizing

 

Type Characteristics VI

 

Type Characteristics VII

Properties of text size and structure

baseline:

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.

x-height:

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

Kerning:

AC AL AN AO AT AV AW AY

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

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

 

Type Characteristics XI

Whitespace

 

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

Tautened

 

 

Illusion VII

Tension, Stress and Harmony

 

 

Feeling & Rhythm

tolstoy Wa r and Peace

 

GOING

GOING

GOING

GONE

 

JazzJazzJazzJazzJazzJazzJazzJazzJazzJazzJazz

JazzJazzJazzJazzJazzJazzJazzJazzJazzJassJazzJazzJazz

 

 

 

 

 

 


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

 

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

 

Type Contrast

I

T

vertical, passive

horizontal, active

 

I

/

straight, static, geometric, symmetry

oblique, dynamic, organic, asymmetry

 

K

I

agitated

restful

 

H

 

H

large

small

 

O

T

round, soft

straight, hard

 

O

X

concentric, closed

eccentric, open

 

A

a

upper case, static

lower case, dynamic

 

V

A

Unstable

Stable

 

 

Type Illusions I

 

Type Illusions II

 

Type Illusions III

 

Margins

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

Distinctiveness:

Simplicity:

Proportion:

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

0.0

 

Green on white

-3.0

 

Blue on white

-3.0

 

Black on yellow

-3.8

 

Red on yellow

-4.8

 

Red on white

-8.9

 

Green on red

-10.6

 

Orange on Black

-13.5

 

Orange on white

-20.9

 

Red on green

-39.5

 

Black on purple

-51.5

 

 

Signs

Semantography.

 

Semantography Samples

 

Semiotics (Signs) I

Icons:

Symbols:

 

Semiotics (Signs) II

Indexes:

Example:

 

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

 

Trademarks

 

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

 

Name

side ratio

diagonal

equal division

inscribed square:

resulting rectangle ratio

Square

 

1:1

1.414

Ö 2

2:1

infinity

square root of two

1.414:1

1.732

Ö 3

1.414:1

2.414:1

square root of three

1.732:1

2.000

Ö 4

1.155:1

1.366:1

double square, or square root of four

2:1

2.236

Ö 5

1:1

1:1

square root of five

2.236:1

2.449

Ö 6

1:1.118

1:1.236

golden rectangle

 

1.618:1

1.902

1.236:1

1.618:1

 

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.

BB = AC

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.).

 

Depth

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