You are previewing Design for Hackers: Reverse-Engineering Beauty.

Design for Hackers: Reverse-Engineering Beauty

Cover of Design for Hackers: Reverse-Engineering Beauty by David Kadavy Published by John Wiley & Sons
  1. Cover
  2. Table of Contents
  3. Title Page
  4. Introduction
  5. Chapter 1: Why Design Matters
    1. What Design Really Is
    2. What Design Is Not
    3. The Layers of Design
    4. Conclusion
  6. Chapter 2: The Purpose of Design
    1. Visual Design and Its Relation to User Experience Design
    2. Sometimes a Visual Design Is Just Good Enough
    3. Sometimes Visual Design Is Your Advantage
    4. Reverse-Engineering the Twitter User Experience
    5. Knowledge Applied
  7. Chapter 3: Medium and Form in Typography
    1. The Tragedy of Misuse: Why You Hate Comic Sans
    2. The Shackles of the Typographer: The Unalterable Word
    3. The Formation of Our Alphabet
    4. The Birth of Our Letters
    5. The Type That Has Lived On
    6. Garamond Today: Why You Don’t Use Garamond on the Web
    7. Knowledge Applied
  8. Chapter 4: Technology and Culture
    1. How Trends Are Created
    2. SEO Is Design
    3. Knowledge Applied
  9. Chapter 5: Fool's Golden Ratio: Understanding Proportions
    1. What Is Proportion?
    2. Proportion and Design
    3. The Broken Promise of the Golden Ratio
    4. Other Pleasing Proportions
    5. Proportions in Our World
    6. Proportions at Work
    7. Knowledge Applied
  10. Chapter 6: Holding the Eye: Composition and Design Principles
    1. Compositional Relationships
    2. Design Principles
    3. Why the MailChimp Logo Is Beautiful: Use of Composition and Design Principles
    4. Knowledge Applied
  11. Chapter 7: Enlivening Information: Establishing a Visual Hierarchy
    1. What I Mean by “Hierarchy”
    2. Hierarchical Factors in Isolation
    3. Hierarchy at Work
    4. Knowledge Applied
  12. Chapter 8: Color Science
    1. What Is Color?
    2. The Tricks Your Eyes Play
    3. How the Visual System Works
    4. Defining Color
    5. Color Models and Data-Driven Graphics
    6. Thinking in Hexadecimal Color: Understanding the Colors of the Web
    7. Color Models in Action: Why Your Business Card Doesn’t (and Never Will) Match Your Website
    8. Knowledge Applied
  13. Chapter 9: Color Theory
    1. Color Response throughout Human History
    2. Color Response and Human Biology
    3. The Power of Red: Why You Don’t Stand a Chance in the “Target Challenge”
    4. Research on Other Colors
    5. Color and Culture
    6. Color Schemes and the Color Wheel
    7. Color Choices and Web Conventions
    8. The Interaction of Colors: Why Monet Never Used Black
    9. Color Schemes
    10. Creating a Mood with Color
    11. Tools for Creating Color Palettes and Schemes
    12. Knowledge Applied
  14. Appendix A: Choosing and Pairing Fonts
    1. Classifying Typefaces
    2. Looking At Letter Structure: The Form of the Skeleton
    3. Pairing Fonts
    4. All the Fonts You’ll Ever Need
  15. Appendix B: Typographic Etiquette
    1. Distorting Type: What Not to Do
    2. Setting Body Copy
    3. Tending to Typographic Details
O'Reilly logo

Chapter 7: Enlivening Information: Establishing a Visual Hierarchy

The “compositions” that most of today’s designers work with are far more complex in information and clearer in objectives than a Renaissance sculpture or an Impressionist painting. If they’re designing an interface for a blog, for example, there are specific tasks and objectives for the user. The user needs to be able to navigate to any page that he wants, but at the same time, the articles on the blog need to be easy to read. Categories need to be easy to navigate to, and information about the blog and its authors need to be clearly accessible.

Making these compositions visually compelling is important for getting new users to stay and for conveying a mood to visitors. But a compelling composition is of little use if the user can’t find what she’s looking for. Many visual standards and user interface patterns have been established for designing on the web, and certain user expectations come along with them.

For a user to be able to navigate through all the information in a website or application, that information needs to be clearly presented and have a clear hierarchy.

What I Mean by “Hierarchy”

The term hierarchy implies that information has a linear progression of important to not important, but this isn’t precisely true. The importance of a piece of information in an interface can change according to the use case. If you see a new blog post on a site that you read frequently, you probably aren’t that concerned ...

The best content for your career. Discover unlimited learning on demand for around $1/day.