Part I: Understanding Design
Table of Contents
Design as LiteracyThe Hacker AttitudeThe Gap in Design Knowledge
What Design Really IsWhat Design Is NotThe Layers of DesignPurposeMedium and technologyAesthetic decisionsConclusion
Visual Design and Its Relation to User Experience DesignThe basics of user experience designThe visual design of one product versus anotherSometimes a Visual Design Is Just Good EnoughSometimes Visual Design Is Your AdvantageReverse-Engineering the Twitter User ExperienceUser personasUse casesWireframesKnowledge Applied
The Tragedy of Misuse: Why You Hate Comic SansThe Shackles of the Typographer: The Unalterable WordThe Formation of Our AlphabetThe Birth of Our LettersThe Twitter of the Roman EmpireThe height of Roman typographyThe Type That Has Lived OnThe invention and spread of printingPunchcutting: The cradle of the unalterable wordVenice and the RenaissanceFrance and GaramondGaramond Today: Why You Don’t Use Garamond on the WebThe birth of the “web font”A great leapBridging the gapLimitations can be embraced – even parodiedKnowledge Applied
How Trends Are CreatedThe birth of ImpressionismWeb 2.0 graphicsSEO Is DesignUnderstanding why SEO is importantChoosing the right keywordsConsidering content and codingKnowledge Applied
What Is Proportion?Proportion and DesignThe Broken Promise of the Golden RatioThe golden ratio and the Fibonacci sequence: Similar, but differentThe golden ratio in the human formMisconceptions about the golden ratioOther Pleasing ProportionsThe root 2 rectangleThe 2:3 rectangleThe 3:4 rectangleProportions in Our WorldMusic and danceNatureComputers and mobile devicesProportions at WorkKnowledge Applied
Compositional RelationshipsReading directionGuiding the eye with compositionForeground/background relationshipsDesign PrinciplesDominanceSimilarityRhythmTextureDirectionContrastWhy the MailChimp Logo Is Beautiful: Use of Composition and Design PrinciplesForeground/background relationshipsDominanceSimilarityRhythmTextureDirectionContrastKnowledge Applied
What I Mean by “Hierarchy”Hierarchy is expressiveMany visual factors can affect hierarchyHierarchical Factors in IsolationWhite spaceType weight and sizeColorVisual ornamentationHierarchy at WorkKnowledge Applied
What Is Color?The Tricks Your Eyes PlayMetamerismColor constancyAfterimagesHow the Visual System WorksConesTrichromatic theory and color opponent theoryMixing of dominant wavelengths and the color wheelColorblindnessDefining ColorMunsellHue, saturation, and brightnessLab color modelColor Models and Data-Driven GraphicsColor and qualitative dataColor and quantitative dataSequential versus diverging color palettesThinking in Hexadecimal Color: Understanding the Colors of the WebUnderstanding RGBHow hexadecimal represents RGBMentally navigating the hexadecimal “cube”The future: HSLColor Models in Action: Why Your Business Card Doesn’t (and Never Will) Match Your WebsiteRGB displays versus CMYK color printingColor gamutsWorking across media and managing colorKnowledge Applied
Color Response throughout Human HistoryColor Response and Human BiologyThe Power of Red: Why You Don’t Stand a Chance in the “Target Challenge”The effect of red on your brainThe prefrontal cortex and rational thoughtThe attack on your prefrontal cortexThe prefrontal cortex and decision-makingColor and contextWhat this means to youResearch on Other ColorsColor and CultureColor Schemes and the Color WheelColor Choices and Web ConventionsBackgroundsGraphics and textAccent colorsThe Interaction of Colors: Why Monet Never Used BlackThe Impressionists: Masters of colorColor theory: What the Impressionists discoveredHow Monet used colorUsing color like MonetColor SchemesMonochromaticAnalogousComplementarySplit-complementaryTriadicTetradicVariationsCreating a Mood with ColorMysterious or exclusiveActiveMutedNaturalTools for Creating Color Palettes and SchemesKnowledge Applied
Serif typefacesSans-serif typefacesDisplay typefacesHumanist typefacesGeometric typefacesRealist typefacesThe ruleThe exception to the ruleWhy certain fonts pair wellThe ultimate cheat: Staying faithful to a typographer
Fake boldFake italicFake small capsStretching typeOutlining typeType and images or texturesIndicating a change in paragraphsAvoiding justified typeAvoiding widows and orphansNot all quotes are created equalUsing dashes dashinglyOne space after a period, not twoLigatures bring letters together
Design for Hackers
Reverse-Engineering Beauty
Design for Hackers
This edition first published 2011
© 2011 Kadavy, Inc.
Registered office
John Wiley & Sons, Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom
For details of our global editorial offices, for customer services and for information about how to apply for permission to reuse the copyright material in this book please see our website at www.wiley.com.
The right of the author to be identified as the author of this work has been asserted in accordance with the Copyright, Designs and Patents Act 1988.
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, except as permitted by the UK Copyright, Designs and Patents Act 1988, without the prior permission of the publisher.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.
Designations used by companies to distinguish their products are often claimed as trademarks. All brand names and product names used in this book are trade names, service marks, trademarks or registered trademarks of their respective owners. The publisher is not associated with any product or vendor mentioned in this book. This publication is designed to provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required, the services of a competent professional should be sought.
Trademarks: Wiley and the Wiley Publishing logo are trademarks or registered trademarks of John Wiley and Sons, Inc. and/ or its affiliates in the United States and/or other countries, and may not be used without written permission. iPhone, iPad and iPod are trademarks of Apple Computer, Inc. All other trademarks are the property of their respective owners. Wiley Publishing, Inc. is not associated with any product or vendor mentioned in the book. This book is not endorsed by Apple Computer, Inc.
A catalogue record for this book is available from the British Library.
978-1-119-99895-2
Set in 11pt Adobe Garamond Pro by Wiley Composition Services
Printed in the United States by CJ Krehbiel
About the Author
David Kadavy is president of Kadavy, Inc., a user interface design consultancy with 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 firm, 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.
Dedication
To my parents, Reed and Marilyn Kadavy, for encouraging me to follow my curiosity.
Credits
Some of the people who helped bring this book to market include the following:
Editorial and Production
VP Consumer and Technology Publishing Director
Michelle Leete
Associate Director–Book Content Management
Martin Tribe
Associate Publisher
Chris Webb
Publishing Assistant
Ellie Scott
Development Editor
Elizabeth Kuball
Copy Editor
Elizabeth Kuball
Technical Editor
Jason Simanek
Editorial Manager
Jodi Jensen
Senior Project Editor
Sara Shlaer
Editorial Assistant
Leslie Saxman
Marketing
Associate Marketing Director
Louise Breinholt
Marketing Executive
Kate Parrett
Composition Services
Compositor
Indianapolis Composition Services
Proofreader
Susan Hobbs
Indexer
Slivoskey Indexing Services
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 filtered 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 finally 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 selflessly 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 influence of my professors at Iowa State University. Thank you to Arthur Croyle, who was the best teacher I could have had to teach me about the origins of typography in Rome. Thank you also to Gary Tartakov, whose lectures shared a socioeconomic viewpoint on design and art history like none other. Thank 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 influence 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 offer 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. Thanks to all of you, to the first person to ever discover how to start a fire, 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. That 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. Thank 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. The 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. Thank you so, so much.
Go to www.wiley.com/go/eula to access Wiley’s ebook EULA.
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.”
Thank 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 firm. 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. The 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. The whole reason why I had suffered the consequences of poor handwriting was because handwriting was a part of communication. The only reason that I could write anything at all was that I was literate.
This 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 affordable to common people in the civilized world. Johannes Gutenberg printed the first 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 different. 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 flyers, postcards, and PowerPoint presentations complete with animations. We can create blogs, posters, and even coffee mugs.
But few of us are design literate. Sure, matters of design taste are starting to creep into our world. There 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 affect how our message is conveyed, and nearly all of us have the ability to manipulate these factors. The 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.
Though 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 five tenets of the hacker attitude:
> The 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. They do whatever it takes to achieve their visions. They’re entrepreneurial. They 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. The 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. They 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. They benefit 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.
They 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 find more of what they’re looking for on the Internet or read a book from the library.
The Gap in Design Knowledge
The 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 find. They 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.
The main reason for the difficulty in learning design is probably that designers tend to have difficulty 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. The nuances of white space, for example, are actually influenced 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 satisfied 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 differentiating pieces of information. And you’ll see how the colors relate to one another to communicate and emote.
This 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.
Please note that some special symbols used in this eBook may not display properly on all eReader devices. If you have trouble determining any symbol, please call Wiley Product Technical Support at 800-762-2974. Outside of the United States, please call 317-572-3993. You can also contact Wiley Product Technical Support at www.wiley.com/techsupport.
Part I: Understanding Design
Chapter 1 Why Design Matters
Chapter 2 The Purpose of Design
Chapter 1: Why Design Matters
Given that you’re reading this book, you probably don’t need much convincing that design is, in fact, important. Good design has clearly been fundamental to the success of many of the world’s largest companies, and interest in and awareness of design has exploded during the past couple decades. But exactly what kind of impact can design have? More important, what really defines the bounds of design?
Skillful use of good design can create experiences that are emotionally moving. At the same time, good design – through improved communication and clarity – can make things easier to use. The characteristics of good design can bring increased credibility to your company and ultimately influence the decisions of your customers. Skillful use of good design can affect emotions, build credibility, and earn trust. Finally, good design can actually make things easier to use. But to really achieve these results, you have to understand design holistically.
I witnessed firsthand the power of design in one of the world’s oldest functioning buildings. While I was studying the origins of modern typography in Rome, my studio was just a few blocks from the Pantheon. I spent hours sitting inside the building and people-watching. I’m not normally entertained by watching people, but inside the Pantheon, watching people is a different experience than it is elsewhere. Why? Because people-watching in the Pantheon gives you the opportunity to see the reactions of people who are walking into the building for the very first time.
The reaction of a person walking into the Pantheon for the first time – though different for everyone – follows a predictable pattern: He walks through the doors, in a hurry, guidebook in hand and comfortable sneakers on his feet. Then, once he looks up, everything about his demeanor changes. He begins walking in slow motion. His head falls back limply on his neck, as if he were a child seeing fireworks for the first time. His jaw drops, and at some point, a “wow” and a sigh of amazement manage to escape his mouth. He may lift a camera to his eyes – in an attempt so feeble as to be entertaining – hoping that he may later relive the experience at will.
This is why I loved to people-watch in the Pantheon. I had experienced what they were going through myself, and – although the Pantheon amazes me to this day – there’s something magical about seeing what is little more than a pile of stone, arranged in a certain way, have this affect on grown adults.
What Design Really Is
Steve Jobs once said, “In most people’s vocabularies, design is a veneer. It’s interior decorating. It’s the fabric of the curtains of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.” It’s this layering, the interconnectedness of these different factors, that manifests itself in the impact of the Pantheon.
The emotional reactions that I witnessed over and over in the Pantheon are exactly as intended. The Pantheon, the current design of which was commissioned by Emperor Hadrian in 126 ad, was built to be the temple of all the gods of Ancient Rome. So, it’s fitting that walking into the building would be an awe-inspiring experience. If it’s good enough for Venus, the goddess of love and beauty, it’s bound to be pretty amazing to you and me. This intention behind the design of the building – the impact it was meant to have – is definitely one of the “layers” that Steve Jobs was referring to.
The way that the interior of the Pantheon achieves this reaction is through conceptually representing the heavens. Emperor Hadrian wanted those who entered the Pantheon to be awe-struck. This is the house of the gods, after all. The interior does this by being in the form of a perfect sphere – it is as tall as it is wide, taking the form of a semicircular dome on top of a cylinder. At 142 feet, it remains the tallest unreinforced concrete dome in the world – nearly two millennia after its creation. At the very top of this dome, a 30-foot wide oculus (hole) projects a beam of sunlight into the building, lighting the interior. This is how the Pantheon has such an impact. Upon entering, you’re enveloped by another world, complete with its very own “sun” (see Figure 1-1).
Part of the impact of the Pantheon comes from the relationship between this incredible spatial experience and the materials used to create it. To achieve this form, the Pantheon pushes the limits of the materials from which it is built, which helps explain why a dome of this height hasn’t been created with the same technology since. So much reinforcement is needed to keep this dome standing that the walls of the dome are 20 feet thick at the base of the dome and only 4 feet thick at the edge of the oculus.
Figure 1-1 The Pantheon features the world’s tallest unreinforced concrete dome. Light (and sometimes rain) floods into the interior through a hole in the ceiling.
To better manage the weight of the concrete, hard and durable basalt was added to the mix for the foundations, with the mix gradually getting lighter, until pumice rock was used toward the oculus. This way, the base of the dome has the weight and strength to support the rest of the dome, while the upper parts of the dome are thin and light, reducing their load upon the base.
To make the dome material even lighter, a series of recessed squares, or coffers, are formed within the dome. These coffers, which exist by engineering necessity, contribute to the impact of the interior. They rhythmically radiate from the oculus, creating visual interest, while contrasting with the smooth concrete that immediately surrounds the oculus.
In concert with these technical considerations, the designers of the Pantheon had to make some aesthetic choices as well. Because the floor is too large to be made with one piece of marble, it’s made up of various pieces. This marble is laid out in a pattern of basic circular and square forms, which are in geometric harmony with the rest of the interior.
The marble used within the Pantheon was in different colors, as well, so care had to be taken to ensure that there was harmony and beauty in how the various colors of marble interacted with one another.
All these factors worked together and were considered so masterfully that the Pantheon is one of the most influential buildings in the history of architecture. From St. Peter’s (just down the road from the Pantheon, in Vatican City) to the U.S. Capitol building, the dome of the Pantheon has inspired the design of buildings all over the world.
This careful marriage of all the “layers” of design are what makes a design beautiful, timeless, and, ultimately, successful in reaching its goals. The intentions of a design work together with the limitations of the technology used to create the design, as well as with harmonies of form, geometry, and color. All these pieces, all these layers, are inextricably linked with one another, forming the whole of what truly is design.
What Design Is Not
Like Steve Jobs said, many people think of design as some kind of afterthought – the upholstery on a couch, the logo on a business card, or the visual look of a button on a website. In pursuit of understanding design, many are led down the fruitless path of approaching design with this definition in mind. They may try to learn how to create a particular visual effect, repeatedly refer to lists of do’s and don’ts, or try adding visual elements to a design that do little but create clutter.
To keep yourself creating good design, you need to learn how to understand all the layers that create great design. To create great design: Don’t draw ponies.
Chances are, when you were in grade school, there was a kid in your class who everyone thought of as a good artist. His big secret was, he only knew how to draw one thing. In my third-grade class, there was a girl who could draw ponies. She drew beautiful ponies. They had big, juicy eyes and long, flowing manes. They had smooth, powerful muscles, and looked as if they could leap off the page. The other kids in class would crowd around her as she drew pony after beautiful pony. Then, one day, someone asked her to draw a portrait. “Draw a picture of me!” he said. The girl looked scared. “Yeah, draw him,” the other kids cheered. So, reluctantly, she tried to draw the boy. As you can probably imagine, the resulting drawing looked nothing like the boy at all. His eyes were lifeless, flattened footballs. His hair was a random mess of scribbles. “I’m not very good at drawing people,” she said, sheepishly. Everyone seemed disappointed, but they still wanted to believe that she was a good artist.
I was too young to figure it out then, but eventually I got it. All the ponies the girl drew were essentially the same. Most of them had the same pose. The heads were at the same angle. Maybe the front hoof of each of the ponies was pulled up, as if the pony were ready to begin a gallop. She probably had just learned to draw a pony from one, maybe two angles – maybe from a picture in a magazine – and just repeated that over and over again. She was really good at drawing ponies this way.
But the pony-drawing girl didn’t conceptually understand ponies. She didn’t understand the “layers” that make up a pony. Hey, she was in third grade, so that’s okay. But she didn’t understand pony anatomy, where all the muscles really were, or how they might change shape as the pony changed poses.
The drawing of her classmate didn’t look right because she didn’t know human anatomy, either. She didn’t understand the way that tear ducts are on the inner part of the eye, or the way that an eyelid is constructed, or exactly how they tuck underneath the eyebrow ridge. She didn’t understand how individual hairs on a person’s head interact with each other and clump together. She didn’t understand technically how these things worked, she didn’t understand how a viewer perceives these things, and she didn’t understand how to use a pencil and paper to bridge the gap between these two worlds.
Of course, she didn’t understand these things – she was in third grade. Probably, someday, she progressed as an artist, or maybe today she’s the most famous artist in the pony world.
The point is that to truly be adept at designing something, you have to understand how it works. You have to understand the nature of what you’re building, how what you’re building is perceived, and how you can use your tools to make your vision happen. Otherwise, you aren’t designing. You’re creating a veneer. You’re drawing ponies. Don’t draw ponies.
The Layers of Design
It’s important to understand the layers that make up a design, because getting those layers to work together is the key to creating designs that look good, that solve problems, and that ultimately influence your users.
On the web, more than anywhere else, using the layers of design appropriately is critical to success. People are exposed to more information today than ever before, and there just isn’t enough time or attention for us to process all of it. So, we use shortcuts to decide what is deserving of our ever-more-precious attention.
In psychology, these shortcuts are called heuristics. Heuristics help us solve complex problems and make complex decisions by using “rules” that are either programmed into us by evolution or learned from our own experiences.
If you see a pair of shoes that you’re considering buying, you’ll immediately make a judgment on whether this brand of shoes is for you. How does the way it’s constructed affect the look of the shoes? Do the colors appeal to you? Is it your style? You use heuristics based upon how similar these shoes are to shoes that you’ve had past experiences with.
These heuristics are in heavy use as people make decisions on the web. We make split-second judgments about how much we trust a news site to give us accurate information, how much we trust an e-commerce site to process our payments securely, or whether we believe a nonprofit will use our money wisely.
It turns out, in all these cases, design is the single most important heuristic we process when deciding whether a site is credible.
The factors that influence design are countless, with fuzzy boundaries. You could ask a dozen different design experts what factors manifest themselves in a piece of design, and although you’d get a dozen different sets of answers, they would all pretty much cover the same things. Here are some of the layers of design that I’ll talk about in this book.
How design affects credibility on the web
In a study done at Stanford University, B. J. Fogg and his colleagues presented participants with two websites and asked them to rank the sites’ credibility, as well as provide comments about what they based their rankings upon.
When the results were processed, Fogg found that design had an overwhelming influence in participants’ ratings of the credibility of the websites in the study. An incredible 46 percent of all comments about the credibility of the sites were related to design. Participants said trustworthy sites were “more professional looking,” had a “higher-quality look and feel,” or “just [looked] more credible.” Some participants even went so far as to specifically mention the color schemes or choices of fonts in sites that looked credible to them.
Although well-designed sites enjoyed high credibility ratings, sites that were poorly designed were viewed as less credible. Participants didn’t trust a site if it was “not very professional looking,” if the “design [was] sloppy,” or if it looked “like it was put together in five minutes.”
But just as drawing a pretty pony doesn’t make you a good artist, creating a pretty website doesn’t make you a good designer. Participants were skeptical of sites that looked inappropriately polished, giving negative comments suggesting that certain sites looked as if they were “designed by a marketing team.”
The design of a site has to be appropriate, and considering all the layers that make a good design is critical in creating effective designs.
Aside from the visual look of sites being important to their perceived credibility, the results of Fogg’s study also suggested that some of the more subtle aspects of design also were extremely important. Comments about the information design and structure of the sites in the study were the second most common, comprising over 28 percent of all the comments processed. Participants praised some sites for being “well organized,” while criticizing other sites because the “information [was] badly presented.”
So, together, the visual look of a site – along with the way the information was organized – accounted for nearly 75 percent of all comments about whether participants trusted a site or not. Moreover, the participants’ comments were sensitive to design that was inappropriate for the site in question.
Users know when you’re drawing ponies, so to create successful design, you need to understand how the layers of design interact.
Purpose
Every piece of design has a purpose or an intention. The Pantheon was built as a temple of the gods, the iPod was built as a portable device for playing music, and every website or application you create has its own set of purposes.
The purpose of a design is wrapped up with economic factors as well. The forms of letters have been influenced throughout time by the need for efficiency in communicating language (see Chapter 3). As I’ll explain in Chapter 2, and as demonstrated by the skeptical comments toward inappropriately polished design in Fogg’s study (see the earlier sidebar), these economic factors help dictate the quality of design that a particular artifact should have.
The purposes and intentions of a design interact with the characteristics and needs of a user. In Chapter 2, I’ll explain how you can better account for these characteristics when developing the structure of your design. In Chapter 9, I’ll talk about how you can account for cultural color considerations.
Every user needs to be able to access information clearly, and this communication is the very foundation of design. In Chapter 3, I’ll explain the differences between various fonts in historical context. In Appendix A, I’ll explain how these historical considerations affect the mood that a typeface conveys. In Appendix B, I’ll show you how some of the tiniest typographic details can have dramatic effects on the information being communicated. Most important, in Chapter 7, I’ll illustrate how you can attach the appropriate amount of importance to various pieces of information within your designs.
Medium and technology
Every piece of design is created by a particular set of materials, with certain methods of construction that influence the design. The limitations of creating a concrete dome caused the Pantheon to feature recessed coffers throughout the dome; the latest MacBook Pro is created from a single piece of aluminum, a production consideration that influences its design; and, as I’ll talk about in Chapter 4, designs created with HTML and CSS tend to have certain characteristics that lend themselves to the capabilities and limitations of that technology.
In Chapter 4, I’ll go into more detail on how the technologies behind the Internet have created design trends, such as the Web 2.0 look. In Chapter 3, I’ll explain how the limitations of the pixel have made some of the longest-lived typeface designs incompatible with use on the web. In Chapter 8, you’ll learn about how the technologies with which we represent colors can influence our color choices designing across mediums or when choosing colors for information graphics. In Appendix A, I’ll explain how the various technologies used to create letters have, over time, led to new styles of typefaces.
Aesthetic decisions
Working in concert with design intentions and characteristics of medium and technology are the aesthetic considerations of design. When you hear it called that, it probably brings to mind a lot of what people think of design as – the veneer of design. But in many ways, the aesthetic decisions of design are invisible.
The geometric relationships between things in a design are not something you can see, but they make a huge impact on the visual harmony, the sense of organization of content, and the overall “clean” feeling of a design. I’ll talk about these hidden geometric relationships in Chapter 5, and I’ll talk about how these geometric relationships work with other hidden principles of design in Chapter 6.
The colors we use in designing are, of course, visible. But designers make some important though invisible decisions when working with colors. After explaining how we perceive colors with our visual system, and how we represent colors with various technologies (Chapter 8), I’ll explain how colors can influence our emotions, I’ll explain how colors interact with one another, and I’ll present some common formulas for choosing colors that go well together (Chapter 9).
Conclusion
By gaining an understanding of all the various factors that affect design, you can create designs with emotive power, clarity, and beauty. Throughout the rest of this book, I’ll break down all these factors, so you can see the world through new eyes. Let’s get started, shall we?