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.
Design Process April 21, 2009
Posted by kd49 in : Class 12 - Design Process, Classes , comments closedDesign of bike rack for New York City: competition website, samples of winning entries
DESIGN PROCESS
Design Process [ppt]
The process of design is critical to successful results.
Most design studios follow in some form the following steps. Research can take a few formats depending on the scale of the project and the preferences of the client:
Discovery: the phase where the designers gather information about the project including the key questions:
- Who is the audience for the product?
- How will it be delivered?
- What is the content and in what format? How often will it be updated?
- Why is the product being created: if there are business objectives, what are they?
- How will the site or product be maintained or updated?
- Review competitive projects
- Interview key stake holders
- Research – seek inspiration
- Understand any creative or technical preferences
- Identify any document functional requirements
Site architecture
- Develop a site architecture that identifies the key pages on the site and their relative hierarchy: example
- Develop wire frame diagrams of the key pages:
- example for a website
- in animation or film this translates to storyboards
- Gain approval before starting design
Schematic Design: the translation of ideas and assumptions to visual form in an effort to further refine the objectives:
- Best to explore a range of options that have distinct differences:
- Seek reaction and feedback
- Redesign : design is an iterative process
- Define functional behaviors
- For print select a paper and solicit bids
Design Development
- Refine the design and apply it to all page templates
- Establish the language for all visual elements and behaviors such as buttons and icons
- Test with users
- Research photography, if appropriate
Production and Technology
- Acquire approval before starting code or sending to the printer
- Develop CSS rules
- Create style guide: sample for logo, sample for web
- Test the code
- Launch the site
- For print, check the printers proofs and approve: set of business papers
For product design, print design and even architecture the specifics can vary slightly but the key phases are the same: video
Recap of design process: video
- Discovery
- Schematic design
- Design development and testing
- Production and technology
- Testing and launch
Design Resources:
- Web statistics
- Latin text
- Font sources: Adobe, Emigre
- Photo sources: Getty Images, Corbis, Veer
- Patterns
- and more patterns
- Ad units
- Envelope standards
_______
ASSIGNMENT
Continue to refine your portfolio site based on the feedback in class.
Logos and Branding April 20, 2009
Posted by kd49 in : Class 6 - Branding, Classes , comments closed 33 logos in 33 minutesbrand tags: what do people think of established brands
Review of iconic logo designers
Branding is the tangible and intangible elements that identify a company or its products and separates them from the competition. Nike is an example of a well known brand. It has a strong association with speed, agility, endurance and strength in consumers mind. A strong graphic identity is an important element in a brand. The benefit of good branding is that people remember your business and have associative images of it and feelings for it.
Brand creates a promise of:
- Substance
People usually associate branding with larger businesses that have the money to spend on advertising and promotion. If you can create effective branding, then it can make your business appear to be much bigger than it really is.
An image of size and establishment can be especially important when a customer wants reassurance that you will still be around in a few years time.
- Reliability
A branded business is more likely to be seen as experienced in their products or services, and will generally be seen as more reliable and trustworthy than an unbranded business.
- Multiple Products
If your business has a strong brand, it allows you to link together several different products or ranges. You can put your brand name on every product or service you sell, meaning that customers for one product will be more likely to buy another product from you.
Elements of creating a brand:
Articulate the identity and the value proposition to the customer
A classic example is from Wal-Mart’s “Everyday Low prices” or Starbucks Excellent coffee in a warm relaxing setting.
- Who are we?
- What business are we in?
- Who is our customer?
- What are the unique benefits we offer them?
- What are the values we represent?
- Who is our competition?
Make all visual and experience designs true to that identity and value.
Example: Good design at good value proposition of Target
Logo explorations:
___________
ASSIGNMENT
Design a logo for the ITP program
A set of resources that might be useful
Read:Business Week: How Great Design Makes People Love Your Company
The Visual Communication That Surrounds Us April 20, 2009
Posted by kd49 in : Class 2 - Signage, Classes , comments closed A World Without Graphic Design(click on Hidden Town in navigation)
Discussion of Assignment:
- Design Observer article
- Student analysis or websites
Review of the 9 rules of design:
- Have an idea
- Make decisions that support the idea
- Use no more than two typefaces
- Choose colors for a reason
- Make the negative space part of the design
- Communicate
- Establish a hierarchy
- Stick to one layout justification
- Work with a grid
- Make the interface intuitive
______
SIGNAGE
Signs, signs, everywhere signs
Presentation of signage from around New York (ppt)
_________
ASSIGNMENT
Come to class on Monday prepared to present 3 images of bad signage in and around New York. The images should be photographs you have taken. Your presentation should include a recommendation for improving the sign.