Design for Hackers: Reverse Engineering Beauty

Design for Hackers: Reverse Engineering Beauty

by David Kadavy
Design for Hackers: Reverse Engineering Beauty

Design for Hackers: Reverse Engineering Beauty

by David Kadavy

Paperback

$39.99 
  • SHIP THIS ITEM
    Qualifies for Free Shipping
  • PICK UP IN STORE
    Check Availability at Nearby Stores

Related collections and offers


Overview

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.


Product Details

ISBN-13: 9781119998952
Publisher: Wiley
Publication date: 08/29/2011
Pages: 352
Product dimensions: 7.30(w) x 9.10(h) x 0.70(d)

About the Author

David Kadavy is a user interface designer whose clients include Silicon Valley startups such as oDesk, UserVoice, and PBworks. He led the design departments at two Silicon Valley startups and an architecture firm, taught a college course in typography, and studied ancient typography in Rome. David blogs about design at kadavy.net, and his Twitter handle is @kadavy.

Read an Excerpt

Click to read or download

Table of Contents

Introduction 1

Design as Literacy 2

The Hacker Attitude 3

The 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

The Layers of Design 15

Purpose 17

Medium and technology 17

Aesthetic decisions 18

Conclusion 18

Chapter 2 The Purpose of Design 19

Visual Design and Its Relation to User Experience Design 21

The basics of user experience design 22

The 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

The Tragedy of Misuse: Why You Hate Comic Sans 38

The Shackles of the Typographer: The Unalterable Word 45

The Formation of Our Alphabet 47

The Birth of Our Letters 50

The Twitter of the Roman Empire 51

The height of Roman typography 52

The Type That Has Lived On 62

The invention and spread of printing 63

Punchcutting: The 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

The 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

The 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 influenced 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

The Broken Promise of the Golden Ratio 110

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

The golden ratio in the human form 113

Misconceptions about the golden ratio 115

The golden ratio in ancient Greece 115

The golden ratio in fine art 117

The golden ratio in nature 118

The golden ratio in psychology 118

Other Pleasing Proportions 119

The root 2 rectangle 119

The 2:3 rectangle 120

The 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 affect 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

The 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

Defining 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

Thinking in Hexadecimal Color: Understanding the Colors of the Web 217

Understanding RGB 218

How hexadecimal represents RGB 220

Mentally navigating the hexadecimal “cube” 221

The 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

“Proofing” and previewing color shifts 231

Printing with spot colors 232

Knowledge Applied 233

Chapter 9 Color Theory 235

Color Response throughout Human History 237

Color Response and Human Biology 237

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

The effect of red on your brain 239

The prefrontal cortex and rational thought 239

The attack on your prefrontal cortex 240

The 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

The Interaction of Colors: Why Monet Never Used Black 255

The Impressionists: Masters of color 256

Color theory: What the Impressionists discovered 256

Warm colors pop, cool colors recede 257

Tints pop, shades recede 257

The 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: The Form of the Skeleton 297

Humanist typefaces 297

Geometric typefaces 298

Realist typefaces 298

Pairing Fonts 298

The rule 299

The exception to the rule 299

Why certain fonts pair well 301

Texture 301

Character width 304

The 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 justified 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

From the B&N Reads Blog

Customer Reviews