layout color typography_presentation

Design Wrap-upMultimedia website critique

CRAP design

Color wheel

Typography

Layout

Project 1: Website redesign

IIMMJ187 Introduction to Interactive Multimedia

Problem Solving

Visual or Design Element: Anything on the page

as well as the lack of anything (space).

Images, text, lines, shapes, graphics, spacing, etc.

Design is about:

• Communication

• Creating Interest

• Solving Problems

Multimedia website critiqueAssignment

CRAP Design

C.R.A.P:

• Contrast

• Repetition

• Alignment

• Proximity

Contrast

Use colors, shapes, sizes, fonts, space and imagery to create contrast in design.

Avoid colors and typefaces that are similar.

RepetitionRepeat visual elements throughout the designCommunicates consistency and brand

Alignment

Where’s my boat? Dock 4, Slip 20.

Proximity

Similar Items Closer, Different farther apart.

Color

CMYK or RGB?

CMYK

For Print

DO NOT USE IN CLASS!

RGB

For Screens

ALWAYS USE IN CLASS!

Color Wheel

Primary Colors

Wheel is based on the equal spacing of the primary colors red, yellow and blue

Secondary Colors

Equal combinations of those primary colors:

orange, green, violet/purple

Tertiary (third) Colors

The next level of equal combinations

The color blue-green for example.

Color Wheel Exercise

Color Relationships

• Complementary • Two opposite colors in wheel

• Triads • Triangle Spacing around

wheel

• Analogous • Adjacent Hues

• Monochromatic • Single color, varied intensity

• Compound • Combines colors from various

hues

Color Relationships

• Complementary • Two opposite colors in wheel

• Triads • Triangle Spacing around wheel

• Analogous • Adjacent Hues

• Monochromatic • Single color, varied intensity

• Compound • Combines colors from various

hues

Color Relationships

• Complementary • Two opposite colors in

wheel

• Triads • Triangle Spacing around wheel

• Analogous • Adjacent Hues

• Monochromatic • Single color, varied intensity

• Compound • Combines colors from various

hues

Color Relationships

• Complementary • Two opposite colors in wheel

• Triads • Triangle Spacing around wheel

• Analogous • Adjacent Hues

• Monochromatic • Single color, varied intensity

• Compound • Combines colors from

various hues

Color Relationships

• Complementary • Two opposite colors in wheel

• Triads • Triangle Spacing around wheel

• Analogous • Adjacent Hues

• Monochromatic • Single color, varied

intensity

• Compound • Combines colors from various

hues

Hex ValuesMore than 16 millions colors on the web

#000000

#000000

#000000

Carolina blue!

Typography

Font styles

Type CategoriesRemember them in groups of two:Old/Modern, Serif/Sans, Script/Decorative

Oldstyle

Modern

Slab Serif

Sans Serif

Script

Decorative

Drag picture to placeholder or click icon to add

My RulesNever use more than three fonts; two is probably enough

Never use more than one serif font

Never use more than one san serif font

Never use more than one decorative font and only in limited doses

Typically, I choose one Serif, one san and call it a style!

Fun

Papyruswatch.com

Dafont.com

What the Font

Layout

Devine Proportion

The Golden Ratio

It does exist…

Rule of Thirds

Old Web layouts: 960 grid

Standard Web layouts1 col2 col3 col

1 column or fluid center

2 column fluid

3 column fluid

New modelsAdaptive DesignResponsive Design

Project 1

Wireframes and color comprehensive layouts

Assignment: Website redesign

Get started!