Layout Design

About Layout

Layout is the management of form in space. In other words, layout is
how you will arrange your design elements, according to design
principles, into the limited space you have available on a page.

Visual and textual elements are the usual tools you use when creating layouts,
and their successful placement is the difference between an obscure
design with little communication and a striking, simple design that
communicates quickly and directly.

With a good layout, whether it is an article, cover, poster or web page, a
reader can navigate through complex information easily.

Layout is perhaps one of the most under-appreciated design talents. If done
badly, the best concepts, type treatments and images are wasted.
They’ll be overlooked at best, robbed of all their power at worst.

Layout and page design are one in the same (layout being the skill of a page
designer.) In this module and the next we will examine ways to layout a
variety of information on pages so that it is accessible, legible and
powerful.

To do this successfully you need to pull together all the elements and principles you have learned about so far
and to examine some of them in greater detail, namely: contrast, focal
points, emphasis and visual weight.

Visual Weight

To build effective visual hierarchies, we use visual relationships to add more or less visual weight
to page elements and thereby establish a pattern of movement through
the layout. Visual weight can be measured by the degree to which page
element demands our attention or keep our interest.

Visually dominant elements (those with the heaviest visual weight) get
noticed the most. They are the center of interest in a layout and they
determine where the story begins. The hierarchy of subsequent elements
guides our eyes through the rest of the composition, giving us pieces
of the story as we go. The relative position of each element in the
hierarchy provides valuable information about its importance to the big
picture.

Why Visual Hierarchy is Important

Without visual hierarchy, page elements compete for attention, and as a
result, none of them win. In all hierarchies only certain elements
should be on top; the rest need to follow suit. The appropriate
position of each element in the hierarchy depends on the message you
are trying to communicate. In a layout with an effective visual
hierarchy, the distinct visual weight of each element guides viewers
through the page in an informative and appropriate manner.

Visual Relationships

Whenever we attempt to make sense of information visually we first observe similarities and differences in what we are seeing. These relationships allow us to distinguish objects and give them meaning. For example:

• A difference in color implies two distinct objects (or different parts of the same object)
• A difference in scale suggests one object is further from us than the other
• A difference in texture (one is more blurry) enforces this idea
• …and so on

Once we have an understanding of the relationships between elements, we can
piece together the whole story and understand what we are seeing.

This process is accelerated by our ability to group information visually.
When we observe one blade of grass, nearby objects that share a similar
color, shape, size, and position are grouped together and given
meaning: a lawn. We don’t have to compare each blade to the others.

The principles of perception give us valuable insight into how we visually group information. For example:

• Objects near each other are grouped (proximity)
• Objects that share many visual characteristics are grouped (similarity).

Understanding the psychological manner in which we group visual information is not
enough if we want to be able to communicate a specific message. In
order to do that, we need to know how to use visual relationships to
our advantage; we need to know what makes things different.

Though lots of variations are possible, we can group distinct visual characteristics into five general categories:

• Color
• Texture
• Shape
• Direction
• Size

Introducing variations in one or all of these categories creates visual contrast.
The more contrast between two objects, the more likely they will be
perceived as distinct and unrelated.

Contrast

Contrast between elements within the layout
space is achieved by carefully considering their visual properties.
Important contrasts used to create hierarchical arrangements include:

• Position:
  because we read English from left to right and we begin to read at the
  top of a page, we naturally tend to move our eyes the same way when
  looking at a design. So by default, all things being equal, the upper
  left corner is where reading will commence, and where a viewer’s eye
  will enter the composition.
• Size: we tend to look at bigger things first and smaller things last.
• Color: we tend to be attracted to brighter colors but also to look at the
  color that stands out or is different from the surrounding colors.
• Value: a gradation of values, moving from high contrast to low contrast, can establish a flow from one element to the next.
• Visual weight: we tend to look at “heavier” elements first.
• Spatial interval: Items in isolation stand out more than those seen in a crowded field.

How Do You Develop a Strong Visual Hierarchy?

Establishing a visual hierarchy is directly related to establishing a point of focus. Then it goes beyond a focal point to establish a priority order of all the information in a work.

John Rea, Vice President and Creative Director at McCann Erikson,
New York, calls these questions the “ABC’s” of visual hierarchy.
Answering these questions, if you have not done so already, is the
first step in finding your concept or visual story, and that leads
directly to your hierarchy. Like this:

1. Where do you look first?
2. Where to you look second?
3. Where do you look third?

Emphasis

Emphasis is the most important principle for the graphic designer.
All the elements and principles are used interchangeably to create good
design, but it is the use of proper emphasis that makes or breaks a
design as a communication tool.

Communicating the Message

The graphic designer must establish what message is to be communicated. In
communicating the message the decision has to be made as to whether the
emphasis will be placed on the visual, the word, or on both. It is
often the concept that will determine what is to receive the emphasis –
and/or become the focal point.

The graphic designer may often be working with multiple focal points, as follows:

• The headline may be the first item seen.
• Then there may be other focal points within the overall design—like a visual of some kind.
• There may be another focus within that visual.
• Each other visual (photograph or illustration) may have its own focal point also.
• At other times the focal point may be a single visual which is the strongest element on the page.

The decision as to what to emphasize is made after carefully considering
the intention of the design, and after thoughtful experimentation of a
variety of ways to achieve the desired effect through a series of
thumbnails and refinements.

As a rule, the emphasized elements of a design create visual dominance, whereas the
less contrasting ones are secondary. Because heavy-handed use of
emphasis will tire the viewer, care must be exercised to create a
varied view that will on one hand keep the viewer interested, while on
the other hand achieve the desired impact.

In some repeating patterns no one shape dominates the others and the
eye is influenced by the play of all the shapes against space. This can
have a pleasing effect, but a design which uses too many different
elements, all of equal weight, can confuse the viewer and be tiring to
look at. When differences are introduced, a part or parts of the visual
field emerge, and become more visible than others.

Ways to Create Emphasis

Once you have decided on the message, there are a number of ways to create emphasis:

Contrast

Contrast is one of the simplest ways to achieve emphasis.

• Areas of greatest contrast will often be the center of interest.
• Larger areas of either strong light or dark values will dominate the rest of the picture surface.
• When dark is emphasized, it often creates a mood of heaviness, mystery, gloom or apprehension.
• Emphasis on light or bright elements will be the opposite.

Look at designs that you feel are not working. What do you see wrong with
them? Many times there is simply insufficient contrast.

Simplified Background

Emphasis is more effective when the background is less important than the main subject matter.

Isolation of Subject Matter

When the focal point is set
apart either from the background or from the other elements in the
design, it will have a strong visual impact. This might be achieved
with a simple element against a complex background, or the opposite; or
a careful and strategic placement of the dominant element.

The Unusual or Unexpected

The eyes of the viewer will be automatically attracted by the interruption
of a normal frame of reference, the breaking of a natural rhythm, the
creation of a sense of disorganization, or the presentation of
something totally unexpected. This can be visually exciting, pleasing,
fascinating, disturbing or even upsetting. A focal point established in
this manner can be so riveting that the viewer has trouble looking
away. However, placement is still of major importance, as is size, and
the relationship of the distorted or unexpected element to the rest of
the layout.

Proportion, Size, Repetition and Number

Emphasis can be achieved by increasing the proportion of one element to another.
When there is more light than dark, dark than light, rough than smooth,
and so forth the eye is drawn to the stronger emphasis.

Usually, larger elements command attention if they are within an environment in
which the other elements are of equal size. However, larger does not
always mean dominant. One small element that appears unusual among many
larger ones will often draw the eye first.

When there is a large number of one element (usually in some form of
repetition), emphasis is created simply because a concept is
reinforced. For example, a number of people on a street create an
emphasis of a crowd.

Movement and Lines

By creating eye movement through the use of strategically placed lines, a focal point can be easily established.

The lines will direct the viewer where the designer wishes. Where the lines
stop, the eye stops. Converging lines are the simplest way to achieve
this, but other less obvious and subtler methods can be used.

By arranging shapes, lines, colors, values, or edges in a manner that
creates a path--either obvious or implied--the eye can be drawn to a
center of attention. You can also use an outline, or by frame the
material or shape in some other way.

There are times when no emphasis is wanted. The elements balance
equally against each other and within the space around them. However,
placing the focal point in the center can create an effect so
dominating that the viewer will ignore all other parts of the design.

In a design that has many things going on, some elements may naturally
have more stress than others. Visual importance is then controlled
through the use of selective stress. Since the eye is attracted by the
emphasized part or parts of a design, the designer selects the
passages, shapes, or lines to be given importance. The designer will
position the elements so that the eye of the viewer moves through the
design, pauses, and then moves on again.

A viewer focuses on the different parts of a design in order of their emphasis, or
importance. This becomes the visual path (or hierarchy) of the design.
When all the elements work together to produce emphasis, a sense of
harmony and unity is achieved.

The designer must decide what to emphasize, how to achieve the correct focal point, how much to
emphasize, and where to place the emphasis. Unless the designer is
working within a controlled format, most placement for emphasis is
based on the designer’s intuition and understanding of the principles
of design.

Emphasis can also be achieved when many shapes
are grouped together and are seen as one because of their nearness to
each other. They appear as a single subject because of their immediate
and intense interaction. The closer the forms are to each other, the
stronger their attraction to each other as a single visual message.

The Basic Principles of Page Layout

At this point in the module we’ll move to the principles of layout. The
process of layout starts with the practical and aesthetic
considerations of the job. Consider how, where and why your content
will be viewed when creating your layout. Are you designing a web page,
product packaging or a poster?

Layout means more than arrangement on a page. It means arrangement of the
page—in other words, making the page an integral part of the message.
It means uniting disparate design elements into a whole that’s greater
than the parts.” —Gail Deibler

Page design and layout also calls for sensitivity to proportion: the
organization of several things into a relationship of size, quantity,
or degree. In fact, layout may be the most difficult balancing act a
designer is ever called upon to perform.

Goals of Page Layout

One of the first goals of any kind
of layout is to attract the eye. The layout, first and foremost, must
provide visual stimulation to draw viewers into your design. Drawing
viewers is also crucial in their absorption of information. With
curiosity aroused and an inviting design, readers are better able to
engage their minds and begin the process of absorbing information.

Good design reduces the effort of reading as much as possible, thereby
encouraging readership and understanding. Good design means considering
carefully how you use the following:

Shape and Image

You can work with geometric or organic shapes, but usually you’ll use both.
The shapes you use will range from freeform to rectangular. They can be
photographs, illustrations, charts, supplemental elements, or images.
The format, size, and value contrast of the typographical elements must
be closely related to accompanying photographs and illustrations.

Text

When text is included in a layout, it has to communicate clearly, regardless
of the other elements on the page. You need to set up visual paths
within the text itself. What are the most important words, the second
in importance, the third, and so on? In addition, the hierarchy of the
words has to fit within, and interact with, the hierarchy of the rest
of the page.

Contrast (Again)

Don’t forget contrast and emphasis. Everything you have learned so far about unity
and contrast applies here. Using contrast is the best way to establish
emphasis. Look at designs that you feel are not working. What do you
see wrong with them? Many times there is simply insufficient contrast.

Visual Hierarchy

In layout you now have full pages to deal with and the visual path you set
up determines how the information on each page is comprehended. When
developing a layout, it is important that we look at both the writing
and visual hierarchies to make sure the two of them are working
together and not conflicting with each other.

The hierarchy also relates to a sense of movement. When you have multiple pages in a
single document (like a brochure), there also needs to be a flow from
page to page; the entire piece needs to have a hierarchy. You’ll also
want to have some form of movement within each spread.

Figure/Ground

A good relationship between figure and ground is essential in page
design. The careful shaping of the negative space of the page gives
cohesion and unity to the figures or elements placed upon it. There
should be no “leftover” space that is unshaped or un-designed. Open
negative space functions as an active, participating part of the whole
design.

Space and Negative Space

As you begin to work on full-page surfaces, there are a number of
space issues to consider. Everything that you put on a page plays a
part in the overall balance of the composition and ultimately in how
well (or not well) the information is communicated.

Negative and Positive Space

Unlike a poster, which works best if simple and bold, page design often
contains large amounts of information, which usually are to be seen up
close. The ways you both organize the information and design the
page(s) are the main considerations of page layout.

Single pages can be laid out with or without the use of a grid. If you are
designing something that is one of a kind, a grid may not be necessary.
But as soon as you need to develop a “look” or style, or a sequence, or
any other type of series where consecutive pages or pieces need to be
visually tied together, a grid is necessary.

Positive and Negative Space

To repeat the definition of positive and negative space: positive space is
occupied space and negative space is unoccupied space. Either can be
white or black. You can have a black positive space (or shape) on white
negative space (the background) or the reverse. The negative space in
your layout is the context in which your other design elements will be
perceived. It is the physical environment that houses the forms in your
image.

It is critical that you see and understand negative space in your layouts. All negative space should be active,
meaning that the shape of the empty space has been planned. Active
space in a design is what makes some designs seem pleasing to the eye
and others not.

An unwritten rule in graphic design is to concentrate on the negative space first.
If you arrange the negative space well, the positive elements of the
page will look great, but if you only concentrate on the positive
elements of the design, your forms, the negative space will almost
necessarily be ineffective.

Designers call this “working the space.”

As usual, you should begin with thumbnails, using rough key lines to
establish perimeters. As you quickly jot down your ideas, you will find
yourself becoming more and more aware of space and how you use it. This
is good. Train yourself to look at the space first until you really see it as a vital part of your layout.

Typographical Rules

Your Type Must Always Be Perfect. No Exceptions.Typography communicates. Yet typesetting is often poorly done. It is
absolutely essential that, as a designer, you start setting type in a
professional manner. Attention must be paid to all the typography you
produce. No matter where it is or what it’s for. Period.

About Typos

You should always double, triple and quadruple your work for any small typographic, grammatical, or spelling errors.

Why?
Think about it. As an engineer, if you're tasked to design a fix for a
faulty bridge, you need to instill confidence in your client and the
public that you're up to the task. Making a simple math-error on the
initial proposal does nothing to instill this confidence--and will
likely strike you from the list of finalists. How can I trust a bridge
design to an engineer who can't do simple math (or who can't double
check their figures)?

Or even more simply:

• How can you trust a car mechanic who drives a stuttering car?
• How can you trust an obese personal trainer?
• How can you trust an environmentalist who drives a Hummer?

Apply this to design:

• How can I trust the future of my brand to someone who can't spell or proof
  his or her work? Or know the difference between hyphens and en-dashes?

Typographic nuances are the “math” of our profession. Complete and flawless
communication is the “CAD-drawing” for the aforementioned bridge
design. While we all make mistakes, we're in the business (here at AAU)
of prepping you for the real world. It is easier to have always used
the proper techniques than it is to try and correct your bad habits at
a later date, so start right, and do it now.

You will be studying typography for as long as you are a student, and probably for
the rest of your career. The variations are enormous, the possibilities
endless. This can be overwhelming for the beginner.

Using Type

Unless otherwise indicated the following excerpts are from an excellent book that is not on your required list. It is called Type Rules: The Designer’s Guide to Professional Typography.
It is written by Ilene Strizver, a typographic consultant, designer and
writer specializing in all aspects of typographic communication, from
the aesthetic to the technical. The information from this easy-to-read
book will give you a good grounding in the way you look at and use
typography to communicate your messages.

Every typeface has a personality, and the ability to convey different
feelings and moods, some more than others. Display typefaces, also
known as headline typefaces, tend to be stronger in personality,
sometimes trading legibility at smaller sizes for more powerful
feelings. They can evoke strength, elegance, agitation, silliness,
friendliness, scariness, and other moods. Text designs, often used for
blocks of copy, are subtler in mood and emphasize legibility and
readability. Their personalities tend to be whispered, rather than
shouted.

Design Goals

The first step in selecting a typeface is identifying goals. To focus your
design goals and subsequently the appropriate typefaces to use, start
by identifying the age, attention span and demographics of your
audience. Different typefaces attract a different audience, both
subliminally and overtly. Children are drawn to easy-to-read, childlike
fonts; seniors to larger settings that have more clarity and
legibility; teens to more edgy, expressive designs.

After you consider your audience, ask yourself how much reading you are
asking them to do, and what information you are expecting them to
absorb. Once you identify your design goals, you will narrow down your
typeface choices considerably.

Legibility and Readability

One often hears type described as being legible or readable.
Although they both relate to the ease and clarity with which one reads
type, each actually refers to two different things: legibility refers
to the actual typeface, while readability refers to typography, or how
the typeface is set.

Legibility

The legibility of a typeface is related to the characteristics inherent in its design including:

• The size of its counters
• X-height
• Character shapes
• Stroke contrast
• Serifs or lack thereof
• Weight

All these factors relate to the ability to distinguish one letter from another.

Readability

Readability is related to how you arrange the type. Factors affecting type’s readability include:

• Size
• Leading
• Line length
• Alignment
• Letter spacing
• Word spacing

It follows that a legible typeface can be made unreadable by how it is
set, while a typeface with poor legibility can be made more readable
with these same considerations.

Text vs. Display Type

There are two main categories of type: text and display.

Text type is designed to be legible and readable at small sizes. This usually
implies fairly clean, consistent, uncomplicated design features; more
open spacing than a display face, and thin strokes that hold up at
smaller sizes. Display type, on the other hand, can forgo the extreme
legibility and readability needed for long blocks of text at small
sizes for a stronger personality, elaborate and more expressive shapes,
or a more stylish look.

Display type is usually above 14 points in size and is used for titles, subtitles,
headlines, and sub-headlines. It is ideal when strong contrast is
needed, or for posters, signs and other designs that need to be seen
from a distance.

The following description and examples are from Working with Style: Traditional and Modern Approaches to Layout and Typography by Suzanne West:

Display type automatically creates contrast and emphasis on the page through
changes in size, shape, capitalization, leading, and kerning . . .
Display type and layout are interdependent. We can begin a layout by
[positioning] display type and then fitting the other elements on the
page; or, we can arrange other elements and then fit the display type
into the remaining space. The procedure we choose will depend on what
the other elements are and whether or not the page is part of a
sequence of pages, as in a book or brochure. If this is the case, a
single strategy must be determined and used consistently.

Type Families

Type families are usually text or text/display families with
corresponding sans, serif, and sometimes informal or script versions.
They usually have the same structure but with different finishing
details, enabling them to work well together.

This is a safe yet effective way to mix typefaces while keeping your job looking clean
and not over-designed. Type families have even more mileage if they are
available with small caps, which give you another option to create
emphasis without jarring the reader and disturbing the flow.

Visual Hierarchy

The Visual Hierarchy of a design is the process of deciding which
elements are the most important and finding a way to suggest that
importance visually. To do this you will need to ask yourself: which
graphic elements support your concept? How you can use them to create a
visual structure from most to least important?

The visual hierarchy of a design is not about the personality or emotional
impact of your work, rather the visual hierarchy is a more technical
term that refers to the importance of information elements within your
design.

A visual hierarchy is an arrangement of elements in a graduated series, from the most prominent
to the least prominent, in an area of typographic space. When
establishing a visual hierarchy, a designer carefully considers the
relative importance of each element in the message, the nature of the
reader, (who the audience is), the environment where the communication
will be seen, and the need to develop a cohesive arrangement of forms
within the typographic space (a layout that puts everything into an
order than can be easily understood).

The study of visual hierarchy is the study of the relationships of each
part to the other parts and the whole. When elements have similar
characteristics, they have equality in the visual hierarchy, but when
they have contrasting characteristics, their differences enable them to
take dominant and subordinate positions in the composition.

You can also think about the visual hierarchy of your design by
imagining you are telling a story. Elements within a “visual narrative”
are arranged in an easily understood order of importance, or a story
for the viewer’s eye to follow. A center of attention attracts the
viewer’s attention, and each subsequent focal point adds to the story.
This logical ordering is known as a visual hierarchy.

It’s especially important to establish good visual hierarchy with type,
unless you communicate very clearly where to start, and where to go
next, the reader will not be able to make sense of the text.

Basic Techniques for Typographic Emphasis

Many typographic techniques have evolved over the years, and vary
from designer to designer and sometimes from country to country. Use
them sparingly at first until you become comfortable. If you place too
many emphasizing techniques in too many places, it will defeat the
purpose of making certain elements stand out from the rest and dilute
the overall effectiveness of your message--making for a visually busy
piece.

Italics (Obliques)

The use of italics is probably the most common form of typographic emphasis and is used in both text and display settings. True-drawn italics are an angled typeface, most commonly designed as a companion to a Roman (straight up and down) design. Obliques are slanted versions of their Roman companion with few or no design changes.

Italics are effectively used for soft emphasis of words or phrases within a
headline or text. They draw the reader’s attention without a
significant change in the color of the text. Italics are also used
instead of quotations for book and magazine titles. Be sure to use the
same weight italic as the Roman you are using and not the next weight
up.

Boldface (or Weight Contrast)

The use of boldface,or a bold version of a lighter weight, is a good way to achieve
emphasis by way of weight contrast. It is best used for subheads,
captions and stand-alone words and phrases. It should be used sparingly
within text and only in particular instances where a strong emphasis is
desired because it creates a somewhat harsh visual interruption in the
color or tone.

Jump at least two weights to create a strong contrast when using boldface from a family of several weights. A
too-small weight contrast at the same point size is at best ineffective
and at worst, amateurish typography.

Selecting the Right Version on Your Computer

Obliques and italics and bold should be accessed from your font menu only. This
means you have to have the appropriate version of the font (bold,
italic etc.). Computer generated italics are digital monstrosities
which must be avoided at all costs. This process distorts character
shapes in a way that degrades the design and metrics of the typeface
and is annoying to the eye. True-drawn italics are usually a completely
different design, and true-drawn obliques are adjusted for any
distortion.

Underscores

Underscores are a poor typographic method to achieve emphasis and should seldom be used. Most underscores cannot be adjusted for weight and position and usually crash through
the descenders.

There are exceptions to these rules as
there are to any rules. Some designers will use underscores as a
conscious design element. In fact, sometimes the underscore is
exaggerated and extended underneath lines of copy, or actually runs
through it to achieve a particular look. If this is the effect you are
going for, of course go ahead and experiment, but it then becomes part
of the style and personality of your design, and not a tool for
emphasis within text.

Point Size

Varying the point size of your type for
emphasis is a technique that should be used sparingly, particularly
within text. It is best reserved for subheads and other stand-alone
phrases and should not be used within text unless an extreme emphasis
is desired as it disturbs the color, texture and flow.

Indents

An indent is the space inserted before the
first word of a new paragraph. It is a graphic element used to create a
visual separation of thoughts in text. It should be neither too small
nor too deep but proportional to the size of your type as well as the
width of the column.

First Line Indent

This is when just the first line of a paragraph is indented. It is the most
common kind of indent but not the only kind. When making traditional
indents, set your tabs manually according to what looks good to you;
don’t rely on the default tabs of your software to dictate style and
taste.

Extreme Indent

You will occasionally see the first two or three lines being indented, sometimes to a depth of half the column width.

Hanging Indent

This is actually the opposite of an indent in that the first line hangs out to the left of the paragraph into the margin.

Line Space Instead of Indent

The technique of separating paragraphs with an extra line space instead of an indent is
often used in correspondence as well as long blocks of text. It adds
white space and a more open look when saving space is not a
consideration.

Type Size

Deciding what size to set your type is a visual skill, but there are
some guidelines that can help you make that decision intellectually.
Let’s talk about text settings first.

Body Text

The primary consideration when setting body text is usually readability.
Assuming you select a font that was designed and intended for smaller
settings, the average range for text settings is somewhere between 8
point and 11 pt. Anything smaller becomes hard to read in longer
settings. Much larger, and it becomes a strain on the eyes for any
length of copy.

The size you select is somewhat dependent on the typeface design, as
the actual cap sizes and X-heights vary from font to font. Length of
text should also be considered, as well as any constraints on the
column width such as a pre-existing grid.

Display Text

Display, or headline, type is primarily meant to catch the eye and draw the
reader into the text. For this reason, there are fewer, if any,
constraints on size. Whatever works with your layout is probably fine,
meaning, try different sizes and see what looks best, and what balances
and complements the rest of your layout.

Line Length

Line length and point size are
interrelated, as line length should be somewhat determined by the point
size for maximum readability: the larger the point size, the longer the
line length. A general guide is to have somewhere between 50 to 70
characters per line, but there are many exceptions to this rule.

Leading (Line Spacing)

Line spacing refers to the vertical space between lines of type from
baseline to baseline, and is usually measured in points. Leading that
is too tight makes your type harder to read, especially in small sizes.
Most design programs have a default setting, called auto leading, which
is around 20 percent of the point size, however this is not always the
best setting to start with.

A basic guideline for text would be a minimum of 2 points leading--such
as 12/14 (or 12-point type with 14-point leading) up to 6 points (such
as 12/18). Display type can have less leading in general since as type
gets larger, the negative spaces associated with line spacing (and
letter spacing) appear progressively too large.

When setting all caps, throw these rules out the window; all caps can be set
with little or no leading (also referred to as set solid) and sometimes
negative leading, depending on the look you are after. Without
descending characters to worry about, all caps beg to be set tighter
than cap/lowercase setting.

Aligning Text

The following styles can be used to align type.

Flush left
is the most common setting for Latin alphabets such as ours (and
usually the default setting). It is the style we find readable and
which our eyes are used to. It aligns the text on the left margin, and
leaves the right margin to end wherever it may, dependent on line width.

Flush right aligns the text on the right with a ragged
left margin, but it is harder to read since our eyes have to follow a
wavering left-hand margin when they move to the next line down the
column.

Justified inserts space between words and sometimes letters to stretch
a line so that both margins align. This creates a geometric block of
copy that is sometimes desirable. Although commonly used (most
newspapers use it), this is a tricky technique to apply tastefully if
you do not take the time to fine-tune.

In some cases of justified text (dependent on your software and the
settings in your preferences), the actual characters are compressed or
expanded electronically to achieve this alignment.

Justified settings can also create rivers of white space, which should be avoided at any cost.

In order to avoid some of the problems inherent in justified
settings, try making your line length a bit longer than usual, or make
your type smaller.

The more words you can fit on a line, the less space you will have to add to justify the line. Once you’ve
settled on an optimum size and width, it might be necessary to edit
your copy to fix lines that are too open or too tight, or that have too
many hyphenated endings, particularly if there are more than two of
these lines in a row. This can be a lot of work, especially if you have
to go back to your copywriter to do it, but it will make for a more
professional looking job.

Centered type can be effective when used for short blocks of copy, such as headlines,
subheads, invitations, announcements and poetry. It centers the lines
of type without adding extra space, making a ragged right and left
edge.

Wrap-around type (run around or text wrap). This is type that aligns around the contour
of an illustration, photo or other graphic element. It can be applied
to either the right, left or both margins.

A Few Words about Rags

When setting type with a ragged margin (flush left or flush right),
learn to become aware of the shape that the ragged line endings are
making. A good rag goes in and out in small increments. A poor rag is
one that makes unnatural shapes with the white space. When this occurs,
make manual line breaks or edit your copy to improve the rag.

When setting type flush left be aware of the shape that the ragged line
endings are making. A good rag goes in and out in small increments. A
poor (bad) rag like the example on the left makes unnatural shapes with
the white space.

Widows and Orphans

A widow is a very short line,
usually one or two words, at the end of a paragraph. This is
typographically undesirable, as it is disturbing to the eye and creates
the appearance of too much white space between paragraphs or at the
bottom of a page. It is considered poor typography, so adjust it by
re-breaking the rag or editing the copy.

An orphan is related to a widow in that it is a
single word or very short line appearing at the beginning of a column
or a page. This terminology is not as commonly used and understood as a
widow, but the concept is the same, and so is the solution: fix it.

Scaling

Artificially stretching (or compressing) type is the number one desktop publishing type crime and should not be employed at any time.

Kerning

Kerning is the adjustment of the space between two specific
characters. It most commonly refers to a reduction of space, but it can
refer to adding space as well. This is done to balance the white space
between certain letter combinations in order to create an even color
and texture, as well as to optimize readability.

The object of proper letter fit (and the goal of kerning) is to achieve
even texture and color balance between characters, which leads to a
consistent overall texture.

Tracking or Letter Spacing

Tracking is the addition or reduction of the overall letter spacing in a selected block of text.
In most page-layout programs, it can be applied in small increments.

The term “letter-spacing” can also refer to the popular style of setting
very open type for stylistic and design purposes. This technique is
most effectively used with all-cap settings that don’t depend on their
letter shapes to be recognized. Unfortunately it is commonly misused
and abused. When it is used it should be limited to a few words or
small amounts of copy, as it definitely reduces readability.

Word Spacing

The amount of space between words is called word spacing, naturally. The
word spacing should not be so little that the words start to run into
each other and not so much that your eye has trouble reading groups of
words because large white blocks interrupt you.

Sentence Spacing

There is never a need for double
spaces between sentences when setting type on your computer, as was
done when using a typewriter. Many people still use double spacing on a
computer and don’t know it is incorrect typography. Be particularly
aware of this in copy that is given to you by others who are used to
typewriter formatting. An easy way to fix these double spaces is to use
the search-and-replace feature of your word-processing or design
program so you can catch them all. Search for a period followed by two
spaces and replace it with a period followed by a single space.

Type Dos and Don’ts

Here are some suggestions to consider when using a typeface:

• Do start with a few basic typefaces and type families,
  and learn how to use them well. Consider them the backbone of your
  typographic wardrobe—then you can add to them to fit more specific
  occasions. Many excellent designers use the same menu of typefaces for
  most of their jobs, and used appropriately, they always manage to look
  fresh.
• Don’t distort your type with
  the features available in your page-layout program. Type that has been
  electronically expanded, slanted, emboldened and condensed looks very
  amateurish and is annoying to the eye.
• Do leave white space.
  That old adage “less is more” often applies to type. No need to fill up
  every square inch of space--in fact, white space can create drama and
  emphasize the type.
• Don’t tint type with delicate thins. It might break up when printed.
• Do consider production issues when selecting text type. For instance, when going very small, watch out for disappearing thin strokes, especially when printed.
• Don’t go too big when setting text; smaller with more leading is often more readable than a larger setting with tight leading.
• Do consider how your type will look at the size you are planning to use it.
  For instance, when using a thick/thin script (or any high-contrast
  typeface) for a headline, make sure it doesn’t look too clunky at large
  sizes. What looks great at 18 point might look heavy and lose its
  elegance at 96 point.
• Don’t set to fit.
  Decide on a point size that looks and reads the best, and adjust
  leading and line width (or the length of your copy if possible)
  accordingly.
• Don’t let the way a
  typeface looks on a laser (or ink-jet) proof be the deciding factor in
  your selection, as it can look much heavier than the actual printed
  piece.

Mixing It Up

How can you mix type effectively? When choosing a typeface outside the primary
family you are using, there are three things to remember: contrast,
contrast and contrast.

A common mistake is to use two or more faces that are too close in style, making the change too subtle to
serve the purpose at hand, yet creating a disturbance that detracts
from the cohesiveness of your design. Combine typefaces when you want
to emphasize or separate a thought, phrase or text visually.

These basic principles should keep you on the right track:

• Serif vs. Sans:
  A good rule of thumb when combining type is to mix a serif and a
  sans-serif. There are usually strong design differences between them
  (unless they are part of a type family) that can achieve the contrast
  you are looking for.
• Light vs. Heavy:
  Using a heavier (or lighter) weight typeface creates a strong visual
  contrast. This technique is often used for subheads; using a heavy
  sans, perhaps all caps, within a body of serif text does the trick
  well. Note: Make sure you go heavy enough because
  using the next weight up (e.g., book to medium) often results in a weak
  visual transition.
• Large vs. Small:
  A good place to change fonts is when type changes size, such as from
  headline to subhead or text. The distinction will be emphasized that
  much more.
• Wide vs. Narrow (or Regular vs. Condensed):
  An expanded headline font above an average-width body text, or a logo
  split in two using this technique can create powerful contrast.
• Cap vs. Lowercase:
  Another way to get more mileage out of changing fonts is to use all
  caps for one of the settings, particularly if it is short; but stay
  away from setting lengthy text in all caps, as it dramatically reduces
  readability. We read words by their shapes, not by individual letters,
  and all-cap settings eliminate the information (ascenders and
  descenders) our brains need to read most easily.

Creative Process and Peer Critique

The Creative Process

It’s worthwhile exploring every creative process you come across that interests you. By trying
different ways of working through a creative problem you can take the
parts that work for you best and, in turn, construct a reliable
creative process of your own--one that will give you consistent results
on a daily basis. This is something, by the way, that every employer
and client will expect from you.

The creative process varies for every designer, of course. Presented
in this module is a process that offers something for everybody. This
process differs from that of “soak/rinse/spin” idea from Tolleson
Design.

This process consists instead of 7 steps:

• Step 1: Gather the Material
• Step 2: Define the Problem
• Step 3: Attempt to Solve the Problem/First Ideas
• Step 4: Get Away!
• Step 5: Let the Ideas Flow
• Step 6: Select and Refine the Best Ideas
• Step 7: Produce to the Appropriate Level

Step 1: Gather the Materials

Let's say you have a client and they call you up and say:

"We have a new project for you. We need you to design a poster for us."

You answer, "Great! I love designing posters."

They say: "Do you think you could work up some rough ideas by next week?"

"Sure," you say. "No problem!"

"OK, we'll see you next Wednesday afternoon. Good-bye." And they hang up.

Do you have any idea what to do? What is the poster about? How can you design something without knowing what it is?

You need to gather as much information as possible. You have to ask
lots of questions, do lots of research, take lots of notes, make
sketches, take photographs, whatever works best for you. This is not
the time to be shy—don’t be afraid to ask for what you need in the way
of information, advice or assistance.

It also helps to know as much as you can about your client: who they are, what they do,
and how their market or audience perceives them. Check out what the
competition is doing. Be aware of any trends or attitudes that might be
important.

You still need to know what you are going to do. Step 2 is where we set goals for the project.

Step 2: Define the Problem

If you don't define the problem, you're faced with an infinite number of directions, so it

Work by hand in this phase.

These are your first ideas, sketches and thumbnails. You are not going to solve the problem yet.
You do need to play with ideas, and let your creativity have a safe and
open place to pollinate. You should do this for every project you ever
work on.

Step 3 is about really letting go. Some of the greatest and most creative campaigns started with unrealistic and crazy ideas.

If you only let yourself think average thoughts, then your work will turn
out will be average. If you want to be a top designer, a trendsetter,
then it is absolutely essential that you allow your mind to think wild
and crazy thoughts!

Stay alert to whether you are limiting yourself with any of the following:

• By habitual behavior: telling yourself you can’t, or won’t, do the work
• By limiting your time or energy
• By not providing yourself with an environment in which you can work productively
• With attitude(s) that get in your way
• With a need to reach an instant solution
• Because you are missing information
• A fear of criticism or failure
• Difficulty in recognizing problems

Put down everything that comes to mind—everything!
This could be thumbnails, sketches, words, whatever works for you.
Brainstorm, alone or with others. Originality results from being
adventurous and taking the risk of saying or putting down whatever idea
enters your mind, no matter how wild or silly it seems.

Few people take the time for Step 4. However, that doesn’t stop it from being a critical step in the creative process.

It is important to set goals for any project you work on this early in the
process. Defining the problem gives you a focus and allows you to see a
workable solution.

We use the word problem (rather than project) so you will look at this as something to solve. As graphic
designers we always have to produce good-looking compositions, but we
also have to communicate to the market, the audience and the client.
This means we don't always get to produce the designs we want to
produce. Rather we have to make sure that what we design addresses the
issue it is meant to be about. Seeing what you are trying to do as a
problem to be solved makes it more interesting, the results become more
rewarding and it is easier to work through the visual issues and
communication issues.

You need to establish what is to be produced: a specific item or service, a new approach to something, a
specific art/design/product/item etc. You need to define all the other
important elements such as time schedules, budgets, and more.

These two steps are interactive. You need to get information to begin, but
often when you start to define your goals you find you need more
information, and when you get more information it may change the way
you define your goals, starting the process over.

Make sure you are confident in your information from Step 2 before proceeding to Step 3.

Step 3: Attempt to Solve the Problem/First Ideas

Work by hand in this phase.

These are your first ideas, sketches and thumbnails. You are not going to solve the problem yet.
You do need to play with ideas, and let your creativity have a safe and
open place to pollinate. You should do this for every project you ever
work on.

Step 3 is about really letting go. Some of the greatest and most creative campaigns started with unrealistic and crazy ideas.

If you only let yourself think average thoughts, then your work will turn
out will be average. If you want to be a top designer, a trendsetter,
then it is absolutely essential that you allow your mind to think wild
and crazy thoughts!

Stay alert to whether you are limiting yourself with any of the following:

• By habitual behavior: telling yourself you can’t, or won’t, do the work
• By limiting your time or energy
• By not providing yourself with an environment in which you can work productively
• With attitude(s) that get in your way
• With a need to reach an instant solution
• Because you are missing information
• A fear of criticism or failure
• Difficulty in recognizing problems

Put down everything that comes to mind—everything!
This could be thumbnails, sketches, words, whatever works for you.
Brainstorm, alone or with others. Originality results from being
adventurous and taking the risk of saying or putting down whatever idea
enters your mind, no matter how wild or silly it seems.

Few people take the time for Step 4. However, that doesn’t stop it from being a critical step in the creative process.

Step 4: Get Away!

At some point you need to get away from your work so your
subconscious can take over. This is when the real creative ideas will
begin to show up, and they will appear when you least expect them.

Have you ever gotten a great idea in a dream, or while you were thinking
about or doing something entirely different? You need to trust your
subconscious mind, let it come up with answers for you.

It is essential that you get away for a while, if only for a few moments.
In a classroom or work environment this often means about ten or
fifteen minutes. So here is the secret.

Do not think about the problem or project while you are away from it. No matter how long or short the break is. Talk to someone. Listen to music. Read a book. Go for a cup of coffee. Do anything to take your mind off of what you were doing.

After you return from your time away, you are ready for Step 5.

Step 5: Let the Ideas Flow

With a clear mind, just record what bubbles up from your
subconscious. The creative process uses all the parts of your mind. You
have analyzed the problem in the first steps. Now it is time to let
your imaginative mind provide solutions.

This could be an extension of a previous idea, or a completely new idea.

No Ideas?

What happens if you come back and you look at what you have and you don't
like anything? What if you have no new ideas? What do you do? Are you
blocked? Is something unresolved?

Look at the steps you have taken so far:

• Step 1: Gather the Material
• Step 2: Define the Problem
• Step 3: Attempt to Solve the Problem/First Ideas
• Step 4: Get Away!
• Step 5: Let the Ideas Flow

Here are some suggestions if you are stuck:

• Maybe you need more information. Sometimes asking just one more question brings up a while bunch of new ideas: Go back to Step 1.
• Maybe you need to look at how you defined the situation. Maybe your goals are not working: Go back to Step 2.
• Maybe you need to go back into the free and open areas of step three and simply let your mind play with more ideas: Go back to Step 3.
• If you do this then don't forget to take a break before you move on . . . Step 4!

You may have to start over, or go back and retrace all your steps from your
initial research. You can go back as many times as you need to. In
fact, this is a dynamic process which allows you to use whatever step
you need, as many times as you need to use it.

Once you have many ideas, layouts or designs, you come to the point where you have to
look at everything and decide which ones are the best. In Step 6 we’ll look at how to make this selection.

Step 6: Select and Refine the Best Ideas

Now is the time to take on the role of editor and eliminate the
ideas and designs that do not meet your standards, are not realistic or
practical to produce, do not communicate the message(s) or do not
provide workable solutions to the problem.

The more concepts and designs you have, the more you have to choose from.
Students always ask me "How many thumbnails should I do?" The answer is
(unless specified otherwise within a project): "As many as you need to!"

Step 7: Produce to the Appropriate Level

Step 7 now becomes a production issue. You are no longer creating in
the sense we have discussed in the Creative Process until now. You may
be taking your thumbnails and preparing them on the computer in a tight
and precise form to present; you may be preparing, outputting and
mounting your final comps for presentation; or you may be preparing
your files for the printer who is going to produce your work in
quantity to be distributed.

So there you have it. I think you will be surprised at how much easier a project can go from start to
finish when you take it step by step and have the option of repeating
any step(s) that you need to.

Right and Left Brain Thinking

At this point it’s helpful for us to look at how the human brain works. You may be familiar with
the concept of right- and left-brain thinking. In this theory, it has
been determined that:

Given this, we can look at the creative process from an additional
viewpoint. Here’s how the two sides of your brain use the creative
process we have been examining:

• Step 1: (Left Brain) Gather the Material
• Step 2: (Left Brain) Define the Problem
• Step 3: (Right Brain) Attempt to Solve The Problem/First Ideas
• Step 4: (Right and Left Brains) Get Away!
• Step 5: (Right Brain) Let the Ideas Flow
• Step 6: (Left Brain) Select and Refine the Best Ideas
• Step 7: (Left Brain) Produce to the Appropriate Level

Here’s how:

• When you are gathering information, doing research and asking questions you are using your Left Brain.
• When you are defining the problem, setting goals, working out schedules and contents, you are using your Left Brain.
• But what happens when you begin to think opening and freely--to be creative? You are then using your Right Brain.
• What you do on your break is up to you--it can be either. Both. Nothing even!
• But when you come back you still need to stay in a Right Brain mode. Let the ideas flow freely, without censoring.
• When
  you finally move to Step 6 and begin to evaluate your work you need to
  use your Left Brain. But you don't want to stop using your right-brain
  either. You need to use all of yourself here.
• Then we
  come full circle back to the Left Brain in Step 7. When you are in the
  production phase you should no longer be creating. This step calls for
  you to be precise, correct, and careful. You need to pay strict
  attention to what you are doing.
• If at any point
  during production (whether of tight thumbnails, comps or final files)
  you find yourself revising anything, you have moved back up to step 6.

Creative people often like to say they are “right brain people.” But just
breaking down the creative process in this way shows us that to be a
full throttle designer you have to use both sides of your brain.

The Creative Process: Archetypes

There is always one more way to describe a process. Roger Von Oechs, the author of A Whack on the Side of the Head and A Kick in the Seat of the Pants, two books on basic creative thinking, likens each step in any creative process to the following archetypes:

• The Explorer
• The Imaginative
• The Judge
• The Warrior

By his definition, the creative phases we have discussed so far in this module would break down like this:

• Step 1: Gather the Material = Explorer
• Step 2: Define the Problem = Explorer

In Steps 1 and 2 you need to be an Explorer. You need to seek out what you need and decide what to do--what your goal is.

• Step 3: Attempt to Solve/First Ideas = Imaginative
• Step 4: Get Away!
• Step 5: Let the Ideas Flow = Imaginative

In Steps 3 and 5 you need to use your Imagination. These are the creative phases.

• Step 6: Select and Refine the Best Ideas = The Judge

In Step 6 you need to become the Judge. You need to carefully look at what you have and decide what works best.

• Step 7: Produce to the Appropriate Level = The Warrior

And
in Step 7 you need to be a warrior. This means you need to be strong
enough to sell your ideas, to stand up for what you need and want, make
bold presentations, make sure all the parts of a project are being
produced correctly.

It might help you while you are working on a creative project to be aware of, or even to assume these mindsets.

Design Critique Method

Now we come to the second topic of this module: building your design critique skills.

Why learn how to talk (and write) about design instead of just doing it?

“This is not a writing class" is a common remark from students. But talking
about, writing about, and presenting your own design work is a critical
skill. Especially for an MFA graduate who will be expected to take
these skills to a higher level than your average BFA holder. Part of
building those skills is learning how to evaluate design, and to
articulate what makes it work, and what doesn’t.

The Design Critique Method we are about to learn is a method of organizing
the facts and your thoughts about a particular work of design. It’s
broken down into four steps:

1. Description
2. Analysis
3. Interpretation
4. Judgment

Each step must be taken in order. This helps you to organize your thoughts
and make intelligent and educated statements. It is very important that
you are familiar with the Elements and the Principles Design as they
will provide you with the vocabulary and knowledge necessary to
critique design intelligently. (You can revisit these concepts in
modules 2 and 3 if you are unclear about any of them.)

Notall people are going to agree with everything you may say. People bring
their own set of stored knowledge and experiences into a critique and
it is therefore to some extent always subjective. That said,
understanding what you are talking about and organizing your critique
along a determined and rational process will go a long way towards
objectivity.

Step One: Description

Often the first thing you do when you look at a work of design is to
say “I like it” or “I think that is a terrible piece of design.” It is
difficult not to jump to your opinions first. However, in order to make
intelligent statements and educated guesses, it’s best to begin with
the first step: Description.

Description simply means to describe the design. Describe what you see in as straightforward a
manner as possible. Talk about the subject, the medium and any
information you have gained from reading the designer’s statement (if
there is one), and the details like client, date, etc. This is not the
place to add your opinions. You must be objective, like a detective who
is surveying the scene of a crime and writing down only what s/he sees.
Try not to make inferences or express opinions. List only the (visual)
facts of what you see.

This is a design from Nancy Skolos. There are many cutout
letterforms, and three-dimensional objects sprinkled throughout the
poster. Objects in the poster appear photographic. The color palette of
this poster is almost monochromatic with some usage of reds here and
there. There aren’t any human elements in the poster, only geometric
shapes and collage-like items. We get a sense of depth from the shapes
and shadows used in this poster.

Would you necessarily put this description in a posting to a fellow student? Perhaps not.
However this important step slows down the process and forces you to
really study a design before you analyze it.

Step Two: Analysis

Analysis is the second step of the design critiquing process. Your
analysis relies on knowledge of the elements of design and principles
of design to articulate in an intelligent manner the information you
see in the design. Through your analysis, you will express your
thoughts about the goals and purpose of the design by answering to the
following question: How does this design communicate its message?

To answer, you must understand how the designer used (or failed to use)
the elements and principals of design. Use this design elements and
principals checklist while doing your analysis:

How has the designer used the following elements?

• Line
• Shape
• Texture
• Color
• Type
• Image

How have they applied the following principles to these elements?

• Balance
• Space
• Emphasis
• Movement
• Contrast
• Alignment and Unity

Step Three: Interpretation

With Interpretation you must now express your opinions about the
design. It is here that you will ask yourself “What does this design
communicate to me?”

You must be able to articulate, or express yourself intelligently by providing insightful comments.
Interpretation is subjective—just as people are different, so are our
interpretations. You can make guesses and inferences. However, these
should be educated guesses and not just random guesses.

Step Four: Judgment

Here you can express your opinion on the success of the work.
Judgment is not so much about the work as about you. What do you think
about this piece of work? Is it successful? Do you like it?

Everyone is going to have reasons for liking or disliking a work of design.
Saying “I think this is good design” is not enough. You must be able to
give reasons as to why you like or do not like a design. If you
followed the four steps of the design critiquing process, you should be
able to articulate this pretty easily.

Critiquing Your Own Design

Just as you would critique somebody else’s work by using the
critiquing process to give greater insight than just your opinion, the
same method can give you a detached review of your own work. First,
take a step back from your work and rest your eyes for a spell, or even
take a jog to clear your mind. Once your mind is fresh and clear, try
the following exercises:

Describe your own design to yourself mentally.

Jot your description down on a piece of paper so you can refer to it later.
Can you express your design easily in clear and effective language? Can
you find distinct words to explain your designs? As you’re describing
your work to yourself, it can trigger new ideas, help you refine your
work or if you’re extremely content with your own description of your
design, you probably have a good design solution.

Analyze the elements in your designs.

What is your overall aim in this design? Is it to strongly convey a certain
message or to subtly represent your underlying objective? What design
elements did you choose to attain this goal? How did you apply the
principles to the elements? Did they work or not?

Interpret your work.

Express your true feelings about your design. Do you think the design is
successful? Return to first principles of design and the objectives for
the project. Be honest with yourself. Do you think somebody else
looking at your design will be able to understand what you are trying
to communicate? Or will your message be lost in translation?

Be judgmental.

This is where you bring in another designer, or friend, (or instructor!)
whom you trust to express their opinion of your work. Ask them all the
questions you have posed to yourself: Do they like it? Do they
understand it? What was their first reaction looking at your design?
With every input and suggestion, take it with heed. It is important to
digest somebody else’s opinion and compare and contrast them with
other’s input, especially somebody educated and aware of the process of
graphic design. And sometimes, it is just as crucial to digest the
opinion of someone who doesn’t know anything about your project or
indeed about graphic design—as a typical audience member is likely to
be.

Building a Thoughtful Response

Here’s a helpful format that you can use when responding to your
fellow students in a group critique. By answering these questions, you
should be able to build a thoughtful response to a given project:

1. Assignment Requirements

Does this piece follow the basic rules/instructions of the original assignment? In what way/s?

2. Positive Attributes

In what way/s has this piece correctly captured/addressed the nature/spirit of the assignment?

3. Negative Attributes

In what way/s has this piece not captured the nature of the assignment? What suggestions can you offer? (i.e. How would you apply constructive criticism?).

4. Conceptual Attributes

Is this piece an appropriate conceptual vehicle for the assignment? Describe why or why not.

5. Formal Attributes

Does this piece display exemplary design craft? Cite specific instances of good/bad craft.

6. Other Attributes

Does this piece go beyond the boundaries of the assignment? If so, how?
If not, what are some ways in which it might have done so? Speculate on
the unexplored potential of this piece.

Creative Visualization

Visualization Techniques

For our purposes we are going to divide visualization into four categories:

• Thought Visualization
• Concept Visualization
• Create Concept Boards
• Final Visualization

1. Thought Visualization

How do we first put our thoughts to paper? This can be done through words, diagrams, sketches and found materials.

Some of the techniques we can use are:

1. Mind Mapping
2. Brain Storming
3. Others

2. Concept Visualization

At this point we have developed some ideas and concepts that we would like
to explore and we want to utilize different techniques to develop our
ideas and find the best way to express them. There are many techniques
we can use both by hand and on the computer.

It is always better to start by visualizing ideas by hand. The results are more
instant, fluid and will often lead us towards other areas of
exploration not previously conceived. The computer is better utilized
when a more concrete concept has been established and we can then use
the advanced tools the computer provides.

Here are some ideas of hand techniques:

• Collage
• Photo Montage
• Sketching
• Painting

3. Create Concept Boards

Similar to mind mapping, concept boards collect imagery and other found items
that are associated with your concepts. Place this material all on one
board. Examine how they affect each other; look for commonality and
contrast.

This technique will often help to identify styles for imagery, type, composition and an overall look and feel for
the design concept.

4. Final Visualization

These are the techniques or styles of visualization we use to present our final design.

Some of the questions we will ask ourselves include:

• Shall we use a photographic image?
• What kind of line or shape will we use?
• Shall we use color and what color?

The questions are almost limitless and a lot will be determined by how your
ideas have developed and the final message you wish to communicate.

Media

Almost as important as the elements and principles of design are the media.
These are the materials chosen to execute the design. In today's highly
technological world this usually means using the computer. However the
computer is still just a tool, and great concepts still come from you,
the designer. No tool can supplant the process of creation; you must
use your mind to develop ideas. Therefore you still want to begin any
project on paper, with something as simple as a pen or colored pencils.

Some of the design exercises for this class will be executed by hand
using simple materials: black, white and colored papers, glue or rubber
cement, and felt tip pens or markers. You will finish most of your
homework assignments on your computer. However, you will be required to
do all your preliminary thinking (thumbnails) by hand--and you will be
required to scan in and post all of this initial handwork for each
assignment.

Tools for Thumbnails

Pencil: Try sketching with a sharp pencil and now a
dull one. Try sketching with a soft one, and now a big pencil or a
chiseled pencil. Your ideas will change as you change your pencil.

Brush: Few designers take advantage of the
conventional painting and drawing tools from our training years. We
forget how we think differently with a brush in our hands. Fluid
strokes beget interesting form. Liquid color always begets happy
accidents.

Color media: A suggestion of color can change the spin
on a sketch. In a finished piece of designed communication, broad
strokes of color or spot color can change the emphasis, meaning and
impact of the message. Color sketching will help you see these shifts
early in the process.

Cut and paste: Remember the feeling you had when you
were a kid creating with crude tools? Crayons, blunt-ended scissors,
tape, white paste. We did anything we could to get what was in our head
onto the piece of paper.

Dimensional sketching: Your choices of paper, format,
materials and folds are all influenced by the content and, in turn,
affect the concept. The feel, sound and smell of the sketch will
enhance the concept.

Thumbnails represent a starting point for developing ideas and
concepts. When you begin a project, you have to put into visual form
the ideas you come up with in your head. You have to be able to see
your ideas yourself in a variety of forms so you can select the best
layout for your concept. You need to have a way to show these ideas to
a client (or an instructor.)

Thumbnails are the fastest, most flexible way to do this. Thumbnails are visual representations of
what you are thinking; of the ideas and compositions that come to mind
in solving a design problem. The more you develop ideas through small
preliminary sketches, thumbnails, the wider the range of solutions you
will have to choose from for your final design.

Types of Thumbnails

The two recommended types or levels of thumbnails are:

• Rough (or preliminary)
• Tight

Rough thumbnails involve thinking, experimentation and growth. Rough thumbnails should be done quickly and without censoring.

Tight thumbnails are refined versions that are done neatly and carefully to a
presentation quality, and may be shown to a client (or instructor.)

Do not censor your mind with rough thumbnails; put down anything that comes and don’t worry about flow or organization.

Why should rough thumbnails be done by hand?

Because all final work in today’s world is completed on the computer, you may
think that you should also begin on the computer. Not true!

When you are developing ideas, you need to be completely free from the needs and constraints the computer places on you.

Think of it this way: if all you know how to do on the computer is draw cats
and dogs, and you only use the computer to generate ideas, then all
your ideas will end up being about cats and dogs.

Furthermore, since the computer always draws cats and dogs perfectly, you’ll end up
being a perfectionist—too controlled a mindset for brainstorming.

If you sit down with a pen or pencil and start to doodle, or if you do a series of quick sketches to visualize the ideas you have in your head, then anything is possible.

You will always find a way to produce your ideas, but if you never give
yourself the chance to think of them because you are so controlled by
your computer, you may never do anything unusual or creative.

And, believe it or not, in the preliminary stage of ideation (when you are thinking quickly and without censoring), it is actually a lot faster to work by hand!

Working By Hand

When you work by hand, there is nothing to mark and move. There is
nothing to save. It is easy to work on several ideas at the same time
and, possibly most importantly, you will have a direct link between
your brain and your hand without the need to understand anything but
the ideas that are coming up.

Doodling and thumbnail sketching is by far the best way to generate
a lot of unique visual concepts quickly. Doodling is therapeutic.
Doodling is done while your mind is meandering in other directions,
while you are on the phone, for instance.

The beauty behind doodling or thumbnail sketching is that a thought is
captured as a pure and raw idea, not as a stylistic solution. When you
look back over several pages of miniature sketches, you’ll begin to see
things you didn’t intend to do while you were sketching. More
importantly, when someone else looks at these same sketches, that
person adds a whole new point of view to your raw ideas. As more people
look at the sketches, more ideas are created. This is because sketching
is not a precise technique. It leaves room for interpretation.

The computer is both a blessing and a curse rolled into one expensive tool.
And that’s just what it is: a tool. It is the pencil of the late
twentieth century [and now the twenty-first century], nothing more. It
is not the brain. It is not a designer, a photographer or an
illustrator. Designers have a responsibility to do what we are paid to
do: design. Although the computer can be a great tool for making
visions reality, too many designers use it as their only tool, or
worse, as a substitute for thinking. These designers use the computer
as a sketching tool, thinking tool, writing tool, typesetting and
illustration tool, and production tool. All this is well and good,
until you can’t tell where one starts and another ends. Then the tool
has mastered the designer, not the other way around, and the designer
may have begun abdicating his responsibility to the computer.

Rough Thumbnails

These preliminary thumbnails should be done quickly and roughly.
They do not have to be neat. However, you do need to know what you are
trying to accomplish. In other words: what is your goal? You also need
to have enough information so you can guide your mind in the right
direction. Keep in mind that you are just beginning to think about
concepts and develop your ideas, so it is absolutely essential that you
not censor yourself at this stage.

Understanding the meaning of the word censorship may help you to avoid the activity:

[To] censor: to examine in order to suppress or delete anything considered objectionable or not acceptable.

Do a series of quick, rough sketches first. Put down everything you can
think of. Then pick the best of these to develop further into tighter
thumbnails that really explain your concept and show what your final
layout(s) will look like.

These quick sketches usually work best when they are messy and rough.

The other important aspect of doing rough thumbnails is that if you know
you don’t have to show them to anybody, you are more apt to put down
unusual, funny, quirky, silly, outrageous, or crazy ideas. This keeps
your mind loose and relaxed. Some of the very best designs have
originated from far-out ideas.

You don’t want to evaluate ideas during your preliminary thinking, brainstorming and thumbnail
sessions. This means that you need to keep your mind and your
imagination wide open so that you do not say no to anything that pops
into your head. Put it all down! Everything!

Here are some tips for doing rough, preliminary thumbnails:

• Know where you are going. Have a goal; have enough information to direct your thinking.
• Work
  within the same dimensional page shape you want for your final layouts.
  If your finished design will be square, do your thumbnails in squares.
  If your final compositions will be rectangular, approximate the shape
  of the page when you do your thumbnails.
• If your final design is to use solid shapes, do your rough thumbnails with
  solid shapes by filling them in. You cannot see what solid shapes will
  look like if all you use are outlines. The balance and weight of solid
  shapes is different than outlines. Even though you are working quickly
  in this stage it is important to slant your mind in the right direction.
• If your final design is to be in color, use color right from the start.
  Use colored pencils or felt tip pens, but allow your mind to think in
  Technicolor. You’ll be more creative, and it is a lot more exciting to
  work with color.
• Carry a small sketchpad with you.
  You can jot down ideas at any time and anywhere. Many a great idea was
  first put down on a paper napkin.
• Experiment with a variety of media. Try felt-tip pens, colored pencils, collage, paints, pencils, ink, etc.

Sometimes when ideas fail to surface through sketches, a designer may
encourage a breakthrough by cutting and arranging his images. In any
event it is a worthwhile exercise that may expand a designer’s
perception. There are two levels of chance that can influence concept
formation. One is the pure accident of vision and events and the other
is the controlled accident, where the designer sets the stage for
chance. An advantage of working with collage or cutouts is the
opportunity that these techniques offer to produce and take advantage
of the accidental effect. Both random and controlled chance can be
effective if the designer is alert.

Tight Thumbnails

Once you have a number of ideas in rough form, you will need to look
at what you have and select the best ideas to develop. Remember that if
you look at what you have and don’t like anything you have come up
with, you can go back through the creative process again as many times
as you need to. You may need to go all the way back to the idea
generation stage.

When it comes time to present your ideas they need to be in tight thumbnail form and of professional
quality. Although you may be working smaller than the final size, your
thumbnails must be in the same relative proportions as your finished
layout will be.

Tight thumbnails should be in the correct
proportions as the finished piece and show all the major elements. At
this stage, in final roughs and certainly in tight thumbnails, a
computer is generally used.

You need to take the following steps for all (or tight) thumbnails:

• Develop your concept and layouts into a visual form that can be clearly understood.
• If typography is included, you need to look at the actual font and
  duplicate it in hand lettering that resembles the font. This means that
  if it is a serif font, the serifs must be included.
• If you are using colored pencil or pens, you need to apply the color smoothly and evenly.
• Your layouts must be in the same dimensional form as the finals will be.
  This means you need to figure out the reduced dimensions exactly. In
  other words if your final page will be 6 inches x 9 inches, your
  presentation thumbnails might be 50% of the full size or 3 x 4.5. They
  should be large enough to be clearly visible, but small enough so that
  they don’t take you hours to produce.
• How you present tight thumbnails depends on whom you are presenting them to. If there
  are specifications to a class project that tell you how to present your
  concepts in thumbnail form, follow them. If there are no instructions,
  find a way to present them in a professional manner. You might mount
  them on a single board. You might have all of them on a single sheet of
  paper. You might have each one mounted individually.

“Know where you are going. Have a goal; have enough information to direct your thinking.” What we’re talking about here is a concept. Thumbnails are a good way of getting to a solid concept

Mind Mapping

A mind map is a drawing of a concept or idea and those ideas related
to it. A mind map is a way to organize a subject using visual tools.
Often used by artists, mind maps are also used by information
professionals of all kinds to sort and make sense of a complex subject.

Mind maps use graphics, words, images, symbols and color
to create a 2-dimensional representation of a 3-dimensional knowledge
set. Basically you start with a concept and then create links and lines
relating other concepts to your starting point. Eventually you have a
map of how your own mind thinks about the subject and that can lead to
a lot of idea generation and spark creative thinking. The elements are
arranged intuitively according to the importance of the concepts in
your mind and they are organized into groupings, branches, or areas.

Academics use similar devices called semantic networks, cognitive
maps and others that carry complex formal rules in order to solve
problems in engineering and computer science. A mind map is a
simplified version for everyday people where the interrelationships
between concepts are not structured but rather the choice of the “mind
mapper” (you!).

Mind maps increase the quality of thinking. They assist in systems thinking, allowing a visual
representation of an overview, showing connections and facilitating the
synthesis of ideas. They are helpful for creative thinking, allowing
you to access multiple intelligences and generate new ideas. Mind maps
help you to organize ideas, both your own and those of other people.
They help you organize information from books, workshops and meetings.
Creating mind maps increases memory and learning.

How to create a mind map

Although there are rules for creating a useful mind map, the process is intended to spark new
relationships and fresh ideas, so do not get stuck or bogged down in
the rules and details. That said, here are some basic instructions for
how to create successful mind maps. A mind map is an organization of
your own internal metaphoric connections surrounding a subject, so
there are never right or wrong answers to put on your mind map.

• Start with a clean large sheet of paper.
• Always begin in the center and work your way out.
• Feel free to use words, images, symbols, codes, pasted material, dimensions or anything else you find useful on your mind map.
• If you do use letters, try to print them rather than use a scrolling hand, the finished map will be much easier to read.
• Make the center strong and clear and (probably) visual in order to clearly identify the theme of your map.
• Make sure every element has a line.
• Lines can be arrows, black and white, in color or any other kind of connector
  that makes sense to you. Lines between elements connote relationships
  of various kinds. Use different lines for different kinds of
  relationships. Use colors as a personal code in your map.
• All lines must be connected, starting from the central image. Lines
  typically start thick in the center and become thinner and freer
  flowing as they grow out.

Try to develop your own visual style of mind mapping, as this is likely to be easier for
you to create and read in the future. If you get stuck, don’t stop;
simply move to another branch of the map. If you run out of paper,
don’t start over; paste more paper onto your work surface.