REVIEW

Recap of color wheel strategies

Hue – the color we describe. Pure color. Color reflected from or transmitted through an object. It is measured as a location on the standard color wheel, expressed as a degree between 0° and 360°. In common use, hue is identified by the name of the color, such as red, orange, or green.

Value or Brightness – how much light. Relative lightness or darkness of the color, usually measured as a percentage from 0% (black) to 100% (white).

Intensity, tint or saturation – how much color. Strength or purity of the color (sometimes called chroma). Saturation represents the amount of gray in proportion to the hue, measured as a percentage from 0% (gray) to 100% (fully saturated). On the standard color wheel, saturation increases from the center to the edge.

Formation of color in print vs digital:
Class ppt

Additive color: RGB obtained by mixtures of red, green and blue light. Project of  three light beams of red blue and green. Each of the three beams is called component and each can have variable intensity from fully on to fully off. Zero intensity is black and full intensity is white. Where the light overlaps secondary colors are formed. A pure secondary is formed by  two primary colors of equal intensity: cyan is green + blue, magenta is red+ blue, yellow is red+ green. Full light produces white. One of the challenges of RGB is that value can defined differently across different devices. Typical devices are: computer (since 1988), mobile phones, video projectors.

A color in the RGB model is described in percentage or a fixed variable (typically 0-255).  0-156 is the range that a single 8-bit byte can offer. (by encoding 256 distinct values) Zero is black and 255 is white. Higher end digital equipment can go to 65535 colors (16 bit)

Web color definition or hex color:

Web color is defined by a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications, to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation. This represents the least (0) to the most (255) intensity of each of the color components. The hex triplet is formed by concatenating three bytes in hexadecimal notation, in the following order:

Byte 1: red value (color type red)

Byte 2: green value (color type green)

Byte 3: blue value (color type blue)

For example, consider the color where the red/green/blue values are decimal numbers: red=36, green=104, blue=160 (a greyish-blue color). The decimal numbers 36, 104 and 160 are equivalent to the hexadecimal numbers 24, 68 and A0 respectively. The hex triplet is obtained by concatenating the 6 hexadecimal digits together, 2468A0 in this example.

Note that if any one of the three color values is less than 16 (decimal) or 10 (hex), it must be represented with a leading zero so that the triplet always has exactly six digits. For example, the decimal triplet 4, 8, 16 would be represented by the hex digits 04, 08, 10, forming the hex triplet 040810.

The RGB mode assigns 24 bits of data to each pixel.
That allows for 16,777,216 different colors

The number of colors that can be represented by this system is

visualization of RGB color – additive color

Subtractive color: is the process that allows everyday objects around us to show color. Subtractive color starts with an object that reflects light and uses colorants to subtract portions of the white light to produce colors. Color paintings, film photography and all color printing processes use the subtractive processes. In these cases, the reflective subtract is the canvas or paper which is usually white. Colored inks act as filters and subtract portions of the white light striking the image on paper to produce other colors. Printing inks are transparent, which allows light to pass through to and reflect off the paper base. The printing process uses mixtures of cyan,magenta and yellow (CMY) and a fourth ink. black (K). When combined in equal amounts, pure subtractive primary colors produce the appearance of black.

The term “subtractive” is used because the primary colors are pure until you begin mixing them together, resulting in colors that are less pure versions of the primaries. For example, orange is created through the subtractive mixing of magenta and yellow together.

Practical example of how to think of additive versus subtractive:

For example, you can decrease the amount of any color in an image by increasing the amount of its opposite on the color wheel—and vice versa. Colors that lie opposite each other on the standard color wheel are known as complementary colors. Similarly, you can increase and decrease a color by adjusting the two adjacent colors on the wheel, or even by adjusting the two colors adjacent to its opposite.

In a CMYK image, you can decrease magenta either by decreasing the amount of magenta or by increasing its complement, which is green (the color on the opposite side of the color wheel from magenta). In an RGB image, you can decrease magenta by removing red and blue or by adding green. All of these adjustments result in an overall color balance containing less magenta.

In the CMYK mode, each pixel is assigned a percentage value for each of the process inks. The lightest (highlight) colors are assigned small percentages of process ink colors; the darker (shadow) colors higher percentages. For example, a bright red might contain 2% cyan, 93% magenta, 90% yellow, and 0% black. In CMYK images, pure white is generated when all four components have values of 0%.

Use the CMYK mode when preparing an image to be printed using process colors. Converting an RGB image into CMYK creates a color separation. If you start with an RGB image, it’s best to edit first in RGB and then convert to CMYK at the end of your process. In RGB mode, you can use the Proof Setup commands to simulate the effects of a CMYK conversion without changing the actual image data. You can also use CMYK mode to work directly with CMYK images scanned or imported from high-end systems.

visualization of CMYK color

example of CMYK screen printing

There are approximately 55,000 colors using CMYK, rather than 16.7 million plus, using RBG

Pantone: the standard for color communication

Review of printing resources: the Pantone color book. The PANTONE MATCHING SYSTEM is the definitive international reference for selecting, specifying, matching and controlling ink colors.

______

ASSIGNMENT

Come to class prepared to discuss and share your initials concepts for your final project – a portfolio website.

Color Theory based on the color wheel and identification of primary, secondary and tertiary colors.

Use of the color wheel in design: [ppt]

Analogous colors are colors that are adjacent on the color wheel.

examples:
gorilla glue

Underground Seattle

Complementary colors are opposites on the color wheel

example: University of Florida

The Color Purple

Monochromatic color schemes  use only the tints and shades of one color. If you mix white with a pure color you produce tints of that color. If you mix black with a pure color, you get shades of that color.

example: Microsoft Money

Color Triads use any three colors that form a triangulation on the color wheel example New Victory print piece or example: ProPublica

examples of color theory in art

Color Meanings

Hue – the color we describe, pure color. Color reflected from or transmitted through an object. It is measured as a location on the standard color wheel, expressed as a degree between 0° and 360°. In common use, hue is identified by the name of the color, such as red, orange, or green.

Value or Brightness – how much light. Relative lightness or darkness of the color, usually measured as a percentage from 0% (black) to 100% (white).

Intensity, tint or saturation – how much color. Strength or purity of the color (sometimes called chroma). Saturation represents the amount of gray in proportion to the hue, measured as a percentage from 0% (gray) to 100% (fully saturated). On the standard color wheel, saturation increases from the center to the edge. To change the saturation of a color, add the compliment color.
Demonstration of how to manipulate these properties in Photoshop and other programs.

Motion graphics of Mark Coleran: reel | stills

Explorations of Joseph Albers

Everything about color has to do with relationships

Color exercises

Color resources:
Colourlovers

Designing for the color impaired

Color Scheme designer

______
ASSIGNMENT

take the color IQ test

Read: color basic do’s and don’ts

Make two different compositions:
1. a composition that is an optical illusion using the same color blocks but having them appear to be different  because of its color juxtaposition. ( simple example) or  (complex example)
2. Make a second composition working using one constant variable of hue, saturation or brightness and changing either one or both of the other variables. (simple example) or (complex example)

Jon Stewart’s take on the Olympic logo

A look at the London Olympic logo

Successful logos are:

• Distinctive
• Memorable
• Appropriate
• Practical
• Successful logos are usually clever

Logos can be:

• Typography
• Type and a mark
• Just a mark

A few favorite and classic logos: PPT presentation

Case studies:

Shell
Designed by Raymond Loewy

Fed Ex History
The original Federal Express corporate logo was designed by Richard Runyan in 1973. The new FedEx logo is one of the most recognizable logos due to the company’s presence all over the world. The logo was created in 1994 by Lindon Leader, as Senior Design Director at Landor Associates, San Francisco. The same year it was ranked by Rolling Stone Magazine as one of the 8 best logos of the past thirty-five years. Along side Apple, Coca-Cola, Nike, IBM, Starbucks, McDonald’s and Playboy. FedEx is a syllabic abbreviation of the company’s original name: Federal Express. At first glance the FedEx corporate logo appears to be plain and simple, however there is a detail that once seen changes the perception about it: a right-pointing arrow located in the negative space between the E and x. While the arrow becomes quite obvious when pointed out, most people do not observe it. The arrow symbolizes forward movement and thinking.

Google
interview with the designer, Ruth Kedar

• The colors evoke memories of child play, but deftly stray from the color wheel strictures so as to hint to the inherent element of serendipity creeping into any search results page
• The chosen typeface is based on Catull, an old style serif typeface. Catull borrows elements from traditional writing instruments such as the quill and the chisel with a modern twist. Search, by nature, is an activity that requires we look into the past. Therefore Catull’s historical ties seemed appropriate, as did the bridging between the old analog world and the new emerging digital era.
• This design managed to break with the existing conventions landing Google with the unique visual expression it was looking for.

Google logo variations

Apple logo history

Amazon logo history

Logo design in ‘09

The best campaign buttons of 2008

excellent blog on logo design: logolog

interesting resource for logos inspired mathematically

________

ASSIGNMENT

Read: Paul Rand on logo design

Review: Iconic logo designers, and Logo Design History and come to class prepared to talk about a favorite designer and present their work.

Impact with type: Girl Effect/Nike

Review of last week’s assignment: name in six fonts and expressive words.
15 characteristics to look at

Recap of typography terminology
Type with Meaning

Obama versus McCain font NPR interview

Optima versus Gotham

Type decisions include Font

• Font choice

Avoid overuse. There are a few fonts that are used so much they have lost their distinctiveness.
Font Confessional

• Font size

The point is used to measure the size of a font. One point is equal to 1/72 of an inch. When a character is referred to as 12pt, the full height of the text block, and not just the character itself, is being described. Because of this, two typefaces at the same point size may appear as different sizes, based on the position of the character in the block and how much of the block the character fills. Type is measured in Points. A document is set in 12pt type on 15 pt leading. means that it is a 12 point font, with 15 points between the baselines of two successive lines. Thus there are 3 points of additional space between lines. As a general rule of thumb leading should be about 120% greater than character font size.

• Weight variations such as bold and non-bold

• Justification

For center-justify,  avoid rivers and crowding

• Leading
  • Bad example Philly.com

• Kerning: Space between letters

• Line length: While there is no hard and fast rule, 39 to 75 characters are considered ideal.
  (the above line is 72 characters)

The width of a line is normally from 45 to 75 characters. Anything more, and it’s hard to read a line at a time. This is why magazines and newspapers tend to use multiple columns.

•    Special treatments such as lead letter

The most readable fonts in print are straight-forward serif faces. These include fonts such as Times New Roman, New Century Schoolbook, and Palatino. Most displays have so little resolution that serifs don’t come out well. Many people believe sans serif fonts work better online. A look at some interesting choices of type, layout and kerning [ppt]

A look at some clever layouts of famous quotations. Note the use of the techniques of color, layout, type variation to reinforce the message.
These are from Designing with Type originally created by James Craig (ppt)
Pitfalls:

• Inappropriate font choices
• Too many fonts in a composition
• Mixing justification formats: bad alignment  | cleaned up
• Density on the page
• Rivers of white space or edge issues
• Bad hyphenations
• Over use of !! and italic
• Proper spacing is critical. This includes spacing of all kinds: the space between lines, between words, and within words
• Avoid overuse. There are a few fonts that are used so much they have lost their distinctiveness. Font Confessional
• The movie font

____________

BUSINESS CARDS
Business cards incorporate typography, color, layout and sometimes logo We will review the design of business cards and attempt to design our own as an exercise in applying many of the visual communication skills we have covered.

Business card design:
Standard size is 3.5″ x 2″

• A successful card will help others know and remember you. Ideally it should convey a sense of who you are, what you do, or your interests
• Card must be legible

Choices to make:

• Typeface to use. stick with one, two at most and use the variations of weight  available to you. Use weight and size to establish a hierarchy. The most important item should be either larger, bolder, in a distinctive color or set off by more white space – or some combination. Things that are related logically should be related visually.
• Logo or no logo
• Color
• Format: center justify, left justify, right justify, full justify
• Punctuation: for  phone numbers option are dashes and parenthesis or periods or just space

Sample business card design discussion

Some creative examples

Cards of change

_______________

ASSIGNMENT
Produce a business card for yourself.  Post a digital copy to your blog but also bring 16 actual size cards to distribute to the class. size is 3.5″ x 2″ and please use both sides of the card.

review of Business Week article. A few relevant links:
Flash abuse: Leo Burnett

An overview of typography including an introduction to type, the terminology associated with it and guidelines for its use.

_____

FONT ART
4 Dead Celebrities

Integration of Farci-Arabic and Latin alphabet

Typography is:

1. The art or process of printing with type.
2. The work of setting and arranging types and of printing from them
3. The general character or appearance of printed matter.

A typeface refers to a group of characters, such as letters, numbers, and punctuation, that share a common design or style. Times New Roman, Arial, Helvetica and Courier are all typefaces. There are over 300,000 typefaces.

Fonts refer to the means by which typefaces are displayed or presented. Graphic designers choose typefaces for their projects but use fonts to create the finished art. Typefaces are selected. Fonts can be purchased at type foundries.

Character, which is any individual letter, numeral or punctuation mark. The capital letters are called caps, or uppercase (u.c.). Small letters are called lowercase characters (l.c.) Numbers are called numerals or figures.

Type Families The different options available within a font make up a type family. Many fonts are at a minimum available in roman, bold and italic. Other families are much larger, such as Helvetica, which is available in options such Condensed Bold, Condensed Black, UltraLight, UltraLight Italic, Light, Light Italic, Regular, etc. The univers font comes in a large family of over 30 options.

example of Helvetica type family

Classifications of type:

• Serif (old style, transitional, slab serif, modern)
• San serif – typically uniform in stroke width.
• Script
• Decorative

Font Book on a mac is a good resources for viewing type libraries. Demonstration of Font Book

The elements of type and seven classic typefaces (ppt)

How type used to be set.
The typography school

_______

ASSIGNMENT

Listen to: Please Explain: Typography, The Leonard Lopate Show
(scroll down the page to find it)

Create 6 examples of your name choosing font preferences with at least one example of serif, san serif, decorative and script: example

Create 2-3 expressive words: ppt example

Read: About Typeface

Look at Tables of Contents and The Professional Gallery on Designing with Type

Excellent reference:
Designing with Type

Elements of  Typographic Style

Thinking with Type

Goals of the class:
To give you practical knowledge and skills for making the visual choices that will be an inevitable component of your academic and professional careers and some confidence on how to approach visual problems. The assumption is that in your academic and professional careers you will be confronted with visual decisions or involved in managing or hiring design professionals. This class does not assume that you will become professional designers.

Expectations:

• Attendance. You must attend at least 12 classes
• Assignments. You must do the assignments
• Participation. You must participate actively in the class discussions
• You must have a blog, post your work to it and be prepared to discuss it during class
• Hone your visual skills  “Test Your Awareness,” a new PSA from Transport for London’s campaign for cycling safety, turns the fact that we can all miss seeing the obvious

Format: Half the class time will be used for a  lecture and introduction of a new topic and half the class will be spent reviewing the previous week’s assignment which is generally based on the lecture topic and focused on developing a body of work that is ultimately useful to you.

Categories of design that we will explore in print and digital media:

• Principles and vocabulary of visual communication
• Tools of communication including
  • Typography
  • Logo and branding
  • Color
  • Photography

• The application of design principles to:
  • Information design
  • Interface design
  • Packaging
  • Motion Graphics
  • Photography

•    Design process and resources

Discussion of sample assignments

Cool visual for this week:
Melting Men

______

PRINCIPLES OF VISUAL COMMUNICATION
Basic Principles: START WITH AN IDEA
Good design is not about good taste or bad taste. It is about having an idea and applying it rigorously to communicate a message
Clarity: communication is the goal
Consistency: rules are consistently applied.
Appropriateness: feels right for the subject matter
Practicality: can be reproduced, coded, whatever.

Presentation of 10 Rules for Design Success (ppt)

Demonstrate how to analyze design showing Macaulay Honors College example
Discussion of use of grid.

________

ASSIGNMENT

Pick a website that you like and analyze its success in terms of grid, colors, layout, typography, consistency and usability.
Read: Design Observer

Techniques for taking and selecting great photographs

As with other forms of visual communication, successful photography usually adheres to some basic rules of composition.

• Compose the photo using the 9 grid technique
• Simplicity of Composition: example
• Leading lines to create depth, interest and focus: example
• Make light work for you: example
• Use space and depth
• Point of view: Congo chiildren example (image 4): Karl Rove example
• Tell a story: Paris Match does a particularly good job with using photography to tell a story
• In choosing a background color, choose a secondary color in the photograph as the background (ppt)

Review of the Olympic moments photographs applying the principles above.

Definitions:

Photo journalism: The informative photographic documentation of an event or subject in real-time. 2008 National Magazine Award Winning Example from National Geographic

Photo portfolio:  Collection of photos that were crafted to tell a story. 2008 National Magazine Award Winning example from Vanity Fair

In making photo selections

• Look for consistency in quality among a group of photos that will display in a set: consistent lighting, color balance and contrast: controversy over darkened photos
• If the photos involve people have a consistent framing of the faces make the top of head to chin a consistent height, otherwise you are implying importance or priority: example
• If there are a group of portraits all of them should have a consistent relationship with the camera (all looking into it, all looking away from it)

Interesting reads:

• interview with NY Times photo editor

A nice infographic from last week:

Homocides in Manhattan (NYT)

Review of website design project

Interaction Design

We are surrounded by interactive design from alarm clocks,  to street signs, to ATMs and voicemail. Voicemail is a particularly egregious examples of bad interaction design. Why do we have to listen to instructions on how to leave a message every time we make a phone call? Why do we have to learn how to fasten a seat belt every time we get on airplane?

Good interaction or interface design should be intuitive and not require instruction. Think NY taxis: consistent, intuitive and logical. [ppt]

Good examples of Interaction design:

• The walk signs in Mexico
• Parking meters (good model for video and audio files that time left is a more valuable metric than time spent watching (which requires thinking)

Bad examples

• Self  checkout at Stop n Shop

Principles of Good design

• Consistency Consistency Consistency in placement, behavior, color and labeling.
  • NYC Taxis
• Be intuitive for the user
  • amazon diamond search
• Set standards and stick to them: keep search and other buttons in the same location on every screen
• As in information graphics, avoid visual clutter
  • Yahoo establishes icons on the HP and then they disappear. Why use icons?
• Word your messages and labels effectively. Tell it like it is. A link to Job listing should say JOBS, not EMPLOYMENT OPPORTUNITIES or CAREER
• Provide indicators of where you are: You are here! Let users know where they are and where they need to go.
  • breadcrumbs
  • highlighted navigation
• Size, color and placement will suggest a hierarchy.  Users don’t read, they scan
  • apple.com
  • politico.com
• Items that are logically connected should be grouped together: things to buy, things to read, things to play with
  • ASPCA website
• Follow standards for search, checkout, home button, red = stop, green = go.
• Keep it simple mapquest vs google maps
• Allow for error recovery, assume users will make mistakes. Have error message align with the errors. back is the most frequently used navigation button.

Some interesting interfaces:

• zoomi.com
• real memories
• Johnson Bank
• Click bored
• mult-touch interface design (video)
• bumptop desktop (video)
• Save the Words
• Tour of Rio
• Tufte’s analyis of the iphone

______

ASSIGNMENT

Finalize your portfolio website design

http://juliespeidel.com/

http://www.laniemcnulty.com/index.html

http://www.keithtyson.com/

http://www.hugoandmarie.com/

http://www.yokonamiosamu.jp/

http://www.calebcharland.com/

http://www.marc-newson.com/main.html

Fashion/product designers
http://www.tordboontje.com/

Distinctive

http://www.joedavis.co.uk/

http://christiansparrow.com/

Media company

http://www.firstbornmultimedia.com

http://www.studionewwork.com/

http://www.checklandkindleysides.com/

Incorporates video
http://www.marcjacobs.com/

http://thankyou.thisisgrow.com/T37J

http://johnlikens.com/

Sound design

http://www.studionewwork.com/

Review of color compositions

Daily show clip

Information graphics represents the  intersection of graphics, journalism and science.
The goal of the graphic is to efficiently communicate information or trends in other words, to help people learn. The focus is usually finding interesting or important patterns in the data and displaying them succinctly.

The information is the interface. Music animation machine

Infographic types [ppt]:

Maps

• overlays or sometimes call cosmographs show spatial patterns in data: NY Times Disappearing Food
• color code or key maps: Washington DC land use near the new stadium
• scaled maps: world map scaled by population
  and global spending
• How much is your vote worth, NY Times

Line Graphs – show comparisons and clarifies a relationship over time. Vertical baseline should be zero or have a reference to a zero baseline otherwise data could be deceiving. Line graphs should only be used when the positions of the x-axis are numeric.

• unemployment
• bear market comparison
• scatter graphics

Stack graphics which  use areas to convey numbers:

• US Debt
• Govt outlays by category of spending

Bar Graphs are classic method for numeric comparisons. Their advantage is they are capable of showing one or more sets of variables. Ideal for discreet and fixed data.

• Television size over the past 10 years
• The American Way of Debt
• Measuring an Internet Election

A variation of a bar graph is a block histogram – displays the distribution of numeric values in a data set.

• I Tunes Music sales
• How different groups voted in the election

Pie Chart based on division of the whole or parts of the whole. Can be limiting

Mosaic or Vorno Treemaps are effective for visualizations of hierarchical structures

• Newsmap
• Map of the Market
• A Year of Heavy Losses
• Parts of Inflation

Bubble Graphs display a set of numeric values as a circles. It is especially useful for data sets with dozens to hundreds of values, or when the values differ by several orders of magnitude. Effective for displaying large quantities of data

• Maritime Flags
• Olympic Medals
• Olympic Medals over time (nyt)

Pictographs use images often in specific sizes or quantities to represent numerics

Variation is tag clouds where words are scaled to represent frequency. These are sometimes called Wordles

Image vs Data – sometimes an image can be more effective than a data display and sometimes the data itself communicates the message most effectively.

Flow Chart

• Sequence chart showing relationship or connections: Al Qaeda or
  • Six degrees of Paulson
• Timeline displays events in chronolgical sequence: Events leading up to the Iraq War

Architectural diagrams

• scene recreation

Five approaches to deaths of Americans in Iraq
Numerics
Graphic representation 1
Graphic representation 2
Image
Map and audio video based
Successful infographics are:

• Clear
• Use the data and don’t invent
• Have little or no superfluous detail or ornament

examples from NYTimes artist S Carter

_______

ASSIGNMENT

Develop an information graphic to describe an aspect of your life.