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 along with it. In Chapter 5, I talked about how well-considered geometric relationships help make this simple composition interesting. In this chapter, I’ll explain some effective design principles to be aware of, and – at the end of the chapter – explain how design principles make this composition interesting.

Reading direction

You can better understand just how effective use of design principles make this composition more interesting if you understand the way that a viewer typically consumes any piece of design. In the Western world, because we read from left to right and from top to bottom, we typically begin looking at any composition or piece of design – whether a piece of sculpture, a book, a magazine, or a web page – from the top-left.

As you can see in Figure 6-2, eye-tracking heat maps of web pages are a testament to this fact and are highly relevant to the modern designer. Website visitors scan a page in an F pattern, starting at the top left, scanning across a bit, then tracking down the left-hand side of the page. Understanding this behavior, while also understanding how compositional factors can guide and hold a viewer’s eye, can help you better understand what your users will look at.

Guiding the eye with composition

Although the viewer’s eye will tend to enter a piece of design in a certain fashion, once it is engaged, a successful design guides the eye appropriately. Some of the most successful and beautiful compositions guide the viewer’s eye throughout the composition in a manner that keeps the viewer’s eye within that composition. It’s as if the viewer’s eye is “recycled” within the composition over and over again.

Renaissance sculpture

In the Renaissance sculpture of The Rape of the Sabine Women (shown in Figure 6-3), Giambologna does a magnificent job of recycling the viewer’s eye. A sculpture is likely consumed a little differently from the way a web page is consumed, but whether you enter the composition from the top left, or from any other place within the sculpture, your eye will be drawn throughout the grouping of figures and then drawn back in by some compositional element wherever your eye may attempt to exit the composition. It’s as if you literally can’t take your eyes off this sculpture.

Figure 6-4 shows a number of different ways that your eye may enter and explore the composition of this sculpture. If your eye enters from the top left – at the woman’s head – it will likely zigzag down her right shoulder to her arm, down the back of the standing male figure, through the left arm of the crouching male figure, across his chest and down to his leg, where it will be pulled in once again by the right leg of the standing male figure. Within the overall composition, there are a number of tight sub-relationships between other elements that keep you looking at this masterpiece over and over. Granted, this is a three-dimensional composition, and I can show you only two of those dimensions, but the dynamic twisting of the figures within the grouping make this composition work no matter what your vantage point.

Impressionist paintings

A similar “recycling” effect can be found in nearly every beautiful painting. A Sunday Afternoon on the Island of La Grand Jatte by Georges Seurat (shown in Figure 6-5) is one such great example. Despite being very complex in the number of figures and elements that are within the painting, there are some very simple but strong things about its composition that keep you looking at it.

As shown in Figure 6-6, if your eye were to enter the painting from the top left, it would likely follow the strong horizon line present on the opposite side of the lake. This would lead you to the standing figures on the right side of the painting. These figures – the man in the top hat and the woman with an umbrella – are the most dominant elements in the painting. They are dark, large, and stand right in the foreground of the painting. Your eye would then likely follow the line of the dark shadow that takes up the rest of the foreground of the painting, only to be led back up to the horizon line either by one of the upright figures or trees along the shoreline, or by the strong angle of the shoreline itself. As your eye “recycles” through the painting, it gets caught in the various smaller groupings of the painting that invite you to explore the scene in a manner as leisurely as you might act on a Sunday afternoon in the park.

Web design

The design blog, Think Vitamin (www.thinkvitamin.com), sets up its content with consideration for the expected F pattern of web users and guides the viewer’s eye appropriately. As you can see in Figure 6-7, the most recent blog post is toward the top left of the home page and is made very prominent through its size and its dark background. As you scroll down the page, you can quickly scan the headlines and images of other articles to see if anything interests you. Supplementary information such as the topics of the site, subscription information, and information about the authors, are all stowed away on the right side, where they don’t distract your attention from the meat of the site.

Foreground/background relationships

In many pieces of design – especially in representational paintings – there is an implied third dimension. Some elements may appear to pop off the canvas, while other elements appear to be far off in the distance. Renaissance painters mastered creating depth in a painting by using perspective, but many other factors can be used to create a sense of depth. Size, color, texture, and use of shadows are just some of the factors that can make some things pop, while others recede.

When something appears to be closer to you in a painting or composition, it is considered to be in the foreground. Things in the foreground are likely to be noticed first in any composition.

When something appears to be farther from you than things that are in the foreground, they are generally considered to be in the background. Naturally, the background-image of a web page usually looks as if it is in the background.

Elements can be moved to the foreground or background based upon their relative size, the amount of detail, their colors relative to the rest of the composition (see Chapter 9), or shadows. For example, in Seurat’s painting, the people in the foreground have more detail in their facial features and clothing, while people who are farther away have less detail.

In my simple composition (refer to Figure 6-1), the largest circle appears to be in the foreground, despite the fact that everything in the composition is made up of a solid color. Because the circle is large, and especially because it bleeds off the page, it gives the appearance of being closer to you than the other circles appear.

In Seurat’s painting

As your eye explores the Seurat painting, the foreground/background relationships help dictate where your eye goes. As I said earlier, the couple on the right side of the painting are among the first things you notice after your eye enters the composition. This is in part because they’re very large in the composition, but it’s also because they’re in the foreground.

Though I’m talking mostly about the foreground and background for simplicity’s sake, you may notice that there is certainly a midground to the composition as well. Pretty much everything you see between the dark shadow in the foreground and the horizon line would be considered the midground.

Almost without exception, every painting that represents actual objects and scenes – and even some abstract paintings – has a foreground, a midground, and a background. The appearance of depth that these elements give to a painting makes it hard to keep your eyes off it. The scene of a painting being divided up this way contributes to the composition having a focal area, or the part of the composition that is most dominant (I’ll talk more about this in a bit) – the thing that your eye is naturally drawn to.

In interface and web design

You see foreground/background relationships being used in web and interface design, too. Operating system interfaces have visual cues that produce foreground/midground/background relationships. As you can see in Figure 6-8, the selected window in the Mac OS interface has more clearly defined interface elements. The frame of a window has a stronger gradient on it, giving it a more tactile sense – letting you know that you could grab it if you wanted to. The buttons for closing, maximizing, or minimizing are in color, while the windows that aren’t selected have more vague details. This lets you know that you can use those buttons if you want to, while the buttons on inactive windows remain gray.

Many web designs try to emulate this sense of depth through drop shadows, such as on the bordering areas of the main text area of a design, or around images within the design. Mouseover states that cause interface elements to pop out cue the user that they can interact further with that element. When a button visually pops out into the foreground – whether it’s through color or a drop shadow – it’s letting users know that they can press it.

Though Think Vitamin’s design is mostly solid colors, there is still some subtle use of foreground/background relationships. The most recent – and most prominent – blog post is thrust into the foreground because it is on such a dark background. Also, the fact that it bleeds in all the way from the left edge of the page makes it almost as if it has been placed on top of the light cream background of the main page.

As you mouse over certain elements of the Think Vitamin design, they pop into the foreground, prompting you to interact with them. As shown in Figure 6-9, mousing over the icon that shows the number of comments on the post makes the icon go from pink to red, popping it into the foreground and letting you know that you can click it.

Design Principles

The term design principles refers to a series of beliefs or tenets about what kind of features make a composition attractive. Like many things in the world, the concepts that design principles try to encompass are much more complex than the terms that are used to define them. Additionally, there is no set group of design principles that are absolute. A different book on design principles might talk about a completely different set of design principles than I’ll be talking about in this book.

You may also notice, as I describe these principles, that many of them seem to overlap. That is, the presence of one principle of design often results in the presence of another principle of design. This sort of interconnectedness can be expected, though, because beautiful design is all about dependent relationships. The objectives of a design work with the message of a design, and through use of design principles, they convey to the audience compellingly and effectively.

Dominance

The principle of dominance creates visual interest in a composition by drawing the viewer’s eye to an important element in the composition. When an element is dominant in a composition, it is one of the first things your eye is drawn to. It acts almost like a magnet when you first lay eyes on the composition. It also acts as an anchor – you keep returning to it as you explore other parts of the composition. It pulls you in.

Dominance can come in handy when you’re trying to establish a visual hierarchy of information (something I’ll talk about more in Chapter 7). But having a dominant element keeps a composition interesting by making it clear what you should be focusing on first.

Elements can be made dominant by being the darkest, the lightest, the largest, or even by having lots of white space around them. The placement of an element on the canvas can help it be dominant as well.

As I mentioned earlier, the man and woman on the right side of the Seurat painting are the most dominant elements in the painting. They contribute to the success of the composition through the principle of dominance. After your eye is drawn to the couple in the Seurat painting, you’re prompted to explore other parts of the composition. Your eye continually gets drawn back to the couple – because of their dominance – and then back throughout the composition again.

The largest circle on my simple composition is dominant, in part, because it’s the largest element. (I’ll talk about some other ways it remains dominant as I introduce more principles further on in the chapter.)

Think Vitamin also uses dominance in its design, again with its treatment of its latest blog post. As I mentioned earlier, the information for the latest blog post is in a prominent location, at the top left of the page, and is pushed into the foreground. But it also includes a much larger type in its title than anything else in the design. The addition of the author’s photo also makes this element dominant on the page.

As you scroll down on a web page such as Think Vitamin’s, the latest blog post is no longer visible, of course. As you can see in Figure 6-10, what could be considered “sub-compositions” within the page, such as the other blog posts, use the dominance of icons and large titles to anchor the eye. Dominance is also used through larger titles and dark icons.

Similarity

Similarity means that various elements of a composition – their shape, color, line characteristics (smooth or jagged), or texture – are similar to one another. Similarity makes a composition compelling because, as your eye travels throughout that composition, it is constantly reminded of things that it has seen before within that same composition. Use of similarity also is a nice setup for the use of the principle of contrast (another principle I talk about more later).

The Seurat painting uses similarity effectively in many ways. The shapes that the artist uses to draw the people in the composition are smooth and oversimplified. You notice the same shapes over and over again, in the dresses of the women in the painting and in the umbrellas strewn about the composition (see Figure 6-11). You see similarity being used in the repetition of colors such as reds and greens, as well.

My simple composition (refer to Figure 6-1) uses similarity as well. All the elements in the composition are circles, after all. They’re also all the same color and are completely flat, having no shading, texture, or definition.

The overall visual style of the Think Vitamin design is also that of bold basic shapes and solid colors, with very little use of lines and no gradients. Most of the user interface elements are an exercise in the principle of similarity in that they are very rounded (see Figure 6-12). The logo and overall concept of the site are that of a vitamin or a rounded pill. The links for the topics on the right side of the home page, the buttons, and even the search box are all effectively little pills themselves. Similarity such as this makes a design look cohesive, because the various elements within it echo one another.

Rhythm

With similarity often comes rhythm. Rhythm is a bit more abstract than similarity is. Probably the first thing that you think about when you think about rhythm is music. Just as the repetition of a snare or kick drum at a consistent point in a measure of music, over and over again, creates a sense of rhythm in music, the repetition of a particular design element or characteristic throughout a composition create a sense of rhythm in design. Rhythm in a design keeps it interesting because – much like similarity – you’re consistently reminded of things that you saw earlier as you view the composition. But rhythm also can be a useful method of managing the principle of direction and of setting up an opportunity to use the principle of contrast (both principles that I’ll talk about more later).

The Seurat painting makes good use of rhythm. In Figure 6-13, notice how the erect postures of all the people in the composition echo the vertical trunks of the trees. Notice also the cast shadows on the foreground and midground and the sense of rhythm they create along with the shoreline of the lake and the horizon line. This use of rhythm keeps you looking at the composition, as your eye travels throughout.

Rhythm is used very sparingly in my simple composition, and its presence is generally incidental. There is a sense of rhythm in the progression of the largest, second-largest, and smallest circle. The principle of direction has a stronger presence in this grouping, but I’ll talk about that more later.

Think Vitamin’s use of similarity also naturally lends itself to rhythm, or a visual sense of repetition. As you can see in Figure 6-14, the topic links along the right side create a rhythmic strip that leads your eyes down to the four very similar and evenly spaced icons in this same sidebar. As you scroll down the page, you begin to notice that icons similar to these – in that they are all bold circles – accent the title of each blog post. This creates not only a visual stopping point that cues you to stop and read the title, but also a sense of rhythm as you scroll down the page. This makes it clear how the information is organized on the page – it’s all broken down into small pieces that you can decide to explore further, if you wish, as you scan the page.

Texture

Texture is the visual indication that something has characteristics that would be palpable if you were able to touch them. For example, if something looks like sandstone – or actually is made of sandstone – then that is texture. Texture is related to similarity and rhythm in that if a shape is repeated enough times, and at a fine enough scale, it generally creates a texture. Texture keeps a composition interesting because it provides an opportunity for the principle of contrast (which I’ll talk about soon) and can create a sense of depth in foreground/background relationships.

Because the Seurat painting is composed of thousands of tiny dots of paint (a technique called pointillism), it has a strong sense of overall texture. Depending on how far away you view it from, this can look very rough or a little smoother – like sandstone.

But there are some subtle changes in texture throughout the painting as well. Notice that the edges of the umbrellas and the edges of the people’s clothing are all very crisp. But the leaves on the trees have a very fuzzy appearance. Meanwhile, the reflection upon the lake makes it look smoother and glassier.

My simple composition really has no texture to speak of. This is one of the weaker points of the composition, but it also demonstrates that not every design principle has to be present for a composition to be (relatively) successful.

Think Vitamin also uses very little texture – most of the shapes and design elements within the site are solid areas of flat color. The main source of texture in the design is that provided by the text (I talk more about texture of type in Chapter 3 and in the appendixes). Because there is very little texture in the site design, the texture of the text stands out more.

The site uses only one font family for the majority of its content, so the variations in texture come from variations in the weight of the font used, and from differences in size and variations in the amount of white space around various pieces of information. The texture variation – aside from the sheer size and dominance – of the large text of the blog titles, varies from that of the body text, helping establish differences between these pieces of information.

Direction

The principle of direction helps guide the viewer’s eye throughout the composition and helps keep the viewer looking at the design piece. Direction can be established pretty explicitly through lines (and sometimes even arrows!), but sometimes more implicitly through shapes, shading, or even invisible alignment within the composition.

The direction present in the Seurat painting can be found in some of the compositional relationships I explained earlier (see Figure 6-15). The groupings of people throughout the composition form invisible directional forces that guide your eye throughout. The most explicit uses of direction in the composition are the horizon line that leads to the couple standing in the foreground, the main dark shadow in the foreground, and the shoreline of the lake. The angular shapes created by the lake, the sun-drenched part of the grass, and the shadow are all strong directional forces as well.

The principle of direction is being used in my simple composition – as I mentioned before – where the largest, second-largest, and smallest circles in the composition line up. As you can see in Figure 6-16, the combination of their progressively smaller sizes and their visual alignment give them a sense of direction that draws your eye diagonally across the canvas.

In Chapter 5, I mentioned imaginary grid lines that were used to place the circles on the composition. As you can see in Figure 6-17, the second-largest circle lines up with the intersection of grid lines that line up with the edges of the largest circle, which visually anchors the second-largest circle to the largest circle. If you look at the largest circle (which is pretty hard to miss), your eye is naturally drawn along the imaginary grid lines to this second-largest circle.

But notice that the smallest circle is not directly centered on any grid lines. Instead, it continues an invisible directional line that is created between the largest and the second-largest circles. Also, since the third-largest circle is perfectly lined up with the first grid line on the left, the smallest circle is placed just off this grid line, instead of being directly centered on it. If the smaller circle were directly on this grid line, it would visually anchor itself to the third-largest circle in a stagnant, vertical fashion. This isn’t always a bad thing, but it would take away from the implied diagonal direction that this smallest circle is already a part of.

Direction within the Think Vitamin design is much more subtle and implied. Think Vitamin is designed upon a grid (I talked about this a little in Chapter 5, but I’ll talk more about this in Chapter 7), or in other words, the information and design elements are organized along imaginary subdivisions. Think Vitamin’s use of direction comes from its alignment of design elements along these imaginary lines.

One such imaginary line is present in the navigation at the top of the page. In Figure 6-18, you can see that there is a middle line created by the logo where the words Think Vitamin begin and end. This imaginary guideline (I’ll call it an axis now) is supported and extended by the tagline “curated by Carsonified” and is extended even further by the words in the navigational items (home, membership, about, and so on). There is very little visual ornamentation in this area (other than some subtle background color changes on the navigation items, and the explicit arrow connecting the main logo to the tagline), so this alignment ties the logo, tagline, and navigation into one cohesive unit.

Also shown in Figure 6-18, the left-hand side of this header area – the logo – lines up vertically with the title of the latest blog post. This alignment draws the eye to read this first blog post. But a second vertical axis is created where the body text of the blog post is inset a bit, resulting in a margin in which the author photo can be seen. This usage of two vertical axes in this way allows the first blog post to achieve dominance over the following blog posts even further. Blog posts after the latest one are set along this second axis, so the first blog post looks even more important this way. The resulting margin is a good place for strong icons that call out the titles of the blog posts, but it also allows photos to be more dominant within the composition, as they extend out all the way to the first vertical axis.

As shown in Figure 6-19, direction and alignment also are used in the pages for the individual posts, especially on the title and metadata of the posts. The title, author photo, and other elements such as the icon and comment count, are all grouped into a cohesive unit almost entirely by their alignment with one another. The left margin of the title lines up with the author photo, which lines up with the author name, date of post, and category of post. On the right side of this area, the icon, comment count, and social media widgets all align with each other.

This imaginary box is completed and highlighted by a strong, dark horizontal bar that lines up with the social media widgets and extends all the way to the edge of the browser window. This bar leads your eye into the composition, and all the alignment I just talked about anchors your eye in this title area. After you’ve taken in the basic information about the post, the subtle alignment of the author name and date with the body text of the post pulls you down to read the text. Think Vitamin’s design can manage to be so clean because it makes good use of direction through well thought-out alignment relationships such as this.

Contrast

The principle of contrast causes certain parts of a composition to stand out more than others because of differences – or contrast – between elements. Things in a composition can contrast with one another in terms of size, color, value (lightness or darkness), texture, shape, line quality . . . just about any way imaginable. By using contrast you can create dominance, or create foreground/background relationships. Contrast can be used as a guiding principle throughout an entire design (like if something is entirely black and white), or it can be used sparingly in a design that is mostly homogeneous, for more impact.

Contrast is used in the Seurat painting in the presence of the couple in the foreground of the painting, who appear much larger than any other elements in the composition. There is also heavy contrast between the shaded parts of the grass and the parts of the grass that are in the sun. This makes the people who are in shadows have very crisp outlines. These crisp outlines are a big contrast from the fuzzy shapes that define the leaves of the trees.

My simple composition uses contrast between the color of the circles and the color of the background of the composition. The circles also vary greatly in size – another use of the principle of contrast.

Contrast is a cornerstone of the Think Vitamin design. The simple color scheme used in the design is extremely high-contrast. An extremely light – almost white – cream color is used in contrast with an extremely dark – almost black – gray. Red, which is an extremely intense color, is also thrown into the mix. As mentioned before, the design has very little use of lines and no gradients, so nearly every shape or form – whether it’s an icon, a block of ornamentation, or just type – contrasts heavily with its background.

The heavy use of contrast in the design of Think Vitamin contributes to its bold but clean design. As I mentioned earlier, the use of the principle of direction is very light – through subtle alignment of elements – but Think Vitamin’s use of contrast is very strong. There is very little that is subtle about color changes on this site.

Think Vitamin also uses a lot of similarity in its design. There is similarity between the shapes of the elements, such as the circular icons, and pill-shaped category links. There are also very few font changes in the design. Subtle alignment is used instead of ornamentation throughout. These uses of similarity further intensify the contrast that is used in the basic but bold color scheme of the design.

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

As you saw in the last chapter, the MailChimp logo (shown in Figure 6-20) – designed by Hicksdesign (www.hicksdesign.co.uk) – makes stunning use of geometric proportions in creating visual interest. But it also makes great use of design principles.

Compositionally, the MailChimp logo generally takes the form of a triangle. As you can see in Figure 6-21, the invisible lines that connect the head to the left hand, and the left hand to the feet, and back up to the head, lead your eye around the logo. It’s self-contained.

There are many other directional relationships within the logo as well. If your eye enters the logo from the mailbag, it’s led up the mailbag to the head of the chimp. If your eye enters through the extended left hand of the chimp, your eye is led up the arm and once again to the head. The strong triangular nature of the composition keeps you looking throughout the composition of the logo.

Foreground/background relationships

Because the MailChimp logo is a strongly self-contained element, the foreground/background relationships within it are very subtle. The use of shading throughout the features of the chimp, as well as the mailbag, give the chimp a sense of dimension. It really pops out at you.

This comes in handy when the logo is used within a more complex composition. In Figure 6-22, notice, for example, how the dimensional chimp pops off of the flat background on the MailChimp home page. It’s as if the chimp is also on a different layer from the headline and other type on the page.

Dominance

The MailChimp logo is a self-contained element, so the principle of dominance isn’t used within it a great deal. However, because the logo stands so strongly on its own, it makes a good design element for creating dominance in any composition in which it is used. Notice how the strong directional presence of the logo acts as a visual anchor to hold your eye and direct your eye toward the headline on the page.

Similarity

As I demonstrated in Chapter 5, the MailChimp logo is made up of a series of circles. This gives the chimp very rounded features, which naturally leads to similarity in forms. But the curved forms that are created from these circles are echoed throughout the rest of the chimp’s features. Notice, in Figure 6-23, that there are hardly any straight lines on the chimp. The chimp’s hands and fingers are a series of smooth curves that gently transition to one another. Even the mailbag is made up of curved lines.

Many of the more defined parts of the chimp are similar in form as well. Look at the pointy hairs next to the chimp’s left hand, for example – they’re made up of curved lines. Notice that a very similar shape is used to define the separation between the fingers of the chimp. The chimp’s smile is also very similar to the hairs.

Rhythm

The repeated use of curved forms throughout the chimp helps contribute to the sense of rhythm in this logo. Notice, in Figure 6-24, the rhythmic progression between the chimp’s left arm, the chimp’s left leg, and the chimp’s trailing leg. The repetition of limbs creates a sense of rhythm that makes the chimp look like it’s in motion. This rhythm is intensified by the hairs on the edge of the chimp’s fur. Look at how much coarser the fur is on the left arm of the chimp. As your eye moves to the left foot of the chimp, you notice the hair is less coarse. On the right knee, finally, there is hardly any texture to the hair. This rhythmic progression is punctuated by the hairlike lines that define the toes on the right foot of the chimp.

Texture

The MailChimp logo also makes good use of the principle of texture. Overall, the logo has a satiny sheen to it, which gives all its various parts a cohesive look. In Figure 6-25, you can see that texture variation is also suggested throughout the logo. Notice, for example, how the sharp hairs that define the fur differ from the smooth belly and skin on the hands, feet, and face of the chimp. The strongest variation in texture in this logo can be found in the shiny buckles of the mailbag, and the black band that goes around the chimp’s hat.

Direction

There is a strong sense of direction in the MailChimp logo. Since the chimp is leaning forward, and is clearly walking or running at a brisk pace, it gives the overall logo a sense of forward direction. The limbs of the chimp are arranged in ways that create a strong sense of direction as well. The left hand, left foot, and trailing right foot all radiate from the center of the chimp and lead your eye from one limb to another. As shown in Figure 6-26, if your eye rests on the trailing right foot, your eye is very quickly directed by the strap of the mailbag back up to the head of the chimp.

Contrast

While contrast isn’t a cornerstone of the design of the MailChimp logo, as it is in the Think Vitamin website, its use still contributes to the beauty of the logo. The contrast of texture that I’ve already talked about helps create visual interest; contrast is also used carefully in a couple key areas to draw the eye to important parts of the composition.

In Figure 6-27, notice that there is a ring of darker fur toward the back of the chimp’s head. This darkness, along with the dark brim of the hat, helps frame the chimp’s face and makes it pop.

There is also color contrast used in the MailChimp logo. The mailbag and hat of the chimp are blue, but the base color of the fur and belly of the chimp are somewhat orange. I’ll talk about this more in Chapter 9, but blue and orange are considered opposites of each other – much like black and white are opposites. This contrast makes the mailbag and the chimp stand out against one another.

Knowledge Applied

Many people think of design as colors, shapes, and white space, but as you’ve learned in this chapter and the previous chapter, numerous invisible concepts contribute to beautiful design. Unlike geometric proportions, which are simply good to know, understanding composition and mastering the use of design principles is absolutely critical to creating beautiful design. When someone says that a person “has an eye for design,” these design principles are what they’re talking about. Great designers know how to use design principles.

> Look for design principles at work in everything you see. Next time you’re on a website that looks visually stunning, pay attention to its use of dominance in telling you where to look. See how direction is being used to guide your eye throughout. What other design principles do you see being used (or not being used)?

> If you made a simple composition of your own in the last chapter, try experimenting with it to practice, at a very basic level, your use of design principles. Concentrate, one at a time, on using each of the principles I’ve outlined in this chapter.