Design for Hackers E-Book

David Kadavy

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 391

Veröffentlichungsjahr: 2011

Beschreibung

Discover the techniques behind beautiful design by deconstructing designs to understand them The term 'hacker' has been redefined to consist of anyone who has an insatiable curiosity as to how things work--and how they can try to make them better. This book is aimed at hackers of all skill levels and explains the classical principles and techniques behind beautiful designs by deconstructing those designs in order to understand what makes them so remarkable. Author and designer David Kadavy provides you with the framework for understanding good design and places a special emphasis on interactive mediums. You'll explore color theory, the role of proportion and geometry in design, and the relationship between medium and form. Packed with unique reverse engineering design examples, this book inspires and encourages you to discover and create new beauty in a variety of formats. * Breaks down and studies the classical principles and techniques behind the creation of beautiful design * Illustrates cultural and contextual considerations in communicating to a specific audience * Discusses why design is important, the purpose of design, the various constraints of design, and how today's fonts are designed with the screen in mind * Dissects the elements of color, size, scale, proportion, medium, and form * Features a unique range of examples, including the graffiti in the ancient city of Pompeii, the lack of the color black in Monet's art, the style and sleekness of the iPhone, and more By the end of this book, you'll be able to apply the featured design principles to your own web designs, mobile apps, or other digital work.

Leseprobe

Design for Hackers: Reverse-Engineering Beauty®

Table of Contents

Introduction

Design as Literacy

The Hacker Attitude

The Gap in Design Knowledge

Chapter 1: Why Design Matters

What Design Really Is

What Design Is Not

The Layers of Design

Purpose

Medium and technology

Aesthetic decisions

Conclusion

Chapter 2: The Purpose of Design

Visual Design and Its Relation to User Experience Design

The basics of user experience design

The visual design of one product versus another

Sometimes a Visual Design Is Just Good Enough

Sometimes Visual Design Is Your Advantage

Reverse-Engineering the Twitter User Experience

User personas

Use cases

Wireframes

Knowledge Applied

Chapter 3: Medium and Form in Typography

The Tragedy of Misuse: Why You Hate Comic Sans

The Shackles of the Typographer: The Unalterable Word

The Formation of Our Alphabet

The Birth of Our Letters

The Twitter of the Roman Empire

The height of Roman typography

The Type That Has Lived On

The invention and spread of printing

Punchcutting: The cradle of the unalterable word

Venice and the Renaissance

France and Garamond

Garamond Today: Why You Don’t Use Garamond on the Web

The birth of the “web font”

A great leap

Bridging the gap

Limitations can be embraced – even parodied

Knowledge Applied

Chapter 4: Technology and Culture

How Trends Are Created

The birth of Impressionism

Web 2.0 graphics

SEO Is Design

Understanding why SEO is important

Choosing the right keywords

Considering content and coding

Knowledge Applied

Chapter 5: Fool’s Golden Ratio: Understanding Proportions

What Is Proportion?

Proportion and Design

The Broken Promise of the Golden Ratio

The golden ratio and the Fibonacci sequence: Similar, but different

The golden ratio in the human form

Misconceptions about the golden ratio

Other Pleasing Proportions

The root 2 rectangle

The 2:3 rectangle

The 3:4 rectangle

Proportions in Our World

Music and dance

Nature

Computers and mobile devices

Proportions at Work

Knowledge Applied

Chapter 6: Holding the Eye: Composition and Design Principles

Compositional Relationships

Reading direction

Guiding the eye with composition

Foreground/background relationships

Design Principles

Dominance

Similarity

Rhythm

Texture

Direction

Contrast

Why the MailChimp Logo Is Beautiful: Use of Composition and Design Principles

Foreground/background relationships

Dominance

Similarity

Rhythm

Texture

Direction

Contrast

Knowledge Applied

Chapter 7: Enlivening Information: Establishing a Visual Hierarchy

What I Mean by “Hierarchy”

Hierarchy is expressive

Many visual factors can affect hierarchy

Hierarchical Factors in Isolation

White space

Type weight and size

Color

Visual ornamentation

Hierarchy at Work

Knowledge Applied

Chapter 8: Color Science

What Is Color?

The Tricks Your Eyes Play

Metamerism

Color constancy

Afterimages

How the Visual System Works

Cones

Trichromatic theory and color opponent theory

Mixing of dominant wavelengths and the color wheel

Colorblindness

Defining Color

Munsell

Hue, saturation, and brightness

Lab color model

Color Models and Data-Driven Graphics

Color and qualitative data

Color and quantitative data

Sequential versus diverging color palettes

Thinking in Hexadecimal Color: Understanding the Colors of the Web

Understanding RGB

How hexadecimal represents RGB

Mentally navigating the hexadecimal “cube”

The future: HSL

Color Models in Action: Why Your Business Card Doesn’t (and Never Will) Match Your Website

RGB displays versus CMYK color printing

Color gamuts

Working across media and managing color

Knowledge Applied

Chapter 9: Color Theory

Color Response throughout Human History

Color Response and Human Biology

The Power of Red: Why You Don’t Stand a Chance in the “Target Challenge”

The effect of red on your brain

The prefrontal cortex and rational thought

The attack on your prefrontal cortex

The prefrontal cortex and decision-making

Color and context

What this means to you

Research on Other Colors

Color and Culture

Color Schemes and the Color Wheel

Color Choices and Web Conventions

Backgrounds

Graphics and text

Accent colors

The Interaction of Colors: Why Monet Never Used Black

The Impressionists: Masters of color

Color theory: What the Impressionists discovered

How Monet used color

Using color like Monet

Color Schemes

Monochromatic

Analogous

Complementary

Split-complementary

Triadic

Tetradic

Variations

Creating a Mood with Color

Mysterious or exclusive

Active

Muted

Natural

Tools for Creating Color Palettes and Schemes

Knowledge Applied

Appendix A: Choosing and Pairing Fonts

Serif typefaces

Sans-serif typefaces

Display typefaces

Humanist typefaces

Geometric typefaces

Realist typefaces

The rule

The exception to the rule

Why certain fonts pair well

The ultimate cheat: Staying faithful to a typographer

Appendix B: Typographic Etiquette

Fake bold

Fake italic

Fake small caps

Stretching type

Outlining type

Type and images or textures

Indicating a change in paragraphs

Avoiding justified type

Avoiding widows and orphans

Not all quotes are created equal

Using dashes dashingly

One space after a period, not two

Ligatures bring letters together

Design for Hackers

Reverse-Engineering Beauty

David Kadavy

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 [email protected].

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.

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.