Student Showcase: Movie Site Mockup: Version 1

We will showcase your version 1 movie site home page layouts in class. Tell us a bit about your design choices. Then we will seek feedback from your classmates. [5-10 minutes per student]

Use the following design terminology and concepts as prompts in your discussion of the design work:

  • Design Principles
    • Alignment
    • Proximity
    • Contrast
    • Repetition
  • Design Elements
    • Color Harmony
    • Texture
    • Use of Imagery
    • Typography and Font Choice
  • Required content areas and other specifications
  • Intended purpose
  • Organization and clarity
  • Leading the eye through the design
  • Any special technology needed

Psychology of Color

The Psychology of Color

psychology of color

Infographic

How do colors affect purchases?

color-purchases-lrg

Color Schemes

One very important aspect of web design is selecting an appealling color scheme. Once we consider the psychological associations people have with color, we need to find multiple colors which work together. Color schemes are the basic formulae for creating harmonious and effective color combinations.

The six classic color schemes are:

Monochromatic

color wheel monochromatic color schememonochromatic color scheme blue bar

A monochromatic color scheme consists of a single base color and any number of tints or shades of that color. Tints are the color with a bit of white added, and shades are the color with a bit of black added. Typically, black, white and gray are also incorporated.

monochromatic color scheme solid giant
Monochromatic color scheme of hot pink with black and white: solidgiant.com

monochromatic color scheme aarron walter
Monochromatic color schemes of different hues on different pages: aaronwalter.com

monochromatic color scheme art in my coffee
Monochromatic color scheme in coffee colors: artinmycoffee.com

Analogous

color wheel analogous color schemeanalogous color scheme blue green bar

An analogous color scheme consists of colors that are adjacent to each other on the color wheel. Avoid having analogous colors which are too far apart from each other. Stick to one-third of the color wheel.

color scheme analogous blinksale
Analogous color scheme in blues and greens: blinksale.com

analogous color scheme bournemouth university
Analogous color scheme in reds and oranges: bournemouth.ac.uk

analogous color scheme simple bits
Analogous color scheme in oranges and yellows: simplebits.com

Complementary

color wheel complementary color schemecolor scheme bar complementary

A complementary color schemes consists of colors which are located on opposite sides of the color wheel. Rarely do they look good in a foreground-background relationship, but they can work very well adjacent to each other.

color scheme complementary simultaneous contrast
Complementary colors placed in a foreground-background relationship causes simultaneous contrast.

complementary color scheme talk bee
Complementary color scheme in yellow and purple: talkb.ee

complementary color scheme simmons university
Complementary color scheme in blue and orange: simmons.edu

complementary color scheme zach hendricks
Complementary color scheme in blue-green and red-orange: zachhendricks.net

Split-Complementary

color wheel split-complementarycolor scheme bar split-complementary

A split-complementary color schemes consists of a base color plus the two colors immediately adjacent to the base color’s complement.

color scheme split-complementary finaltouchapp
Split-complementary color scheme of orange, blue-violet, and blue-green: finaltouchapps.com

color scheme split-complementary nuances
Split-complementary color scheme of red-orange, blue, and green: nuances-communication.fr

Triadic

color wheel triadic color schemecolor scheme bar split-complementary

A triadic color schemes consists of three colors which are equidistant on the color wheel.

color scheme triadic crayola
Triadic color scheme of orange, green and purple: crayola.com

color scheme triadic 365 days of astronomy
Triadic color scheme of yellow-orange, red-violet and blue-green: 365daysofastronomy.org/

Tetradic

color wheel tetradic color schemecolor scheme bar split-complementary

A tetradic color schemes (also known as rectangle or double-complementary) consists of two pairs of complementary colors.

color scheme tetradic paulaner.de
Tetradic color scheme of blue and orange, and green and red: paulaner.de

color scheme tetradic florida flourish
Tetradic color scheme, also of blue and orange, and green and red: floridaflourish.com

Color Scheming Resources

Color Scheme Designer

color scheme tools color scheme designer

ColorSchemer Studio 2

color scheme tools colorschemer studio 2

Adobe Kuler

color scheme tools adobe kuler

ColourLovers.com

color scheme tools colourlovers