Nico Robin by Marley Botelle

Name by Marley Botelle

Quotation by George Carlin

Design Notes: Typography

“Fonts are the clothing that our ideas wear.”

·      Legibility: Choose classical time-tested typefaces( Baskerville, Frutiger, Garamond, Gill Sans, Helvetica, Palatino, Times New Roman, etc.)

1.     Serif: reads best at smaller sizes and can be complementary.

Ex.       ABC          

2.     Sans Serif: Better with larger fonts

Ex.       ABC

·      Font Variance: Too many fonts confuse the reader and spoil the design

·      Definition: Fonts that are too similar cause ambiguity. What you are trying to emphasize wont be as clear.

·      Readability: Use upper and lower case letters for optimum clarity. All capital letters are the equivalent of shouting, and are more difficult to read.

·      Alignment: Left alignment reads easiest, consider eye flow as it moves down a page; if you use other alignments make sure there is a purpose.

·      Emphasis: Use these tools with discretion and without disturbing eye flow.

1.     Italics

2.     Bold

3.     Size

4.     Color

5.     Typestyle change

·      Integrity: Avoid stretching or distorting type because it compromises integrity.

·      Weight: Strive for a sense of balance (heavy or light fonts)

·      Kerning: The adjustment of space between the letters

·      Tracking: Deals with how the whole groups of letterforms are spread out/ spaced.

Design: The Principals and Elements

"People ignore design that ignores people"

-Frank Chimero

What is design?

·      Design elements are the basic units of visual images.

·      The principles of design govern the relationship of the elements used and organized the composition as a whole.

·      All imagery, art, design and photography alike, are compromised of elements that can be broken down and analyzed. This goes for web design as well.

Design Elements:

·      Space- can exist in two or three dimensions, can refer to positive or negative space (used to create optical illusions), or can refer to foreground mid or background images (depth).

·      Line- size (tapper, thin, thick, etc.) and type (normal, dashed, etc.)

·      Color- invokes mood, time, place, etc.

·      Shape- Three categories, 1. man made objects or objects seen in nature that we can recognize, 2. organic (rounded edges, no hard or right angles), 3 geometric (angled shapes)

·      Texture- two types, 1. implied for instance character or detail in objects and 2. actual physical textures.

·      Value- the depth of rendering or shading or color values.

Design Principals:

·      Unity- Creates a sense of order, a consistency in size and shape. Proximity can create a sense of unity, it can also show a lack of unity.

·      Variety- “Spice of life”, plus you want to be able to work in a variety of formats and be  able to work with what your client wants.

·      Repetition- Can create unity and can be used with variety (Andy Warhol).

·      Harmony- The idea that everything has its place and is in its place.

·      Proximity- White space, the info is organized based on importance, how much eye movement is required to scan for info, size.

·      Proportion- Works with harmony and proximity and is incredible important, it can changed the whole meaning of design, and things out of proportion is very evident.

·      Functionality- Form or function? Functional should rise over form or they should be equal, it should be legible and eye catching.

The three primary colors are red, yellow, and blue and with these three colors you can create secondary colors. For example mixing two primary colors like red and blue will create the secondary color violet. Furthermore, mixing a primary color like red with a secondary color like violet will create a tertiary color, magenta. Subtractive color models are colors mixed together beginning with white and ending in black as the colors are mixed together. Subtractive color models are pigment generated. In contrast, Additive color mixing starts with black and ends with white because the more color added the result is lighter; this is because Additive color is light generated. Different colors are associated with different moods and emotions. Not only that, but colors affect the setting and can change how other colors look because of color intensity.

Grey Scale Image.

Monotone blue.

Monotone orange.

Monotone violet.

Monotone red.

Monotone green

Complementary colors: Green and red

Complementary colors: Yellow and violet

Complementary colors: Orange and blue

Color Theory

 

VISABLE COLOR SPECTRUM

·      ROYGBIV (Red, orange, yellow, green, blue, indigo, violet) are visible colors in spectrum

PRIMARY COLORS

·      Pigment generated colors are derived from these primary colors: RED, YELLOW, and BLUE

·      Light generated coloers are derived from these primary colors: RED, GREEN, and BLUE.

SUBTRACTED AND ADDITIVE COLOR

·      Subtracted color is pigment generated

·      Additive color is light generated

SECONDARY AND TERTIARY

·      Secondary: Mixing primary colors creates other colors. For example: blue+yellow = green and blue+red = violet

·      A secondary wheel can expand to tertiary and beyond.

COLOR MIXING

·      RGB (Red, green, blue): light generated model

·      RGY (Red, green, yellow): pigment generated model

·      CMYK (Cyan, magenta, yellow, black): print process model

COLOR MODES

·      Monochrome: Tints, shades and tones of single hue

·      Grey Scale: Black and white values only

·      Web Safe RGB: Hexadecimal compatible

COLOR MODIFICATIONS

·      Tints: Add white to a pure hue

·      Shades: Add black to a pure hue

·      Tones: Add grey to a pure hue

COLOR HARMONY

·      Complementary colors: opposite each other on color wheel

·      Split complementary: Two colors opposite each other and the one or two colors to the left

·      Analogous: Three colors next to each other

·      Triad: Drawing a triangle in wheel and using the three colors the corners point towards

·      Tetradic: Rectangle drawn in wheel pointing at four colors

·      Quadrilateral: Four corners of  square drawn in wheel.

COLOR PALETTES

·      Different color palettes can invoke mood, location, and emotion.

COLOR PROPERTIES

·      Cool, warm, bright, dark, saturated, desaturated

COLOR INTENSITY

·      Color intensity changes in relation to its surrounding color

COLOR ASSOCIATIONS

·      These types of color associations are universal to all people

CULTURAL AND PSYCHOLOGICAL COLOR ASSOCIATIONS

·      These color association are generated from cultural and contemporary sources and may not be universally recognizable.

Why colors matter?

·      73% of purchasing decisions are now made in-store.

·      Catching the shopper’s eye and conveying information effectively are critical to successful sales.

·      Color increases your recognition by up to 80%.

COLOR AFFECT:

 APPETITE

·      Blue is a rare occurrence in nature

·      We have no appetite responses to blue food

MIND

·      Pink is a tranquilizing color that drains your energy

·      Used in prisons, holding cells, opposing team locker rooms