Design for Hackers Reverse Engineering Beauty

354 Pages·2011·27.16 MB·English

Design for
Hackers
Reverse-Engineering Beauty
David Kadavy
A John Wiley and Sons, Ltd, Publication
0011__99778811111199999988995522--ffffiirrss..iinndddd ii 77//2277//1111 77::0033 PPMM
Design for Hackers
Th is edition fi rst published 2011
© 2011 Kadavy, Inc.
Registered offi ce
John Wiley & Sons, Ltd, Th e Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United
Kingdom
For details of our global editorial offi ces, 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.
Th e right of the author to be identifi ed 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. Th e publisher is not associated with any product or
vendor mentioned in this book. Th is 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 affi liates 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. Th is 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
0011__99778811111199999988995522--ffffiirrss..iinndddd iiii 77//2277//1111 77::0033 PPMM
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 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 [email protected].
To my parents, Reed and Marilyn Kadavy,
for encouraging me to follow my curiosity.
0011__99778811111199999988995522--ffffiirrss..iinndddd iiiiii 77//2277//1111 77::0033 PPMM
Credits
Some of the people who helped bring this book to market include the
following:
Editorial and Production Marketing
VP Consumer and Technology Associate Marketing Director
Publishing Director Louise Breinholt
Michelle Leete
Marketing Executive
Associate Director–Book Content Kate Parrett
Management
Martin Tribe
Composition Services
Associate Publisher
Compositor
Chris Webb
Indianapolis Composition Services
Publishing Assistant
Proofreader
Ellie Scott
Susan Hobbs
Development Editor
Indexer
Elizabeth Kuball
Slivoskey Indexing Services
Copy Editor
Elizabeth Kuball
Technical Editor
Jason Simanek
Editorial Manager
Jodi Jensen
Senior Project Editor
Sara Shlaer
Editorial Assistant
Leslie Saxman
0011__99778811111199999988995522--ffffiirrss..iinndddd iivv 77//2277//1111 77::0033 PPMM
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.
Th e 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.
Th e 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.
0011__99778811111199999988995522--ffffiirrss..iinndddd vv 77//2277//1111 77::0033 PPMM
Th e 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.
Th is 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.
Th ank 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.
0011__99778811111199999988995522--ffffiirrss..iinndddd vvii 77//2277//1111 77::0033 PPMM
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
0022__99778811111199999988995522--ffttoocc..iinndddd vviiii 77//2277//1111 77::0022 PPMM
viii
DESIGN FOR HACKERS 
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
0022__99778811111199999988995522--ffttoocc..iinndddd vviiiiii 77//2277//1111 77::0022 PPMM