CMYK vs RGB November 3, 2009
Posted by kd49 in : Class 8 - RGB v CMYK, Classes , comments closed Review of color compositions and optical illusionsREVIEW
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.
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 October 24, 2009
Posted by kd49 in : Class 7 - Color Theory, Classes , comments closed Logo design recap. more examples of recently updated logosColor 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
Complementary colors are opposites on the color wheel
example: University of Florida
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
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
Everything about color has to do with relationships
Color resources:
Colourlovers
Designing for the color impaired
______
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)
Logo Design October 7, 2009
Posted by kd49 in : Class 5 - Logo Design, Classes , comments closed Review of business card designs.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.
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.
Typography and Layout October 4, 2009
Posted by kd49 in : Class 4 - Typography and Layout, Classes , comments closed Playful use of type: Bembo’s ZooImpact 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
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
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.
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
_______________
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.
Introduction to Typography September 21, 2009
Posted by kd49 in : Class 3 - Introduction to Typography, Classes , comments closed Review of signage assignmentreview 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:
- The art or process of printing with type.
- The work of setting and arranging types and of printing from them
- 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
Visual Communication Rules for Success September 8, 2009
Posted by kd49 in : Class 1 - Design Rules, Classes , comments closed Course descriptionClass introductions
Dillon | Thompson work
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
Photography April 21, 2009
Posted by kd49 in : Photography , comments closed Pulitzer Prize winning photographs of 2008Techniques 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:
Interaction Design April 21, 2009
Posted by kd49 in : Class 11 - Interaction Design, Classes , comments closed Second half of discussion on using the grid. The following PDF describes the application of the grid to the web design process (this was created by Khoi Vinh, the Design Director at the NY Times Online and Mark Boulton.A nice infographic from last week:
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
Principles of Good design
- Consistency Consistency Consistency in placement, behavior, color and labeling.
- NYC Taxis
- Be intuitive for the user
- 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.
- Size, color and placement will suggest a hierarchy. Users don’t read, they scan
- Items that are logically connected should be grouped together: things to buy, things to read, things to play with
- 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
Portfolio Website Examples April 21, 2009
Posted by kd49 in : Classes, Portfolio sites , comments closed Artist portfolioshttp://www.laniemcnulty.com/index.html
http://www.marc-newson.com/main.html
Fashion/product designers
http://www.tordboontje.com/
Distinctive
Media company
http://www.firstbornmultimedia.com
http://www.checklandkindleysides.com/
Incorporates video
http://www.marcjacobs.com/
http://thankyou.thisisgrow.com/T37J
Sound design
Information Graphics April 21, 2009
Posted by kd49 in : Class 9 - Infographics, Classes , comments closed Example of how color is communicated in a design presentation [pdf]Review of color compositions
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
- 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.
Stack graphics which use areas to convey numbers:
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.
A variation of a bar graph is a block histogram – displays the distribution of numeric values in a data set.
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
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
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
- Timeline displays events in chronolgical sequence: Events leading up to the Iraq War
Architectural diagrams
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.