Before&After 

BAmagazine.com

®

i U X

DesignTalk13

FiveDesignIdeas
CAPITOL
AIR CHARTER

Separate Fields

Organized Card  

Massive Typeface

Sleeve-Style Cover

Richard Ryan 916-796-5674 capitolaircharter.com

ECLIPSE 500

HOME
LOANS

ARM (Adjustable Rate Mortgage)
First Mortgages

Second Mortgages
BFS (Business For Self)

Home Page Greeting

Personal Loans

Continued   

Design talk   0662


Before&After 
®

Design talk

i U X

BAmagazine.com

2 of 10

Layout Organize that card
Our friend Richard finances his love of flying by operating a one-jet air-charter service here on
the West Coast. And it’s easy to see where his heart is—he pilots a state-of-the-art jet but prints his
business cards on his desktop. Let’s see if we can get those cards looking as fast as his airplane.

Before


After

CAPITOL
AIR CHARTER

CapitolAirCharter

Richard Ryan 916-796-5674 capitolaircharter.com

916-796-5674

Richard Ryan

Eclipse 500

capitolaircharter.com

ECLIPSE 500

Slow The factory supplied a g
­ ood photo, but Richard
made a common mistake—he filled its open spaces with
words. These “trap” the airplane and, lacking hierarchy,
send a fragmented message. His name in aviation blue was
a good idea but is too bright for the desaturated photo.
And Times Roman type, while excellent for text, is too fussy
for the sleek subject matter. Shadows muddy it further.

Boxy & slow


Fast The words have been pulled off the photo and into line,
which is how we read. Light italics typeface looks fast. Corner
flag anchors the card. Black and desaturated taupe colors are
neutral, businesslike and complement the photo. The plane,
back in open space, is free to fly. Sharp, hierarchical, clear.

Angled & fast

CAPITOL
AIR CHARTER

Richard Ryan 916-796-5674 capitolaircharter.com

Angle matches the italics. Name is
aligned right; second line is indented
2 pts to match the angle.

    2 of 10   

Design talk   0662


Before&After 
®

Design talk

BAmagazine.com

3 of 10


i U X

Layout Separate the fields
Here’s the problem. Your ad has two focal points—a powerful photo and the name of the product.
How do you keep them from competing? The easiest way is to keep them apart; put the photo in one
field and the words in another, then share colors and alignments. Like this:

Make two fields, one
for the photo and one for
the words.

Show the product Make
her face big as possible, and
center it (more or less). Note
sightlines lead the eye.

Darken the text panel,
here, with eye-shadow color,
which connects the fields
and brings her face forward.

Design the text Set blushcolored VIO sideways to
leave a buffer zone, across
which a lipstick-color . . .

. . . headline is scrawled. Note
typestyles are extremely different, but the huge size differences keep them compatible.

    3 of 10   


Design talk   0662


Before&After 
®

Design talk

BAmagazine.com

4 of 10

i U X

Layout Massive typeface makes a powerful cover
Font Bureau’s Giza Nine Five typeface is so massive that a word forms a nearly solid block,
which gives it a mighty voice and makes it easy to design. Work to its strengths:

fighting the bassetts

Rectangular slab serifs
The boldest of five weights in the
Giza type family, Nine Five’s massive shapes are strongly rectangular and have almost no negative
space. Result: Words can be effectively stacked like blocks. In this
design, they’re sized to fit edge to
edge; note below that even without paper, the four elements alone
define the space.

fighting the bassetts


fighting the bassetts

fighting the bassetts

Early afternoon, September 19, 2006, campers spotted a tiny wildfire on the
side of Gold Lake Highway across from the Sardine Lakes turn-in. Fueled
by dry manzanita, steep terrain and strong afternoon winds, it quickly raced
up the hillside and out of control. This is the story of what happened next.

Early afternoon, September 19, 2006, campers spotted a tiny wildfire on the
side of Gold Lake Highway across from the Sardine Lakes turn-in. Fueled
by dry manzanita, steep terrain and strong afternoon winds, it quickly raced
up the hillside and out of control. This is the story of what happened next.

Note the four blocks have different
textures and values. The top block
is the blackest, fire is a flat slab,
and the text has a detailed, toothy
feel. The differences yield separation and visual interest.

Geometric forces

fighting the bassetts

Early afternoon, September 19, 2006, campers spotted a tiny wildfire on the
side of Gold Lake Highway across from the Sardine Lakes turn-in. Fueled
by dry manzanita, steep terrain and strong afternoon winds, it quickly raced
up the hillside and out of control. This is the story of what happened next.


Organic forces

Photo by Mike Warner

Nine
Seven
Five
Three
One

Visual forces
Rectangles have several unique
properties that include flat, stable
sides and diagonal axes that converge in the center, pulling the
eye strongly inward. The photo
has similar inward pull—somewhat unusual—which makes the
layout doubly strong.

    4 of 10   

Design talk   0662


Before&After 
®

Design talk

i U X


BAmagazine.com

5 of 10

Layout Design a bold, sleeve-style cover
Need a bold, easy-to-make cover for a simple document? This technique simulates a wraparound sleeve. Draw a solid, horizontal band, then place your words atop it, like this:

Can’t print to the edge? Do this:

HOME
LOANS

HOME
LOANS

HOME
LOANS

Underwriting
Guidelines

HOME
LOANS

Underwriting
Guidelines

HOME
LOANS


Underwriting
Guidelines

Underwriting
Guidelines

•

ARM (Adjustable Rate Mortgage)

•

ARM (Adjustable Rate Mortgage)

•

ARM (Adjustable Rate Mortgage)

•

ARM (Adjustable Rate Mortgage)

•

First Mortgages

•

First Mortgages


•

First Mortgages

•

First Mortgages

•

Second Mortgages

•

Second Mortgages

•

Second Mortgages

•

Second Mortgages

•

BFS (Business For Self)

•


BFS (Business For Self)

•

BFS (Business For Self)

•

BFS (Business For Self)

•

Personal Loans

•

Personal Loans

•

Personal Loans

•

Personal Loans

BANKMB HOME LOANS | 2134 LAKE DRIVE, AUGUSTA, WI, 54722 | 715-123-4567 | www.bankmbloan.com

BANKMB HOME LOANS | 2134 LAKE DRIVE, AUGUSTA, WI, 54722 | 715-123-4567 | www.bankmbloan.com


Align the elements  (Above) Divide the page
into columns, align your type, and add the horizontal band. Color to suit the topic—note the
headline has the most contrast—and add a
shadow if you’d like. Below, an asymmetrical layout is active; a centered layout is more placid.

Asymmetrical

BANKMB HOME LOANS | 2134 LAKE DRIVE, AUGUSTA, WI, 54722 | 715-123-4567 | www.bankmbloan.com

Underwriting
Guidelines
•

ARM (Adjustable Rate Mortgage)

•

First Mortgages

•

Second Mortgages

•

BFS (Business For Self)

•

Personal Loans


Set a margin and
trim the band evenly
to fit it.

BANKMB HOME LOANS | 2134 LAKE DRIVE, AUGUSTA, WI, 54722 | 715-123-4567 | www.bankmbloan.com

Add a light field in the
background, thereby
“redefining” the space.

BANKMB HOME LOANS | 2134 LAKE DRIVE, AUGUSTA, WI, 54722 | 715-123-4567 | www.bankmbloan.com

Centered

    5 of 10   

Design talk   0662


Before&After 
®

Design talk

6 of 10

BAmagazine.com

i U X


Web Greet your online viewers
Syd Lieberman is a professional storyteller, teacher and author—and a guy who literally is
his business! To picture that on his Web site, he “greets you at the door” like an old friend with
stories to tell. Here’s how he crafted an appealing first impression:
www.sydlieberman.com

Soft color Three horizontal bands
are used for the title, navigation
and the short intro. These are softened by warm, earthy colors with
just a hint of a gradient and shadow (above). Mid-page navigation is
unusual and effective.

A photographic interrupter
Organic-shape photo interrupts the
horizontal lines and stops the eye.
Faint shadow adds depth. Note
how the open space around each
element—Syd, title, and opening
text—lets each be clearly seen.
Desaturated wardrobe A BIG image will be shocking if it’s also bright, but his nearly colorless clothes
blend easily with the desaturated background to convey a warm, approachable image.

    6 of 10   

Design talk   0662


Before&After 
®


Design talk

BAmagazine.com

7 of 10

i U X

Repeat the look inside—but smaller
Inside is where that mid-page navigation bar goes to work. The home-page design is condensed
into a header that runs atop every page and allows each topic to open beneath it.

Continuity is as important in design as it is in
story­telling. Inside, the home-page elements—brown
field, title, navigation, Syd, and their spatial relationships (above)—are condensed at the top and serve
as a page-by-page touchstone through the site.

Fixed

Change

Literary headline  Handsome, book-style type is a key
design element. Note that Syd’s name is fixed on the left,
while words on the right change. Simple and effective.

Light gradients ­differentiate
interior pages from the home
page and also allow better contrast with images, text, buttons
and other elements.


    7 of 10   

Design talk   0662


Before&After 
®

Design talk

BAmagazine.com

8 of 10

i U X

Article resources

Typefaces
1
2

CAPITOL
AIR CHARTER

Richard Ryan 916-796-5674 capitolaircharter.com

3a


Colors

1 Helvetica Neue Std Bold Condensed
Oblique | 12 pt

9

10 C53 M50 Y50 K16

2 Helvetica Neue Std Thin Condensed
Oblique | 12 pt
7
9
10
ECLIPSE 500

C30 M30 Y30 K100

11 C70 M53 Y37 K70

3 (a–b) Helvetica Neue Std Light
Condensed Oblique | a) 8 pt; b) 5 pt

12 C16 M76 Y59 K3

4 P22 Cezanne

13 C9 M30 Y28 K0

5 Helvetica Neue Std Light Extended

6 H&FJ Didot Light Roman (24 pt Master)

3b

4

Images
11
12
13

7 Image courtesy of Eclipse Aviation
www.eclipseaviation.com
8 iStockphoto.com

6
8

5

    8 of 10   

Design talk   0662


Before&After 
®

Design talk


BAmagazine.com

9 of 10

i U X

Article resources

Typefaces
1

1 Giza Nine Three | 42.3 pt

fighting the bassetts
HOME
LOANS

2
3
4

Colors

Early afternoon, September 19, 2006, campers spotted a tiny wildfire on the
side of Gold Lake Highway across from the Sardine Lakes turn-in. Fueled
by dry manzanita, steep terrain and strong afternoon winds, it quickly raced
up the hillside and out of control. This is the story of what happened next.

Underwriting
Guidelines


9
10
11

•

ARM (Adjustable Rate Mortgage)

•

First Mortgages

•

Second Mortgages

•

BFS (Business For Self)

•

Personal Loans

Photo by Mike Warner

BANKMB HOME LOANS | 2134 LAKE DRIVE, AUGUSTA, WI, 54722 | 715-123-4567 | www.bankmbloan.com

5


10

2 Giza Nine Five | 219 pt

12

3 ITC Franklin Gothic Heavy | 16 pt

13

4 Adobe Caslon Regular | 19.3/20 pt

6
7a

10 C0 M0 Y0 K100
11 C20 M100 Y100 K20
12 C15 M80 Y40 K65

5 ITC Franklin Gothic Book | 7 pt
6 Century Old Style Std Bold | 40/41 pt

13 C0 M5 Y30 K15

7 (a–b) Helvetica Neue Std Light
a) 13.5/23 pt; b) 8 pt
8 Helvetica Neue Bold | a) 8 pt

Images

8

7b

9 Mike Warner | www.wildbryde.com

    9 of 10   

Design talk   0662


Before&After 
®

Design talk

10 of 10

Subscribe to Before & After
Subscribe to Before & After, and become a
more capable, confident designer for pennies
per article. To learn more, go to
/>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
/>
BAmagazine.com


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
Before & After magazine
323 Lincoln Street, Roseville, CA 95678
Telephone 916-784-3880
Fax 916-784-3995
E-mail
www
Copyright ©2007 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: .
For all other permissions, please contact us.

    10 of 10   |     Printing formats   

Design talk   0662



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 1–10)

For paper-saver format
Print: (Specify pages 12–16)

Print
Format: Landscape
Page Size: Fit to Page

Save
Presentation format or
Paper-saver format

    Back   |     Paper-saver format   



DesignTalk13

First Mortgages
Second Mortgages
BFS (Business For Self)
Personal Loans

ECLIPSE 500

Richard Ryan 916-796-5674 capitolaircharter.com

Richard Ryan 916-796-5674 capitolaircharter.com

Richard Ryan 916-796-5674 capitolaircharter.com

Angle matches the italics. Name is
aligned right; second line is indented
2 pts to match the angle.

Design Talk 13: Five Design Ideas  0662



Organized Card  

After

CAPITOL

AIR CHARTER

ECLIPSE 500

ARM (Adjustable Rate Mortgage)

FiveDesignIdeas
Separate Fields
Sleeve-Style Cover

CAPITOL
AIR CHARTER

Massive Typeface
Home Page Greeting

Layout Organize that card

capitolaircharter.com

Our friend Richard finances his love of flying by operating a one-jet air-charter service here on
the West Coast. And it’s easy to see where his heart is—he pilots a state-of-the-art jet but prints his
business cards on his desktop. Let’s see if we can get those cards looking as fast as his airplane.

Before

Eclipse 500

CAPITOL
AIR CHARTER


Fast The words have been pulled off the photo and into line,
which is how we read. Light italics typeface looks fast. Corner
flag anchors the card. Black and desaturated taupe colors are
neutral, businesslike and complement the photo. The plane,
back in open space, is free to fly. Sharp, hierarchical, clear.

Angled & fast

1  of  5

Before&After | www.bamagazine.com

Boxy & slow

Slow The factory supplied a ­good photo, but Richard
made a common mistake—he filled its open spaces with
words. These “trap” the airplane and, lacking hierarchy,
send a fragmented message. His name in aviation blue was
a good idea but is too bright for the desaturated photo.
And Times Roman type, while excellent for text, is too fussy
for the sleek subject matter. Shadows muddy it further.

0662  Design Talk 13: Five Design Ideas




Layout Separate the fields


Darken the text panel,
here, with eye-shadow color,
which connects the fields
and brings her face forward.

Design the text Set blushcolored VIO sideways to
leave a buffer zone, across
which a lipstick-color . . .

Early afternoon, September 19, 2006, campers spotted a tiny wildfire on the
side of Gold Lake Highway across from the Sardine Lakes turn-in. Fueled
by dry manzanita, steep terrain and strong afternoon winds, it quickly raced
up the hillside and out of control. This is the story of what happened next.

2  of  5

Before&After | www.bamagazine.com

. . . headline is scrawled. Note
typestyles are extremely different, but the huge size differences keep them compatible.

Geometric forces

Organic forces

Visual forces
Rectangles have several unique
properties that include flat, stable
sides and diagonal axes that converge in the center, pulling the
eye strongly inward. The photo

has similar inward pull—somewhat unusual—which makes the
layout doubly strong.

Design Talk 13: Five Design Ideas  0662





Show the product Make
her face big as possible, and
center it (more or less). Note
sightlines lead the eye.

Here’s the problem. Your ad has two focal points—a powerful photo and the name of the product.
How do you keep them from competing? The easiest way is to keep them apart; put the photo in one
field and the words in another, then share colors and alignments. Like this:

Make two fields, one
for the photo and one for
the words.

Layout Massive typeface makes a powerful cover

fighting the bassetts

fighting the bassetts

Font Bureau’s Giza Nine Five typeface is so massive that a word forms a nearly solid block,
which gives it a mighty voice and makes it easy to design. Work to its strengths:


fighting the bassetts

Early afternoon, September 19, 2006, campers spotted a tiny wildfire on the
side of Gold Lake Highway across from the Sardine Lakes turn-in. Fueled
by dry manzanita, steep terrain and strong afternoon winds, it quickly raced
up the hillside and out of control. This is the story of what happened next.

Rectangular slab serifs
The boldest of five weights in the
Giza type family, Nine Five’s massive shapes are strongly rectangular and have almost no negative
space. Result: Words can be effectively stacked like blocks. In this
design, they’re sized to fit edge to
edge; note below that even without paper, the four elements alone
define the space.

fighting the bassetts

Nine
Seven
Five
Three
One
fighting the bassetts

Early afternoon, September 19, 2006, campers spotted a tiny wildfire on the
side of Gold Lake Highway across from the Sardine Lakes turn-in. Fueled
by dry manzanita, steep terrain and strong afternoon winds, it quickly raced
up the hillside and out of control. This is the story of what happened next.


Note the four blocks have different
textures and values. The top block
is the blackest, fire is a flat slab,
and the text has a detailed, toothy
feel. The differences yield separation and visual interest.

0662  Design Talk 13: Five Design Ideas

Photo by Mike Warner


HOME
LOANS

Layout Design a bold, sleeve-style cover

HOME
LOANS

Can’t print to the edge? Do this:

HOME
LOANS

•

•

•


•

•

Personal Loans

BFS (Business For Self)

Second Mortgages

First Mortgages

ARM (Adjustable Rate Mortgage)

•

•

•

•

•

Personal Loans

BFS (Business For Self)

Second Mortgages


First Mortgages

ARM (Adjustable Rate Mortgage)

•

•

•

•

•

Personal Loans

BFS (Business For Self)

Second Mortgages

BFS (Business For Self)

Second Mortgages

First Mortgages

Add a light field in the
background, thereby
“redefining” the space.


www.sydlieberman.com

Desaturated wardrobe A BIG image will be shocking if it’s also bright, but his nearly colorless clothes
blend easily with the desaturated background to convey a warm, approachable image.

Design Talk 13: Five Design Ideas  0662



HOME
LOANS

Need a bold, easy-to-make cover for a simple document? This technique simulates a wraparound sleeve. Draw a solid, horizontal band, then place your words atop it, like this:

HOME
LOANS

ARM (Adjustable Rate Mortgage)

•

Personal Loans

ARM (Adjustable Rate Mortgage)

First Mortgages

•

First Mortgages


Second Mortgages

Underwriting
Guidelines

BFS (Business For Self)

Underwriting
Guidelines

Personal Loans

Underwriting
Guidelines

•

Underwriting
Guidelines
•

•

ARM (Adjustable Rate Mortgage)

•

Underwriting
Guidelines


•

•

•

BANKMB HOME LOANS | 2134 LAKE DRIVE, AUGUSTA, WI, 54722 | 715-123-4567 | www.bankmbloan.com

Set a margin and
trim the band evenly
to fit it.

•

Centered

Align the elements  (Above) Divide the page
into columns, align your type, and add the
horizontal band. Color to suit the topic—note
the headline has the most contrast—and add a
shadow if you’d like. Below, an asymmetrical layout is active; a centered layout is more placid.

Asymmetrical

Web Greet your online viewers

3  of  5

Before&After | www.bamagazine.com


A photographic interrupter
Organic-shape photo interrupts the
horizontal lines and stops the eye.
Faint shadow adds depth. Note
how the open space around each
element—Syd, title, and opening
text—lets each be clearly seen.

Syd Lieberman is a professional storyteller, teacher and author—and a guy who literally is
his business! To picture that on his Web site, he “greets you at the door” like an old friend with
stories to tell. Here’s how he crafted an appealing first impression:

Soft color Three horizontal bands
are used for the title, navigation
and the short intro. These are
softened by warm, earthy colors
with just a hint of a gradient and
shadow (above). Mid-page navigation is unusual and effective.

0662  Design Talk 13: Five Design Ideas




Repeat the look inside—but smaller

ECLIPSE 500

8 iStockphoto.com


7 Image courtesy of Eclipse Aviation
www.eclipseaviation.com

Images

6 H&FJ Didot Light Roman (24 pt Master)

5 Helvetica Neue Std Light Extended

4 P22 Cezanne

3 (a–b) Helvetica Neue Std Light
Condensed Oblique | a) 8 pt; b) 5 pt

2 Helvetica Neue Std Thin Condensed
Oblique | 12 pt

1 Helvetica Neue Std Bold Condensed
Oblique | 12 pt

Typefaces

Light gradients ­differentiate
interior pages from the home
page and also allow better contrast with images, text, buttons
and other elements.

3a


7
9
10
3b

11
12
13
6

Colors
9

10 C53 M50 Y50 K16
11 C70 M53 Y37 K70
12 C16 M76 Y59 K3
13 C9 M30 Y28 K0

Design Talk 13: Five Design Ideas  0662



5

4

Richard Ryan 916-796-5674 capitolaircharter.com

8


4  of  5

Before&After | www.bamagazine.com

C30 M30 Y30 K100

Inside is where that mid-page navigation bar goes to work. The home-page design is condensed
into a header that runs atop every page and allows each topic to open beneath it.

Change

Continuity is as important in design as it is in
story­telling. Inside, the home-page elements—
brown field, title, navigation, Syd, and their spatial
relationships (above)—are condensed at the top and
serve as a page-by-page touchstone through the site.

Fixed

CAPITOL
AIR CHARTER

Article resources

Literary headline  Handsome, book-style type is a key
design element. Note that Syd’s name is fixed on the left,
while words on the right change. Simple and effective.

1
2


0662  Design Talk 13: Five Design Ideas




1

Article resources

fighting the bassetts

Early afternoon, September 19, 2006, campers spotted a tiny wildfire on the
side of Gold Lake Highway across from the Sardine Lakes turn-in. Fueled
by dry manzanita, steep terrain and strong afternoon winds, it quickly raced
up the hillside and out of control. This is the story of what happened next.

HOME
LOANS

•

•

•

BFS (Business For Self)

Second Mortgages


First Mortgages

ARM (Adjustable Rate Mortgage)

Underwriting
Guidelines
•

Personal Loans

7b

BANKMB HOME LOANS | 2134 LAKE DRIVE, AUGUSTA, WI, 54722 | 715-123-4567 | www.bankmbloan.com

•

8

Typefaces
2 Giza Nine Five | 219 pt

1 Giza Nine Three | 42.3 pt
10
3 ITC Franklin Gothic Heavy | 16 pt

7 (a–b) Helvetica Neue Std Light
a) 13.5/23 pt; b) 8 pt

6 Century Old Style Std Bold | 40/41 pt


5 ITC Franklin Gothic Book | 7 pt

4 Adobe Caslon Regular | 19.3/20 pt

12
13
6
7a
8 Helvetica Neue Bold | a) 8 pt

Images

Colors
10 C0 M0 Y0 K100
11 C20 M100 Y100 K20
12 C15 M80 Y40 K65
13 C0 M5 Y30 K15

Design Talk 13: Five Design Ideas  0662

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: .
For all other permissions, please contact us.

Copyright ©2007 Before & After magazine
ISSN 1049-0035. All rights reserved


Before & After magazine
323 Lincoln Street, Roseville, CA 95678
Telephone 916-784-3880
Fax 916-784-3995
E-mail
www

John McWade Publisher and creative director
Gaye McWade Associate publisher
Dexter Mark Abellera Staff designer

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.

9 Mike Warner | www.wildbryde.com

5  of  5

Before&After | www.bamagazine.com



2
3
4
9

10
11

0662  Design Talk 13: Five Design Ideas

/>
they become available, go to

To be notified by e-mail of new articles as

Join our e-list

others, click here.

To pass along a free copy of this article to

E-mail this article

/>
per article. To learn more, go to

more capable, confident designer for pennies

Subscribe to Before & After, and become a

Subscribe to Before & After

5

Photo by Mike Warner