acrStudio
Teaching home

Design 3: Visual Organization and Information Design

Introduction
Reading
Week 6: Information Hierarchies II

Featured Font Family: Beton

Type offers designers endless opportunities to establish new levels of visual interest. Consider how the font family Beton® Designed by Heinrich Jost, 1931 offers compelling angles and blunt slab serifs; an ideal typeface to create visual tension and modern formality.

The Bauer Typefoundry first released the Beton family of types in 1936. Created by the German type designer Heinrich Jost, the present digital version of the Beton family consists of six slab serif typefaces. First developed during the early 1800s, by the 1930s slab serif faces had become one of many stock styles of type developed by foundries all over the world. Because of their distance from pen-drawn forms and their industrial appearance, they were seen as “modern” typefaces (their serifs kept them from being too modern). Faces like Beton were interesting contemporary competitors with more thoroughly modern experiments like Basic Commercial and Futura.

The first slab serif typefaces, like Adrian Frutiger’s revival Egyptienne F were outgrowths of didone style text faces (e.g., Walbaum). As newspapers and advertising grew in importance in the western world (especially in “Wild West” America), type founders and printers began to create bigger, bolder typefaces, which would set large headlines apart from text, and each other. Through display tactics, businesses and industry could begin to visually differentiate their products from one another. This craze eventually led to the development of monster sized wood type, among other things.

Read more about this font family

Typographic Logos

A typographic symbol that is a powerful visual representation of a company.

It forms the basis of it’s corporate identity. A logotype consists of text or abbreviated text, and it may combine other graphic elements but the core elements are type.

A logo can be developed from a organization or person's initials or the name of a product or social movement. Logos that are made up of letters demand the same treatment as pictorial symbols. There should be an effective use of contrast and tension. Negative space around and within the letter forms carry as much weight as the shapes themselves, and all the graphic elements have to form a unit. A logo should be more than a conglomeration of unrelated elements that are held together by a border.

Look at how the designers from Pentagram created this visually dynamic logo type for a museum in Vienna dedicated to Mozart’s life and music.

 

Logo types may incorporate an icon which refers to a symbol without words that represents a specific brand. Symbol / brand-mark. For example the original Nike swoosh is one of the more famous icons which can stand in for the type logo in most applications.

A slogan is a short memorable phrase used in advertising to describe a company. For example Nike's "Just Do It" slogan is a quick, and memorable statement tied to the identity of the company.

Examples of logo type

The Citibank logo was created by Paula Scher. The new logo was part of a re-branding effort stemming from the merger of Travelers (red arc aka umbrella) and Citibank. The incorporation of the red arc reaching across the points of the lower case "i" characters is a simple and bold statement which the bank continues to use effectively as a global typographic logo.

Equalize logo for a company specializing in tutoring math to children. Notice how in this typographic logo the elements in text and graphics can be minimized to allow the viewers to participate in the completion of the pattern. The end result is a more interesting design that elevates meaning through closure, proximity, and color.

Tracey Associates logo. A company specializing in communications within the health industry. This is an interesting typographic logo which begins to create pictographic iconography to communicate meaning. Often logos will use Mnemonic devices such as pictographic elements to further establish meaning.

Here is another logo type for the Young Foundation. The designers at Pentagram utilized the Gestalt principle of similarity to render an iconic identity mark.

Below is a typographic logo exploration for Tiffany & Company. The bilateral structure and classic serif typeface taps into the tradition and authority of the brand.

This next example plays with similarity to convey a connection to the meaning of the root word echo, i.e. there is a visual echo of the three black character elements and the three red dots within the letter forms.

Here is a blunt and to the point logo type appropriate for the magazine cover masthead that it dominates.

Sometimes the logo type is incredibly simple and understated. Designers can approach logo types by leveraging the fundamental anatomy of type.

Below is a simple and effective typographic logo that plays with the elements of type and grid to visually ground the words together.

The Museum of Sex, in New York City has a bold and simply stated logo type which uses bold to convey meaning and visual punch.

And finally look at the Museum of Modern Art typographic logo redesign specification. It's painfully simple, but effective. Look at how it's application is incredibly flexible as it is integrated into the building architecture. Simple and bold.

Read more about this logo and how the museum approached a redesign this famous mark. This is an image file.
Also available in NYT archives - ART; The Modern's Other Renovation

Assignment

Evidence of a Crime

Back story:

There has been a sensational murder and your designed object was at the crime scene and is suspected of being the murder weapon.

Scenario:

You have been hired by a newspaper and an investigative reporter who is doing a story about this crime. S/he wants you to design an insert poster and map that will appear in the weekend edition of the newspaper along with the story about the crime.

Task:

Create a color two page design (minimum size 11x17 per page but any dimensions you wish beyond this)

The first page must have:

  • A typographic logo using a compelling title related to murder, crime, etc. Consider how to use type to convey the emotional tenor of the subject.
  • A visualization (photo, graphic, etc.) of the murder weapon (your designed object).

The second page must have a map:

  • I will leave this up to you to interpret. It may be a map of the scene of the crime, it may be a conceptual information map of the theory of the crime, it may be a map of how the designed object was used to murder the corpse. You decide.

Print out both pages in color, and bring them to class next week. There is no need to mount them.

Considerations:

Both pages of your design must work together using a grid system, a common visual language and type family(ies) and color palette.

When considering how to approach the insert poster and map, remember your gestalt principles. In the end this is about creating a visual narrative through type and image. So...don't just tell the reader, show the reader by considering every aspect of the visual system of the design. When in doubt go back to the basics of the Gestalt Principles.

Also consider cropping images, address negative and positive spatial relationships, composition, texture, scale, line, tone and form to clearly "show" how your map tells a story and communicates information effectively.

While you may use Lorem Ipsum www.lipsum.com for filler text, I would like you to consider real and compelling text for your headlines.

Example: Anatomy of a Murder, movie poster designed by Saul Bass

Museum exhibition poster about Saul Bass

Research

Reading

pp 72-78 and pp 112-113 Visual Explanations, by Edward Tufte, Graphics Press, 1997

 
 

Misc and Related Links

Crime related links

For links related to crime scenes, see links below.

Type Related
Misc.

 


Andrew Cornell Robinson acrStudio © 2007