Design for Hackers: Reverse-Engineering Beauty

Chapter 6: Holding the Eye: Composition and Design Principles

In our cluttered world, full of disparate pieces of information all commanding our attention, the attention of your audience is at a premium. As I talked about in Chapter 1, making your work visually interesting ensures that your message is taken more seriously and gets this ever more precious attention. If you have a visually interesting interface on your application, customers will choose your product over one with equal features and pricing that is less visually interesting. In some cases, they’ll pay more for the perceived extra value created by a more visually engaging interface.

Using design principles and good methods of building compositions isn’t useful only in creating a sense of value for your customers. Understanding how to lead the viewer’s eye throughout a composition or an interface can actually make it more organized and, ultimately, more useful to your customers.

Compositional Relationships

The term composition refers to the way that elements are arranged within a piece of design, the interrelationships between those elements, and – if applicable – the relationships between those elements and a canvas or display. A good composition is what attracts the viewer’s eye and engages it, guiding his eye throughout.

Figure 6-1 shows the simple composition I introduced at the beginning of Chapter 5. This composition is generally visually interesting, especially when compared to the boring composition I introduced ...