Table of Contents

Design as Literacy

The Hacker Attitude

The Gap in Design Knowledge

What Design Really Is

What Design Is Not

The Layers of Design

Purpose

Medium and technology

Aesthetic decisions

Conclusion

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

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

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

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

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

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

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

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

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

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