David Kadavy
 |
| Design for Hackers Reverse-Engineering Beauty |
About the Author
DAVID KADAVY is president of Kadavy, Inc., a user interface design consultancywith clients including oDesk, PBworks, and UserVoice, and mentor at the 500
Startups seed fund. Previously, David led the design departments of two Silicon
Valley startups and an architecture fi rm, taught a college course in typography, and
studied ancient typography in Rome while earning his BFA in graphic design at
Iowa State University. David’s design work has been featured in Communication
Arts magazine, and he has spoken at the South by Southwest (SXSW) Interactive
conference. David blogs about design and entrepreneurship at kadavy.net and can
be reached on Twitter at the handle @kadavy or by e-mail at david@kadavy.net.
Acknowledgments
It seems strange that I should even have the privilege of putting my name on
the front of this book, as it is a product of the work, talent, and inspiration of
so many people. I have merely synthesized and fi ltered stimuli and processed it
as best I could with the point of view that I have formed over the years.
More than anyone, I would like to thank my acquisitions editor, Chris Webb,
for having the vision and guts to publish a book that another publisher
dismissively referred to as “ambitious.” I would also like to thank my editor,
Elizabeth Kuball, for her invaluable guidance and skill in turning what can
sometimes be an incoherent mess into writing that I am truly proud of. I also
want to thank my technical editor, Jason Simanek; I’m so grateful that our
kindred yet complementary minds were fi nally able to collaborate, and I’m so
glad that you were up for the challenge when it arrived.
The content of this book has been reviewed by a few enthusiastic reviewers who
selfl essly donated their time and intelligence for no more payment than what I
presume to be a premature satiation of their curiosity and what follows. So,
thank you Chris Duesing, Zack Gilbert, Jacob Rus, and Paul Stamatiou.
A great deal of useful knowledge is still locked up in libraries around the world,
but the incredible amount of information and visual resources freely available
on the Internet made writing this book much easier. So, thank you to all the
great contributors to the Internet, from Wikipedia contributors, to bloggers, to
photographers and illustrators who make their work available under a Creative
Commons license on Flickr, Wikimedia, or anywhere else.
The viewpoint I present in this book is, in part, thanks to the infl uence of my
professors at Iowa State University. Th ank you to Arthur Croyle, who was the
best teacher I could have had to teach me about the origins of typography in
Rome. Th ank you also to Gary Tartakov, whose lectures shared a socioeconomic
viewpoint on design and art history like none other. Th ank you to Paula Curran,
whose methodical approach to design problems was an inspiration.
The content and point of view of this book are also a product of the infl uence
of artists, authors, designers, architects, teachers, and entrepreneurs, as well as
anyone, anywhere, ever, who has had the bravery to truly explore what he or
she had to off er the world. I will certainly leave out someone deserving of
mention, but here is my attempt: Jan Tschichold, Robert Bringhurst,
Malcom Gladwell, Seth Godin, Tim Ferriss, Steve Jobs, Vincent van Gogh,
Dave Eggers, Jane Austen, and Mies van der Rohe. Th anks to all of you, to the
fi rst person to ever discover how to start a fi re, and to anyone who ever did
anything novel and creative thereafter and taught someone else about it.
This book probably never would have been written were it not for an unlikely
chain of events that brought me the privilege of living and working in Silicon
Valley during one of its most exciting periods. Th at time exposed me to the
most creative cowboys and cowgirls I’ve ever encountered, so thank you to all
of you and to everyone I ever met who was like you but didn’t happen to live in
Silicon Valley. So, thank you to Jeff Cannon and Jon Stevenson for getting me
there. Also, thank you to Vinnie and Kristine Lauria, Noah Kagan, Paul
Bragiel, and Ramit Sethi for being inspiring in your own ways. I would have
put all of you in the preceding paragraph, but because I know you personally,
that would have been weird.
Thank you to Ryan Halvorsen, Joe Avella, and Matt Taets for being inspiring
friends at all the right times. Th ank you to Ziad Hussain for saying one
statement that became the impetus for this book.
Finally, thank you to you, who is standing there, or sitting there, or lying there,
reading this book or receiving these ideas and concepts as brain input through
some not yet invented device. Th e presence of your eyeballs (or synapses), the
beating of your heart, the encouraging words – or the constructive criticism –
you have provided through blog comments, tweets, e-mails, or taking the time
to see me in person have powered me through what has been the biggest project
of my life thus far. I’m so thrilled to share this with you, and I’m blown away
by your willingness to receive it. Th ank you so, so much.
Introduction
WHEN I WAS in grade school, handwriting was my worst subject. I had
terrible handwriting. It looked like a woodchuck had barfed a bunch of twigs
onto a piece of paper. So, each quarter, when I was sent home with my report
card, it was full of A’s and B’s . . . and one C-, in penmanship.
Never having been one to blindly accept convention, I asked why it even
mattered if I had decent handwriting. It’s probably no surprise that I thought
handwriting was “stupid,” even “a waste of time.” I was too young to respect
the merits of something at which I had no hope of succeeding (though
seriously, grading on penmanship is stupid and a waste of time).
No matter how many times I asked, I was always told the same thing: “When
you grow up and get a job, you’ll need to be able to communicate clearly. You
need good handwriting to communicate clearly.”
Th ank goodness computers took over. My handwriting is still terrible. Oh, I
can draw letters, but I certainly can’t write them.
Today I understand that at the root of my educators’ intentions was something
valuable: Clear communication is critical to success. Luckily for me, I rarely
have to rely upon my handwriting to communicate clearly. I can simply type
an e-mail, make a slide presentation, or write a book, and it will be rendered in
crisp, beautiful typography. Many of these letterforms were perfected over 500
years ago, and they still carry words with strength and clarity today.
Additionally, I have spent years studying the subtleties of visual communication.
I passed countless boring Nebraska days as a child, drawing in my room. I got
my degree in graphic design, while exhausting the university library’s supply of
typography and design books – skipping keggers so I could conduct
experiments with typography and geometry. I studied the very origins of
modern typography in the ruins of the ancient Roman Empire. I’ve even
discussed the hidden meaning of something as simple as a brick or a piece of
wood, while working at an architecture fi rm. Finally, I’ve implemented the
terrible handwriting. It looked like a woodchuck had barfed a bunch of twigs
onto a piece of paper. So, each quarter, when I was sent home with my report
card, it was full of A’s and B’s . . . and one C-, in penmanship.
Never having been one to blindly accept convention, I asked why it even
mattered if I had decent handwriting. It’s probably no surprise that I thought
handwriting was “stupid,” even “a waste of time.” I was too young to respect
the merits of something at which I had no hope of succeeding (though
seriously, grading on penmanship is stupid and a waste of time).
No matter how many times I asked, I was always told the same thing: “When
you grow up and get a job, you’ll need to be able to communicate clearly. You
need good handwriting to communicate clearly.”
Th ank goodness computers took over. My handwriting is still terrible. Oh, I
can draw letters, but I certainly can’t write them.
Today I understand that at the root of my educators’ intentions was something
valuable: Clear communication is critical to success. Luckily for me, I rarely
have to rely upon my handwriting to communicate clearly. I can simply type
an e-mail, make a slide presentation, or write a book, and it will be rendered in
crisp, beautiful typography. Many of these letterforms were perfected over 500
years ago, and they still carry words with strength and clarity today.
Additionally, I have spent years studying the subtleties of visual communication.
I passed countless boring Nebraska days as a child, drawing in my room. I got
my degree in graphic design, while exhausting the university library’s supply of
typography and design books – skipping keggers so I could conduct
experiments with typography and geometry. I studied the very origins of
modern typography in the ruins of the ancient Roman Empire. I’ve even
discussed the hidden meaning of something as simple as a brick or a piece of
wood, while working at an architecture fi rm. Finally, I’ve implemented the
fruits of all this practice and analysis in the fast-paced environment of Silicon
Valley startups. Design and visual communication is so deeply embedded in my
brain that I’m hardly aware of its presence. My handwriting still sucks, though.
Design as Literacy
One evening, I was “moworking” in a cafe with my friend Ziad, coding some
design tweaks to the WordPress template for my blog. Ziad always has a way of
saying abstract things that break my concentration and split my brain wide
open, and this evening was no exception: “Design is this mysterious thing. Th e
people who know it can’t seem to explain it. It’s like if you want them to teach
you something about design, they just chalk it up to talent.”
Ziad’s comment did strike me as interesting, but the true weight of it took
about a year to sink in. First came the realization that someone who wasn’t a
designer by trade would actually want to learn about design. Being able to
design was something I had taken for granted. It was a great skill to have,
especially when creating my own apps or participating in weekend hackathons,
such as Django Dash or Rails Rumble. I could create this perception of quality,
this value, out of thin air. But, not being much of a back-end coder, I was
envious of the fact that my design wasn’t worth a thing without the magic
robot words behind it, which developers knew how to create.
Second, I realized that design skills are a new kind of literacy. Th e whole reason
why I had suff ered the consequences of poor handwriting was because
handwriting was a part of communication. Th e only reason that I could write
anything at all was that I was literate.
Th is idea sounds very simple, but it’s pretty novel in the scope of human
history. Most people today know how to read and write, but even just a couple
hundred years ago, this was not the case. For people to learn how to write, they
had to know how to read. For people to learn how to read, they had to have
access to writing. To have access to writing, someone with the ability to read
and write would have to produce something with writing in it, like a book.
But books have only recently been aff ordable to common people in the
civilized world. Johannes Gutenberg printed the fi rst book, the so-called “42-
line Bible” (see Chapter 3) in 1455. Books very rapidly dropped in price over the
next hundred years, but before Gutenberg’s Bible, books had to be written by
hand. So, it’s no surprise that few people, aside from the clergy, knew how to
read or write.
Today’s world is, of course, vastly diff erent. Not only can most of us read
and write, but we don’t even have to worry about our handwriting. Desktop
publishing, and even the ability to publish on the Internet, is available to the
majority of people in the industrialized world.
Not only can we publish our words, but we can design them. We have access
to thousands of fonts. We can change colors and sizes of fonts with a few clicks.
We can edit and publish photos and illustrations alongside our words.
We’re all modern-day printers. We can create fl yers, postcards, and PowerPoint
presentations complete with animations. We can create blogs, posters, and even
coff ee mugs.
But few of us are design literate. Sure, matters of design taste are starting to
creep into our world. Th ere are backlashes over ugly fonts, such as Comic Sans
(see Chapter 3). Much like having poor handwriting, not having design literacy
results in miscommunication. Fonts, colors, layout, and the proper use of white
space all aff ect how our message is conveyed, and nearly all of us have the
ability to manipulate these factors. Th e world is in need of design literacy.
The Hacker Attitude
No group stands to gain more from design literacy than hackers do. No, I don’t
mean computer geeks who break into networks and steal passwords. I don’t
even necessarily mean software developers. I mean the renegade group of
entrepreneurially minded people who are transforming the way we live, work,
and interact.
Th ough the term hacker originated at MIT in the 1960s and was used to refer to
a particular group of computer and software enthusiasts, to many, the term has
a broader meaning. An article by Eric Steven Raymond entitled “How to
Become a Hacker” (www.catb.org/~esr/faqs/hacker-howto.html)
presents fi ve tenets of the hacker attitude:
> Th e world is full of fascinating problems waiting to be solved.
> No problem should ever have to be solved twice.
> Boredom and drudgery are evil.
> Freedom is good.
> Attitude is no substitute for competence.
In short, a hacker values knowledge and learns whatever he needs to learn to
achieve his vision. In today’s world, that often means learning at least a little
coding, but the hacker attitude can be applied to problem solving of all kinds.
People who live by the hacker attitude are curious. Th ey do whatever it takes to
achieve their visions. Th ey’re entrepreneurial. Th ey value skills and knowledge
over titles and experience.
At the forefront of the hacker movement is the Hacker News community
(http://news.ycombinator.com), a news aggregation site contributed
to by followers of Paul Graham’s Y Combinator entrepreneurial incubator
program. Th e program tends to fund small teams of hackers who have used
their skills and hacker attitude to build cool products that solve problems:
UserVoice (www.uservoice.com) democratizes customer support; Reddit
(www.reddit.com) democratizes news; Dropbox (www.dropbox.com)
provides an easy, automatic backup solution; and AirBNB (www.airbnb.
com) turns extra bedrooms into places for travelers to stay.
Hackers are the scribes of the modern world. Th ey build products and
businesses that not only communicate, but that users interact with and use to
communicate with each other. Armed with a laptop, an idea, and a few hours
to code, a hacker can build something that reaches millions.
Hackers are able to accomplish so much in so little time because they come from
a community that’s built upon sharing knowledge. Th ey benefi t from billions of
collective hours that these members of this community have invested in writing
software, manuals, and other tutorials with which to empower one another.
Th ey can learn whatever it is that they need to learn to solve the problem at
hand. If they run into a coding problem, they can do a quick Google search or
read a manual. If their business takes off and they have to do accounting or
bookkeeping, they can fi nd more of what they’re looking for on the Internet or
read a book from the library.
The Gap in Design Knowledge
Th e one subject that is exceedingly frustrating for hackers to try to learn is
design. Hackers know that in order to compete against corporate behemoths
with just a few lines of code, they need to have good, clear design, but the
resources with which to learn design are simply hard to fi nd. Th ey might hire a
designer to help them out, but good designers are expensive and, when you’re
bootstrapping a startup, you just don’t have the money to spend.
Th e main reason for the diffi culty in learning design is probably that designers
tend to have diffi culty articulating the process through which they make
decisions. Many designers are, in fact, born with some degree of innate talent and
interest in design, and, through countless hours of practice and experimentation,
they’ve developed their particular approach to design. As a result, much of the
design advice that exists is either too simple or too complicated. Have you ever
heard anyone tell you simply to “use white space,” for example? If you don’t get
it, she may just shrug her shoulders and say that she was just born knowing how
to design.
But the truth is, there really is a thought process – a decision-making
framework – behind design. Th e nuances of white space, for example, are
actually infl uenced by geometric proportion, which I’ll discuss in Chapter 5.
Chunks of white space are a part of compositional forces, which I’ll explain in
Chapter 6. Finally, white space can be instrumental in making clear what
information is most important, as I’ll explain in Chapter 7.
With this book, I hope not just to provide you with simplistic rules about
design, but to expose the methodical thought framework that I’ve developed
from years of experimentation and analysis – a thought framework that I
implement even as I collaborate with a team of developers on launching a
product in a single weekend, or create a design solution for a client with
limited funding. By “reverse-engineering” the design process, I hope to provide
you with knowledge that can sustain you across a variety of situations.
If you want to learn to create great design yourself, if you want to gain design
literacy, there simply is no way to do so with lists of rules. Instead, I want to
provide you with a new set of eyes through which you can see the world anew.
After reading this book, you still may not be totally satisfi ed with the very next
design that you create. But the next time you see a design you like, you’ll see it
in a new way. You’ll notice how the font choices are appropriate to the subject
matter. You’ll see how the proportions between various parts of the design
relate to one another. You’ll notice how the designer achieved clarity in
diff erentiating pieces of information. And you’ll see how the colors relate to
one another to communicate and emote.
Th is is my tiny contribution to the collective billions of hours the hacker
community has invested, and I’m looking forward to sharing it with you.
Contents
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Design as Literacy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Th e Hacker Attitude . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Th e Gap in Design Knowledge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Part I: Understanding Design
CHAPTER 1
Why Design Matters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
What Design Really Is . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
What Design Is Not . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Th e Layers of Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Medium and technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Aesthetic decisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
CHAPTER 2
Th e Purpose of Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Visual Design and Its Relation to User Experience Design . . . . . . . . . . . . 21
Th e basics of user experience design . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Th e visual design of one product versus another . . . . . . . . . . . . . . . . . 24
Sometimes a Visual Design Is Just Good Enough . . . . . . . . . . . . . . . . . . 25
Sometimes Visual Design Is Your Advantage . . . . . . . . . . . . . . . . . . . . . . 26
Reverse-Engineering the Twitter User Experience . . . . . . . . . . . . . . . . . . 28
User personas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Use cases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Wireframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Knowledge Applied . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Part II: Medium and Form
CHAPTER 3
Medium and Form in Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Th e Tragedy of Misuse: Why You Hate Comic Sans . . . . . . . . . . . . . . . . 38
Th e Shackles of the Typographer: Th e Unalterable Word . . . . . . . . . . . . 45
Th e Formation of Our Alphabet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Th e Birth of Our Letters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Th e Twitter of the Roman Empire . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Th e height of Roman typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Th e Type Th at Has Lived On . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Th e invention and spread of printing . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Punchcutting: Th e cradle of the unalterable word . . . . . . . . . . . . . . . . 64
Venice and the Renaissance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
France and Garamond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Garamond Today: Why You Don’t Use Garamond on the Web . . . . . . . 66
Th e birth of the “web font” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
A great leap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Bridging the gap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Limitations can be embraced – even parodied . . . . . . . . . . . . . . . . . . . 72
Knowledge Applied . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
CHAPTER 4
Technology and Culture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
How Trends Are Created . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Th e birth of Impressionism . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Impressionism and the middle class . . . . . . . . . . . . . . . . . . . . . . . . . 78
Impressionism and photography . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Impressionism and modern art . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Web 2.0 graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
How Apple started the Web 2.0 style . . . . . . . . . . . . . . . . . . . . . . . 83
How Aqua infl uenced the web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
How Aqua met Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Form shapes technology, this time . . . . . . . . . . . . . . . . . . . . . . . . . 90
SEO Is Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Understanding why SEO is important . . . . . . . . . . . . . . . . . . . . . . . . . 93
Choosing the right keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Considering content and coding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Title tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Meta tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Content: em, strong, img . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Authority of linking pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Content of linking pages and of anchor text of links . . . . . . . . . . . 100
Everything in moderation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Getting the content, getting the links . . . . . . . . . . . . . . . . . . . . . . 101
Knowledge Applied . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Part III: Composition
CHAPTER 5
Fool’s Golden Ratio: Understanding Proportions . . . . . . . . . . . . . . . . . 105
What Is Proportion? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Proportion and Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Th e Broken Promise of the Golden Ratio . . . . . . . . . . . . . . . . . . . . . . . 110
Th e golden ratio and the Fibonacci sequence:
Similar, but diff erent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Th e golden ratio in the human form . . . . . . . . . . . . . . . . . . . . . . . . . 113
Misconceptions about the golden ratio . . . . . . . . . . . . . . . . . . . . . . . 115
Th e golden ratio in ancient Greece . . . . . . . . . . . . . . . . . . . . . . . . 115
Th e golden ratio in fi ne art . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Th e golden ratio in nature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Th e golden ratio in psychology . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Other Pleasing Proportions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Th e root 2 rectangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Th e 2:3 rectangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Th e 3:4 rectangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Proportions in Our World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Music and dance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Nature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Computers and mobile devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Proportions at Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Knowledge Applied . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
CHAPTER 6
Holding the Eye: Composition and Design Principles . . . . . . . . . . . . . . 133
Compositional Relationships . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Reading direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Guiding the eye with composition . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Renaissance sculpture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Impressionist paintings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Web design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Foreground/background relationships . . . . . . . . . . . . . . . . . . . . . . . . 141
In Seurat’s painting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
In interface and web design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Design Principles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Dominance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Similarity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Rhythm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Texture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Contrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Why the MailChimp Logo Is Beautiful: Use of Composition
and Design Principles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Foreground/background relationships . . . . . . . . . . . . . . . . . . . . . . . . 159
Dominance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Similarity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Rhythm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Texture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Contrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Knowledge Applied . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
CHAPTER 7
Enlivening Information: Establishing a Visual Hierarchy . . . . . . . . . . . 167
What I Mean by “Hierarchy” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Hierarchy is expressive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Many visual factors can aff ect hierarchy . . . . . . . . . . . . . . . . . . . . . . . 170
Hierarchical Factors in Isolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
White space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Using a grid to manage white space . . . . . . . . . . . . . . . . . . . . . . . . 172
Establishing a hierarchy with white space . . . . . . . . . . . . . . . . . . . 173
Knowing how much white space to use . . . . . . . . . . . . . . . . . . . . . 175
Considering white space and italic font style . . . . . . . . . . . . . . . . . 175
Using a four-column grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Type weight and size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Type weight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Type size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Combining weight and size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Visual ornamentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Hierarchy at Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Knowledge Applied . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Part IV: Color
CHAPTER 8
Color Science . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
What Is Color?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Th e Tricks Your Eyes Play . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Metamerism . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Color constancy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Afterimages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
How the Visual System Works. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Cones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Trichromatic theory and color opponent theory . . . . . . . . . . . . . . . . 202
Mixing of dominant wavelengths and the color wheel . . . . . . . . . . . . 204
Colorblindness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Defi ning Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Munsell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Hue, saturation, and brightness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Lab color model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Color Models and Data-Driven Graphics . . . . . . . . . . . . . . . . . . . . . . . 211
Color and qualitative data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Color and quantitative data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Sequential versus diverging color palettes . . . . . . . . . . . . . . . . . . . . . . 216
Th inking in Hexadecimal Color: Understanding the Colors
of the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Understanding RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
How hexadecimal represents RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Mentally navigating the hexadecimal “cube” . . . . . . . . . . . . . . . . . . . 221
Th e future: HSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Color Models in Action: Why Your Business Card Doesn’t
(and Never Will) Match Your Website . . . . . . . . . . . . . . . . . . . . . . . 225
RGB displays versus CMYK color printing . . . . . . . . . . . . . . . . . . . . 226
Color gamuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Working across media and managing color . . . . . . . . . . . . . . . . . . . . 229
Adobe RGB versus sRGB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
“Proofi ng” and previewing color shifts . . . . . . . . . . . . . . . . . . . . . 231
Printing with spot colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Knowledge Applied . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
CHAPTER 9
Color Th eory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Color Response throughout Human History . . . . . . . . . . . . . . . . . . . . . 237
Color Response and Human Biology . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Th e Power of Red: Why You Don’t Stand a Chance
in the “Target Challenge” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Th e eff ect of red on your brain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Th e prefrontal cortex and rational thought . . . . . . . . . . . . . . . . . . . . 239
Th e attack on your prefrontal cortex . . . . . . . . . . . . . . . . . . . . . . . . . 240
Th e prefrontal cortex and decision-making . . . . . . . . . . . . . . . . . . . . 241
Color and context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
What this means to you . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Research on Other Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Color and Culture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Color Schemes and the Color Wheel . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Color Choices and Web Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
White . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Off -white . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Dark . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Bright . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Graphics and text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Green . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Yellow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Red . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Blue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Accent colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Th e Interaction of Colors: Why Monet Never Used Black . . . . . . . . . . . 255
Th e Impressionists: Masters of color . . . . . . . . . . . . . . . . . . . . . . . . . 256
Color theory: What the Impressionists discovered . . . . . . . . . . . . . . . 256
Warm colors pop, cool colors recede . . . . . . . . . . . . . . . . . . . . . . . 257
Tints pop, shades recede . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Th e importance of context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Temperature versus tint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
How Monet used color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Using color like Monet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Enriching your typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Adding life to your graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Color Schemes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Monochromatic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Analogous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Complementary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Split-complementary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Triadic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Tetradic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Variations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Creating a Mood with Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Mysterious or exclusive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Active . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Muted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Natural . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Tools for Creating Color Palettes and Schemes . . . . . . . . . . . . . . . . . . . 285
Knowledge Applied . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Part V: Appendixes
APPENDIX A
Choosing and Pairing Fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Classifying Typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Serif typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Old style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Transitional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Modern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Slab-serif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Sans-serif typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Display typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Looking At Letter Structure: Th e Form of the Skeleton . . . . . . . . . . . . . 297
Humanist typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Geometric typefaces. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Realist typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Pairing Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Th e rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Th e exception to the rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Why certain fonts pair well . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Texture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Character width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Th e ultimate cheat: Staying faithful to a typographer . . . . . . . . . . . . . 306
All the Fonts You’ll Ever Need . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
APPENDIX B
Typographic Etiquette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Distorting Type: What Not to Do . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Fake bold . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Fake italic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Fake small caps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Stretching type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Outlining type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Type and images or textures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Setting Body Copy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Indicating a change in paragraphs . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Avoiding justifi ed type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
Avoiding widows and orphans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Tending to Typographic Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Not all quotes are created equal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Using dashes dashingly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
One space after a period, not two . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Ligatures bring letters together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Screenshot
Purchase Now !
Just with Paypal
Just with Paypal
Product details
Price
|
|
|---|---|
Pages
| 354 p |
File Size
|
27,810 KB |
File Type
|
PDF format |
ISBN
| 978-1-119-99895-2 |
Copyright
| 2011 Kadavy, Inc |
●▬▬▬▬▬❂❂❂▬▬▬▬▬●
●▬▬❂❂▬▬●
●▬❂▬●
●❂●
═════● ●═════
