Before and After 0671

Before&After
Studio G
Anderson
Grant
interior
photography
2416 Washington Street

Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.sTgphoto.org
BAmagazine.com
i U X
Design is easier if you put your

image here and your type there.
Continued
Continued
Design like a lazy person 0671
Before&After
BAmagazine.com
i U X
Design like a lazy person

Design is easier if you put your image here and your type there
Before
Most designs are a combination of words

and images. These are quite different
things, and they interact in unpredictable
ways. Getting them to look good together
can be tough. Styles are often incompatible, details clash, contrasts can be wrong.
You fiddle and fuss. And even if you get it
right once, getting it right the next time
means starting again from scratch.
This is too much work! A better way is
to think like a lazy person. Put your image
here and your type there. Keep each one
simple, and keep their interaction to a
minimum. This almost always yields a
good design, and the results are easy to
repeat! Lets see how:
Studio
After
anderson grant
interior photography
24i6 washington street, loft 26

Santa Cruz, California 95060
Telephone: 1-800-555-5555
www.stgphoto.org
Before, this small

brochure cover was
designed the hard
way. The designer
chose unrelated typefaces and colors, then
added backgrounds
and outlines in an
effort to pull them
together. Design is
easier than that.
Studio G
Anderson
Grant
interior
photography

Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.sTgphoto.org
2 of 12
After, the image

and words havent
changed, but segregating the page into
two zonesimage
here, type there
yields a handsome,
super-clean design in
less time, and which
is easy to repeat!
Before&After
BAmagazine.com
3 of 12
i U X
Before
Design the hard way.
Studio G
The shape of the page

is the founda ional
t
design element.
Add a green background, and you get

a white frame, too.
Center the name at

the top. Hmmm, looks
kinda insignificant . . .
Studio
. . . so enlarge the G.
Dang, now Studio looks
like its floating . . .
3 of 12
Studio
. . . so draw some lines

to anchor it. Better.
Before&After
BAmagazine.com
4 of 12
i U X
Before
Studio
Studio
Studio
Studio
Studio
anderson grant

Telephone: 1-800-555-5555
Telephone: 1-800-555-5555
www.stgphoto.org
Add outline and round

corners to tie into the
existing elements.
anderson grant

Add the hoto. Leave

p
thin green side edges
for a bit of trim.
anderson grant
www.stgphoto.org
Set the name in the

Studio typeface; use
all caps for impact.
Set contact info at

the bottom, because
its least impressive . . .
4 of 12
. . . and fill the empty

space with red lines to
tie into the photo.
Before&After
BAmagazine.com
5 of 12
i U X
Before
It was hard to do, and its

unattractive, too. Why?
Because the designer tried
to force his choices onto the
page out of sync with the
s
ubject matter.
Studio
anderson grant

Telephone: 1-800-555-5555
www.stgphoto.org
Playful circles Round Bauhaus Demi

is a fun, quirky, typefacewhen its
round. To look round, however, requires
big, tightly set, lowercase letters (above).
Problem is, the designer chose uppercase letters, which are predominantly
straight, and set his words in small,
straight lines (left and below). The result
defeats the typestyle, whose quirky
details now just look messy.
ANDERSON
Studio
1 23
A theme is good, but . . .

The designer understood the value of
a theme and set round cor ers (above)
n
to match his round typeface. Problem:
Its not enough roundness; the lines
are still mostly straight but now have
ambiguous edges, too, an effect amplified by the many overlaid shapes (left).
These create busy-ness, not design;
instead of a single sharp edge, the eye
must now process one, two, three,
four separate objects unnecessarily.
Green overpowers
Red and green are complementary, or opposite,
colors, which are strong
when used in roughly
equal proportions. Here,
however, theres too
much green, which merely deadens the red photo.

Telephone: 1-800-555-5555
www.stgphoto.org
5 of 12
Before&After
BAmagazine.com
6 of 12
i U X
After
Design the easy, lazy way.
Studio G
Studio G
Anderson
Grant
interior
photography
Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.sTgphoto.org

is the founda ional
t
design element. Pay
attention to it.
Place the photo at the

top; touch the edges.
This yields two zones.
Set the name in a tall

typeface, upper-left
corner of the zone.
Stack the remaining

type in a neat column, which mimics
the shape of the page.
C
olor with swatches
from the photo. Thats
all there is to it!
6 of 12
Before&After
BAmagazine.com
7 of 12
i U X
After
Why does it work? The photo

is the show, and the elements
conform to the page. Photo
and name are big, expansive,
beautiful, clear.
Big to small . . .
Dark to light . . .
Studio G Studio G
Anderson
Grant
interior
photography

Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.stgphoto.org
Separate by size and value

The carefully set type has four levels of
visual hierarchyposition: top to bottom; size: big to small; weight: heavy to
light; color: dark to light. These signify
relative importance and also move the
eye from one to the next.
Studio G

Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.stgphoto.org

Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.stgphoto.org
Anderson
Grant
interior
photography
Anderson
Grant
interior
photography

Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.sTgphoto.org
Studio G
Studio G
Anderson
Grant
interior
photography
Anderson
Grant
interior
photography
Short lines of uppercase type pack

tightly togetherlowercase type cant
do thisand yield a crisp, vertical,
i
ntentionally designed look. Its placement on the left leaves on the right a
field of white thats active, pushing the
eye back toward the type.

Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.sTgphoto.org
7 of 12
Before&After
BAmagazine.com
8 of 12
i U X
Variations
Lazy-person design is versatile enough to accommodate a whole portfolio!
Words on top
Colored field
Studio G
Studio G

Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.sTgphoto.org

Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.sTgphoto.org
Anderson
Grant
interior
photography
Horizontal
Anderson
Grant
interior
photography
Studio G
Anderson
Grant
interior
photography
2416 Washington Street, Loft 26

1-800-555-5555 | www.sTgphoto.org
Top, bottom, left, right Orientation of

photo and text field can be changed effortlessly, because each is self contained; the
type works equally well top or bottom and
can easily be adapted to left or right. Color
is the connection; in each case, the type
c
olors have been derived from the image.
Remember hierarchyemphasize the name,
and keep the supporting type low key.
8 of 12
Before&After
BAmagazine.com
9 of 12
i U X
Variation
Sometimes you have no

option to change color or
typeface; they may be house
styles. What to do?
Retain the simplicity

Use two fields, one for photo and one
for words. No gingerbread.
Play to the strengths of the type
Bauhaus is round; the light version is
even somewhat stylish. Set it tightly in
lowercase. By using lowercase even on
the initial letters, youll have a style.
Retain the type hierarchy
Top to bottom, big to small, dark to
light. In this case, the type is predominantly the same weight.
studiog
anderson grant
interior
photography
2416 washington street, loft 26

santa cruz, california 95060
1-800-555-5555 www.stgphoto.org
Retain the alignment

Bauhaus is not condensed, so it wont
form a strong column. Instead, align
it to the right, in this case, flush with
studio. Let the g hang in open space
for emphasis. Key is to keep the type
shaped; dont just scatter it around.
Darken the green
Deeper shade keeps the red from
clashing; the similar quantities now
complement each other correctly.
9 of 12
Before&After
BAmagazine.com
10 of 12
i U X
Article resources
Typefaces
Colors
1 Bureau Grot Extra Comp Black | 84 pt
Studio G
Anderson
Grant
interior
photography

Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.sTgphoto.org
6
7
2a
2b
6
7
C0 M100 Y100 K40
2 (ab) ITC Franklin Gothic Book Comp

a) 27/21 pt, b) 13/13 pt
C45 M51 Y71 K20
C24 M35 Y55 K0
C65 M45 Y70 K20
Images
Images: iStockphoto.com
3 (2768718)
4 (1885513)
Studio G
Anderson
Grant
interior
photography
Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.sTgphoto.org
10 of 12
Before&After
BAmagazine.com
11 of 12
i U X
Article resources
Typefaces
Studio G
Anderson
Grant
interior
photography

Colors
1 (ac) Bauhaus Light | a) 75.5 pt,

b) 23.5/23.5 pt, c) 11.5/14.5 pt
C19 M52 Y100 K3
2 Bauhaus Medium | 75.5 pt
C45 M51 Y71 K20
C24 M35 Y55 K0
C31 M65 Y61 K13
6
7
Images
10 C38 M81 Y78 K50
3 (4578680)
9
10
11
Studio G
4 (5009801)
11 C27 M38 Y58 K2
5 (2768718)
Anderson
Grant
interior
photography
12 C80 M45 Y90 K60

13 C16 M35 Y51 K0

Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.sTgphoto.org
12
13
5
studiog
1a
2
anderson grant
interior
photography
1b

1c
11 of 12
Before&After
BAmagazine.com
12 of 12
Subscribe to Before & After

Subscribe to Before & After, and become a
more capable, confident designer for pennies
per article. To learn more, go to
http://www.bamagazine.com/Subscribe
E-mail this article
To pass along a free copy of this article to
others, click here.
Join our e-list
To be notified by e-mail of new articles as
they become available, go to
http://www.bamagazine.com/email
i U X
Before & After magazine

Before & After has been sharing its practical approach
to graphic design since 1990. Because our modern world
has made designers of us all (ready or not), Before &
After is dedicated to making graphic design understandable, useful and even fun for everyone.
John McWade Publisher and creative director
Gaye McWade Associate publisher
Dexter Mark Abellera Staff designer
323 Lincoln Street, Roseville, CA 95678
Telephone 916-784-3880
Fax 916-784-3995
E-mail mailbox@bamagazine.com
www http://www.bamagazine.com
Copyright 2008 Before & After magazine
ISSN 1049-0035. All rights reserved
You may pass along a free copy of this article to others
by clicking here. You may not alter this article, and you
may not charge for it. You may quote brief sections
for review; please credit Before & After magazine, and
let us know. To link Before & After magazine to your
Web site, use this URL: http://www.bamagazine.com.
For all other permissions, please contact us.
12 of 12| Printing formats
Before&After
BAmagazine.com
i U X
Before & After is made to fit your binder

Before & After articles are intended for permanent reference. All are titled and numbered.
For the current table of contents, click here. To save time and paper, a paper-saver format of this article,
suitable for one- or two-sided printing, is provided on the following pages.
For presentation format

Print: (Specify pages 112)
For paper-saver format

Print: (Specify pages 1419)
Print
Format: Landscape
Page Size: Fit to Page
Save
Presentation format or
Paper-saver format
Back| Paper-saver format
Before&After
Studio G
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY
Before&After
2416 WASHINGTON STREET

LOFT 26
SANTA CRUZ
CALIFORNIA 95060
1-800-555-5555
WWW.STGPHOTO.ORG
After
BAmagazine.com
BAmagazine.com
i U X
i U X
Studio G
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY

LOFT 26
SANTA CRUZ
CALIFORNIA 95060
1-800-555-5555
WWW.STGPHOTO.ORG
2 of 12
0671
0671
After, the image

and words havent
changed, but segregating the page into
two zonesimage
here, type there
yields a handsome,
super-clean design in
less time, and which
is easy to repeat!
Before, this small

brochure cover was
designed the hard
way. The designer
chose unrelated typefaces and colors, then
added backgrounds
and outlines in an
effort to pull them
together. Design is
easier than that.
Continued
Design is easier if you put your

image here and your type there.
Continued
Design is easier if you put your image here and your type there
Before
Studio
ANDERSON GRANT
INTERIOR PHOTOGRAPHY
24I6 WASHINGTON STREET, LOFT 26

SANTA CRUZ, CALIFORNIA 95060
Telephone: 1-800-555-5555
www.stgphoto.org
1 of 6
Before&After | www.bamagazine.com
Most designs are a combination of words

and images. These are quite different
things, and they interact in unpredictable
ways. Getting them to look good together
can be tough. Styles are often incompatible, details clash, contrasts can be wrong.
You ddle and fuss. And even if you get it
right once, getting it right the next time
means starting again from scratch.
This is too much work! A better way is
to think like a lazy person. Put your image
here and your type there. Keep each one
simple, and keep their interaction to a
minimum. This almost always yields a
good design, and the results are easy to
repeat! Lets see how:
0671 Design like a lazy person
Before&After
Before
Add a green background, and you get

a white frame, too.
Before
Studio
3 of 12
Studio G
Center the name at

the top. Hmmm, looks
kinda insignicant . . .
Studio
BAmagazine.com
i U X
Studio
. . . so draw some lines

to anchor it. Better.
i U X
BAmagazine.com
. . . so enlarge the G.
Dang, now Studio looks
like its oating . . .
3 of 12
ANDERSON GRANT
Studio
ANDERSON GRANT
Studio
ANDERSON GRANT

Studio

0671

0671
. . . and ll the empty

space with red lines to
tie into the photo.
Telephone: 1-800-555-5555
www.stgphoto.org
4 of 12
Set contact info at

the bottom, because
its least impressive . . .
Telephone: 1-800-555-5555
www.stgphoto.org
Set the name in the

Studio typeface; use
all caps for impact.
2 of 6
4 of 12
Add outline and round

corners to tie into the
existing elements.

is the foundational
design element.
Before&After
Studio
Add the photo. Leave

thin green side edges
for a bit of trim.
Before&After
Studio
ANDERSON GRANT

Telephone: 1-800-555-5555
www.stgphoto.org
Before&After
Before
5 of 12
It was hard to do, and its

unattractive, too. Why?
Because the designer tried
to force his choices onto the
page out of sync with the
subject matter.
6 of 12
Playful circles Round Bauhaus Demi

is a fun, quirky, typefacewhen its
round. To look round, however, requires
big, tightly set, lowercase letters (above).
Problem is, the designer chose uppercase letters, which are predominantly
straight, and set his words in small,
straight lines (left and below). The result
defeats the typestyle, whose quirky
details now just look messy.
ANDERSON
After
Studio

Telephone: 1-800-555-5555
www.stgphoto.org
Studio G
Set the name in a tall

typeface, upper-left
corner of the zone.
3 of 6
Place the photo at the

top; touch the edges.
This yields two zones.
Design the easy, lazy way.

is the foundational
design element. Pay
attention to it.
1 23
5 of 12
BAmagazine.com
i U X
A theme is good, but . . .

The designer understood the value of
a theme and set round corners (above)
to match his round typeface. Problem:
Its not enough roundness; the lines
are still mostly straight but now have
ambiguous edges, too, an effect amplied by the many overlaid shapes (left).
These create busy-ness, not design;
instead of a single sharp edge, the eye
must now process one, two, three,
four separate objects unnecessarily.
Green overpowers
Red and green are complementary, or opposite,
colors, which are strong
when used in roughly
equal proportions. Here,
however, theres too
much green, which merely deadens the red photo.
i U X
BAmagazine.com
Studio G
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY

LOFT 26
SANTA CRUZ
CALIFORNIA 95060
1-800-555-5555
WWW.STGPHOTO.ORG
0671

0671
Stack the remaining

type in a neat column, which mimics
the shape of the page.
Color with swatches
from the photo. Thats
all there is to it!
6 of 12
Before&After
Before&After
Words on top
After
7 of 12
Dark to light . . .
Why does it work? The photo

is the show, and the elements
conform to the page. Photo
and name are big, expansive,
beautiful, clear.
Big to small . . .
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY

LOFT 26
SANTA CRUZ
CALIFORNIA 95060
1-800-555-5555
WWW.STGPHOTO.ORG
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY
Studio G Studio G
LOFT 26
SANTA CRUZ
CALIFORNIA 95060
1-800-555-5555
WWW.STGPHOTO.ORG
8 of 12
Separate by size and value

The carefully set type has four levels of
visual hierarchyposition: top to bottom; size: big to small; weight: heavy to
light; color: dark to light. These signify
relative importance and also move the
eye from one to the next.
Variations
Studio G
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY

LOFT 26
SANTA CRUZ
CALIFORNIA 95060
1-800-555-5555
WWW.STGPHOTO.ORG
4 of 6
BAmagazine.com
i U X
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY
Studio G
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY
LOFT 26
SANTA CRUZ
CALIFORNIA 95060
1-800-555-5555
WWW.STGPHOTO.ORG
Studio G
LOFT 26
SANTA CRUZ
CALIFORNIA 95060
1-800-555-5555
WWW.STGPHOTO.ORG
i U X
0671

0671
2416 WASHINGTON STREET, LOFT 26

1-800-555-5555 | WWW.STGPHOTO.ORG
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY
Studio G
BAmagazine.com
Short lines of uppercase type pack

tightly togetherlowercase type cant
do thisand yield a crisp, vertical,
intentionally designed look. Its placement on the left leaves on the right a
eld of white thats active, pushing the
eye back toward the type.
7 of 12
8 of 12
Top, bottom, left, right Orientation of

photo and text eld can be changed effortlessly, because each is self contained; the
type works equally well top or bottom and
can easily be adapted to left or right. Color
is the connection; in each case, the type
colors have been derived from the image.
Remember hierarchyemphasize the name,
and keep the supporting type low key.
Horizontal
Lazy-person design is versatile enough to accommodate a whole portfolio!
Colored eld

LOFT 26
SANTA CRUZ
CALIFORNIA 95060
1-800-555-5555
WWW.STGPHOTO.ORG
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY
Studio G
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY
Studio G
LOFT 26
SANTA CRUZ
CALIFORNIA 95060
1-800-555-5555
WWW.STGPHOTO.ORG
Before&After
Before&After
Variation
9 of 12
Sometimes you have no

option to change color or
typeface; they may be house
styles. What to do?
Retain the simplicity

Use two elds, one for photo and one
for words. No gingerbread.
Play to the strengths of the type
Bauhaus is round; the light version is
even somewhat stylish. Set it tightly in
lowercase. By using lowercase even on
the initial letters, youll have a style.
10 of 12
Retain the type hierarchy

Top to bottom, big to small, dark to
light. In this case, the type is predominantly the same weight.
Article resources
Studio G
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY

LOFT 26
SANTA CRUZ
CALIFORNIA 95060
1-800-555-5555
WWW.STGPHOTO.ORG
studiog
anderson grant
interior
photography
Images
3 (2768718)
4 (1885513)
BAmagazine.com
i U X
Retain the alignment

Bauhaus is not condensed, so it wont
form a strong column. Instead, align
it to the right, in this case, ush with
studio. Let the g hang in open space
for emphasis. Key is to keep the type
shaped; dont just scatter it around.
i U X
C65 M45 Y70 K20
C24 M35 Y55 K0
C45 M51 Y71 K20
C0 M100 Y100 K40
0671

0671
Colors
BAmagazine.com
Darken the green

Deeper shade keeps the red from
clashing; the similar quantities now
complement each other correctly.
9 of 12
10 of 12
2 (ab) ITC Franklin Gothic Book Comp

a) 27/21 pt, b) 13/13 pt
1 Bureau Grot Extra Comp Black | 84 pt
Typefaces

8
6
7
6
7
Studio G
ANDERSON
GRANT
INTERIOR
PHOTOGRAPHY

LOFT 26
SANTA CRUZ
CALIFORNIA 95060
1-800-555-5555
WWW.STGPHOTO.ORG
5 of 6
1
2a
2b
9
10
11
4
Article resources
Studio G
Anderson
Grant
interior
photography

Loft 26
Santa Cruz
California 95060
1-800-555-5555
www.sTgphoto.org
Studio G
Anderson
Grant
interior
photography

6
C45 M51 Y71 K20
C19 M52 Y100 K3
Colors
1 (ac) Bauhaus Light | a) 75.5 pt,

b) 23.5/23.5 pt, c) 11.5/14.5 pt
C24 M35 Y55 K0
Typefaces
2 Bauhaus Medium | 75.5 pt

8
C31 M65 Y61 K13
Images
12 C80 M45 Y90 K60
11 C27 M38 Y58 K2
10 C38 M81 Y78 K50
7
3 (4578680)
4 (5009801)
5 (2768718)
13 C16 M35 Y51 K0
You may pass along a free copy of this article to others

by clicking here. You may not alter this article, and you
may not charge for it. You may quote brief sections
for review; please credit Before & After magazine, and
let us know. To link Before & After magazine to your
Web site, use this URL: http://www.bamagazine.com.
For all other permissions, please contact us.
Copyright 2008 Before & After magazine

ISSN 1049-0035. All rights reserved

323 Lincoln Street, Roseville, CA 95678
Telephone 916-784-3880
Fax 916-784-3995
E-mail mailbox@bamagazine.com
www http://www.bamagazine.com
John McWade Publisher and creative director

Gaye McWade Associate publisher
Dexter Mark Abellera Staff designer

Before & After has been sharing its practical approach
to graphic design since 1990. Because our modern world
has made designers of us all (ready or not), Before &
After is dedicated to making graphic design understandable, useful and even fun for everyone.
1b
1a
13
12
anderson grant
interior
photography
1c
studiog
Subscribe to Before & After

Subscribe to Before & After, and become a
more capable, confident designer for pennies
per article. To learn more, go to
http://www.bamagazine.com/Subscribe
E-mail this article
To pass along a free copy of this article to
others, click here.
Join our e-list
To be notified by e-mail of new articles as
they become available, go to
6 of 6
http://www.bamagazine.com/email

Before and After 0671

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Before and After 0671

Hochgeladen von

Copyright:

Verfügbare Formate

Before&After

2416 Washington Street

Design is easier if you put your

Design like a lazy person 0671

Design like a lazy person

Most designs are a combination of words

24i6 washington street, loft 26

Before, this small

2416 Washington Street

After, the image

Design like a lazy person 0671

Design like a lazy person

Design the hard way.

The shape of the page

Add a green background, and you get

Center the name at

. . . so draw some lines

Design like a lazy person 0671

Design like a lazy person

Design the hard way.

24i6 washington street, loft 26

Add outline and round

24i6 washington street, loft 26

Add the hoto. Leave

Set the name in the

Set contact info at

. . . and fill the empty

Design like a lazy person 0671

Design like a lazy person

It was hard to do, and its

24i6 washington street, loft 26

Playful circles Round Bauhaus Demi

A theme is good, but . . .

24i6 washington street, loft 26

Design like a lazy person 0671

Design like a lazy person

Design the easy, lazy way.

The shape of the page

Place the photo at the

Set the name in a tall

Stack the remaining

Design like a lazy person 0671

Design like a lazy person

Why does it work? The photo

2416 Washington Street

Separate by size and value

2416 Washington Street

2416 Washington Street

2416 Washington Street

Short lines of uppercase type pack

2416 Washington Street

Design like a lazy person 0671

Design like a lazy person

Lazy-person design is versatile enough to accommodate a whole portfolio!

2416 Washington Street

2416 Washington Street

2416 Washington Street, Loft 26

Top, bottom, left, right Orientation of

Design like a lazy person 0671

Design like a lazy person

Sometimes you have no

Retain the simplicity

2416 washington street, loft 26

Retain the alignment