Week 6 - Layout

• As a Group, read the book chapters, and the Layout, Web sites, and Art/Photo Directing Web pages
  
• As a Group, get one actual product example from the classroom sample cabinet/bins
• Draw the grid used to design your product or product's label
  
• List and explain 3 things that work well with your example's layout and art/photo direction
• List and explain 3 things that don't work well with your example's layout and art/photo direction
  
• What would you change?
  
• Each group will present their findings to the class, (approx. 10 minutes per group)
• Include some type, but mostly art in your presentation
• All group members must speak
• Be creative. Educate us and entertain us!
  
• Other groups will take notes to compare and contrast findings

The Gestalt

Gestalt is a psychological concept and word that refers to "shape" or "form" —basically meaning that the "whole" is perceived as being more than the sum of the parts. In graphic design this means that a logo, brochure, web site, or catalog is perceived as being more than just a collection of type, art, paper, layout, etc. This holds true under examination. The logo or catalog is more than than its parts—all the parts come together to create a powerful and memorable brand identity that delivers a feeling and emotion it the viewer. This of the way you feel when you get your favorite catalog in the mail. I remember this feeling as a child when the Sears Wish Book (Christmas catalog) would come each year. It was mor than just a collection of toys for sale—it was the materialistic side of Christmas wrapped up in one printed catalog.

Look how these advertisements visually deliver the whole before the parts. We want to organize the parts into an organized whole (the faces, jewelry, apple) before we see the parts (words, women, chips).

 

 

 

 

The concept also theorizes that human beings inherently want to make order out of unordered things—organize them—before we try to process them. The graphic design field applies this concept to the study of visually communicating a message to a target audience. This concept is relevant when viewers look at and interact with design work. When designing, consider how your viewer will receive your message—how will they organize the information before they process it? What "whole" will they see first? Which element will they see first? Second? Third? Is your message complex and layered—better delivered in many, smaller, organizable "chunks." Or is it a simple, straight-forward message, better delivered in a single, large, impactful graphic? There is no right or wrong. What matters is that your delivery is appropriate to deliver the message to the target audience.

Rule of Thirds

This is how visual designers begin to organize content on the "page."

(Four magic points, and planes, to focus your viewer’s attention)

Split your page into thirds, vertically and horizontally.This is asymmetrical design at its best. Your layout will be more interesting and more professional looking. This is also the beginning of designing a page layout with a grid.

 

(Left) Centered sunset and horizon is less interesting and less “developed.” (Center) Design is better. (Right) Design is more creative and more "developed."

The Grid: Advertising Design

Less “developed” print ad designs rely on centered elements and overly simple layouts. These can look less creative and unprofessional.

 

Here are examples of creative grids used to design print advertisements.

The Grid: Web Sites

Most designers will be called upon to design a web site. More companies are looking to hire graphic designers that know how to design web sites and rich web content. In addition, most companies have a web site, or they are building one, or they want one.

Web sites have become so popular because they offer many advantages over traditional marketing and advertising mediums (word of mouth, print, television, radio).

Web's advantages:

• Has become an amazingly popular medium to deliver information
• An inexpensive medium (reach)
• Can reach a lot of people quickly and efficiently
• Is instantly updatable
• Instantly delivers current, real-time information
• Accessable at the viewer's discression
• Offer designers "free" color
• Offers instant interactivity with the customer (bounce-backs, response, feedback, chat, help, etc.)
• Extremely high pass-along rate (many people can use the same web site at once)

Web disadvantages:

• Delivery can be slow or lost (bandwidth slow, or cut off)
• Can be difficult to reach specific target markets
• Tracking and measuring users demographics is difficult
• There is a learning curve to create web content
• Industry and technology change so often it is hard to keep up-to-date
• Consistency is hard to maintain due to so many users around the world
• Image resolution is low

The Grid: Web Sites

Designers usually begin page layout using a grid of some type. Having a consistent page layout "foundation" helps your web site pages look like they go together, have a consistent, ordered look, and it reduces the work the veiwer must do when locating information from page to page.

Here are some examples of websites and the grids used to initially lay them out.

Creating a grid on your page helps define spacial areas to place your type, art and photos

 

(Above) Less “developed” web site designs rely on centered elements and overly simple layouts. Long lines of copy, centered copy blocks, and centered, symmetrical layouts are commom here. These can look less creative and unprofessional.

(Below) Here are examples of creative grids used to design web sites.

 

The Grid: Television

Here are examples of creative grids used to design television screen layouts.

 

Chunking Information

Delivering information in small chunks helps viewers process information more clearly and efficiently, and allows designers to control what information viewers see first, second, third, etc.

Look how these samples deliver the message/information to the target audience in "small chunks" of information. Sometimes "white space" is a sound, simple way to separate your information into small chunks. Other ways could be to make some larger, use different colors, typefaces, etc.

 

Visual Hierarchy

Leading the viewer's eye through your design (delivering your message visually in small chunks)

 

 

• All designers must lead their viewers through the information on the page.
• Visual Hierarchy is achieved through placement and size of the type and art.
  
• Our eyes usually start with the largest and most realistic element. (a photo or large illustration, especially living things with eyes)
  
• We then move through the page looking at elements in decreasing size.
  
• We also read/view top-left to bottom-right (western world)

Visual Hierarchy: Depth in Design

As we look at a design, whether it is a logo, packaged product, brochure, or web site, we see certain elements first, second, third, etc. Graphic designers, as visual communicators and "message-deliverers" use this knowledge to their benefit. We can lead the viewer's eyes through our design work by adjusting and altering the elements, making sure the viewer sees what we want them to see first, second, third, etc.

Here are examples of how designers have used depth in design to lead the viewer's eyes.

 

 

 

Layout Styles

Many things can be used to influence your page/screen/packaging layout. Here are just a few:

 

Perspective

 

 

Mondrian

 

Scale (exaggerated)

 

Type Heavy

 

Publications

The publications category includes magazines, newspapers, tabloids, booklets, brochures, etc.

Writing copy for a publication

• Define and clarify the message (what are your saying)
  
• Define and clarify the target market (speak/write directly to them)
  
• Style (how will you speak/write to them -- jargon, slang, professional)
  
• Be clear (Headline broadcasts your intentions, and summarizes)
  
• Use impactful words (Action words -- New, Now, Today, You, Family, Taste, Safe)
  
• Succinct (no wasted words)
  
• Be accurate (check your facts)
  
• Be truthful (don’t stretch the truth to prove your point or persuade)

Structure of a publication

• Headline - Draws reader in and shouts your intent and main message
  
• Subhead - Provided an elaboration of headline. Draws reader in further.
  
• Text - Body copy. Be sure to follow publication's word limits
  
• Pull-quotes - Add interest and “teases” skim readers
  
• Photo captions - Helps explain and identify art and photos
  
• Try for 40 maximum characters per column

 

 

 

 

 

 

The Grid - Used to Design Publications

• Publication designers use a Grid to anchor their page layouts
  
• The Grid organizes all of the pages in a publication
  
• Continuity: The Grid makes sure all pages look the same
  
• The Grid gives the designer many, many options
  
• The Grid provides the reader with consistency so they know where to look for information
  
• The grid helps to organize type and art

 

 

 

Visual Hierarchy in Publication (Rhythm)

• All designers must lead their viewers through the information on the page.
  
• Visual Hierarchy is achieved through placement and size of the type and art.
  
• Our eyes usually start with the largest and most realistic element. (a photo or large illustration, especially living things with eyes)
  
• We then move through the page looking at elements in decreasing size.
  
• We also read/view top-left to bottom-right (western world)

 

 

Progressive Thumbnailing

Don't delete any ideas—save them by progressively sketching (thumbnailing) your ideas until you get what you want. By saving all of your ideas, you can go back and review past ideas and concepts that may still be worth using. It also helps to see where you have been—moving forward, you can prove old ideas right or wrong.

Logos

 

Here are progressive logo concepts for a coffee retailer's logo. These are only 16 out of approx. 50 thumbs I did for this logo.

Notice how I became disenchanted with the direction I was heading, so I tried something completely different. I didn't like that either, so I went back to my original idea and developed it into something I really liked.

 

 

Here are progressive logo concepts for an environmental logo. I started with type, they began designing art elements to represent the elements of the Earth, next I tried them in different variations, then joined them with type.

Single-Page Advertisement

Here are twenty-eight concepts for a single-page ad using the same four elements
(headline, photo, body copy, logo)

 

Photo Direction and Cropping

Just like refraining from using type set directly on the computer, I challenge you to refrain from using stock photography in its original form. Unless you have hired a photographer and personally directed the photo shoot, I would suggest carefully analyzing your photographs to see how they can be cropped to best fit your needs.

Below are examples of a stock photograph and how it can be re-sized and cropped to change how it effects you layout and design. Changes include:

• Moving an element to the front by slightly cropping its edges
• De-cluttering a busy background by enlarging the photo and cropping out extra elements
• Creating a more emphasized and abstract shape to grab the reader's eye and attention
• Moving or changing the emphasis of the primary element (or other elements)
• Adjusting the visual hierarchy of your elements
• Changing the "white space" available to place your other design elements (headline, copy, art, logos, etc.)
• Adjusting your photo to utilize the "Rule of Thirds."