BRAINIAC DESIGN:
WAYS TO IMPROVE YOUR VISUAL PERCEPTION
BRAINIAC DESIGN: WAYS TO IMPROVE YOUR VISUAL PERCEPTION
TABLE OF CONTENTS
3
1 2 3 4
ABOUT THE brain and the eyes: the invisible magic
behind synapses DESIGN PRINCIPLES: VISUAL PERCEPTION AND THE PRINCIPLES OF GESTALT PAGE 6
ABOUT THE THINGS WE KIND OF KNOW, BUT DON’T KNOW
HOW TO EXPLAIN DESIGN PRINCIPLES: VISUAL WEIGHT AND DIRECTION PAGE 26
ABOUT THE beauty of simmetry: what to look for
looking perfect
DESIGN PRINCIPLES: COMPOSITIONAL BALANCE, SYMMETRY AND ASYMMETRY PAGE 46
ABOUT THE attention, color and positioning: who
rule the pages
DESIGN PRINCIPLES: DOMINANCE, FOCAL POINTS AND HIERARCHY PAGE 76
CHPTR1
ABOUT THE brain and the eyes: the invisible magic
behind synapses
CHPTR1 DESIGN PRINCIPLES: VISUAL PERCEPTION AND THE PRINCIPLES OF GESTALT STEVEN BRADLEY
In 1910, psychologist Max Wertheimer had an insight when he observed a series of lights flashing on and off at a railroad crossing. It was similar to how the lights encircling a movie theater marquee flash on and off.w To the observer, it appears as if a single light moves around the marquee, traveling from bulb to bulb, when in reality it’s a series of bulbs turning on and off and the lights don’t move it all. This observation led to a set of descriptive principles about how we visually perceive objects. These principles sit at the heart of nearly everything we do graphically as designers. This is the start of a series of posts about design principles. It begins with these principles of gestalt, because many of the design principles we follow arise out of gestalt theory. In this post, I’ll walk you through a little bit of theory and offer some basic definitions of gestalt principles. Future posts in this series will consider aspects of design like space, balance and visual hierarchy. In upcoming posts, I’ll point out which gestalt principles influence the aspects of design being discussed, and I’ll offer more practical uses and examples of how the gestalt principles are used in Web design. the predictions into software for automating graphic design.
“
THE WHOLE IS OTHER THAN THE SUM OF THE PARTS. KURT KOFFKA
“
7
THE KEY IDEAS BEHIND GESTALT THEORY The quote is gestalt in a nutshell. When human beings see a group of objects, we perceive their entirety before we see the individual objects. We see the whole as more than the sum of the parts, and even when the parts are entirely separate entities, we’ll look to group them as some whole. There are several key ideas behind gestalt: Emergence The whole is identified before the parts. Emergence is the process of forming complex patterns from simple rules. When attempting to identify an object, we first seek to identify its outline. We then match this outline pattern against shapes and objects we already know to find a match. Only after the whole emerges through this outline pattern matching, do we start to identify the parts that make up the whole. When designing, keep in mind that people will identify elements first by their general form. A simple well defined object will communicate more quickly than a detailed object with a hard to recognize contour. Reification Our mind fills in the gaps. Reification is an aspect of perception in which the object as perceived contains more spatial information than what is actually present. As we attempt to match what we see to the familiar patterns we have stored in memory, there isn’t always an exact match. Instead we find a near match and then fill in the gaps of what we think we should see. Reification suggests that we don’t need to present the complete outline in order of viewers to see it. We can leave out parts of the outline as long as we provide enough of it to
CHPTR1
allow for a close enough pattern match. You can see examples of this a little further down under the principle of closure. Multi-stability The mind seeks to avoid uncertainty. Multi-stability is the tendency of ambiguous perceptual experiences to move unstably back and forth between alternative interpretations. Some objects can be perceived in more than one way. An example from below in the section of figure/ground is one you’ve likely seen before. The image can be seen as either two faces in profile or as a vase. You can’t see both at once. Instead you bounce back and forth quickly between the two stable alternatives. One will tend to be your dominant perception and the longer you go without begin able to see the other, the harder it will be to see that other perception. From a design perspective if you want to change someone’s perception, don’t try to change it all at once. Find a way to get them to see an alternative. Then work to strengthen that alternative view, while weakening the original. Invariance We’re good at recognizing similarities and differences. Invariance is a property of perception in which simple objects are recognized independent of their rotation, translation and scale. Since we often encounter objects from different perspectives, we’ve developed an ability to recognize them despite their different appearance. Imagine if you could only recognize someone you knew if they stood directly in front of you and faced you, but you couldn’t recognize them once they turned in profile. Despitethe different visual perspective we can still recognize people.
9
You can see these ideas in play in the principles below. The main idea is that gestalt principles are about perception and what is visually communicated by objects. The principles speak to the core of the visual language within which we work.
GESTALT PRINCIPLES Most of the principles are relatively easy to understand. There’s a common theme running through many of them. Many of the principles below will follow this pattern.
“
ALL ELSE BEING EQUAL, ELEMENTS THAT ARE RELATED BY X TEND TO BE GROUPED PERCEPTUALLY INTO HIGHER-ORDER UNITS. STEPHEN PALMER
“
The principles either define X or the higher order that’s perceived. This is the fundamental principle of gestalt.
“
PEOPLE WILL PERCEIVE AND INTERPRET AMBIGUOUS OR COMPLEX IMAGES AS THE SIMPLEST FORM(S) POSSIBLE.
“
CHPTR1
We prefer things that are simple, clear and ordered. Instinctually these things are safer. They take less time for us to process and present less dangerous surprises.
When confronted with complex shapes, we tend to reorganize them into simpler components or into a simpler whole. You’re more likely to see the left image above composed of the simple circle, square and triangle like you see on the right than as the the complex and ambiguous shape the whole forms. In this case, seeing three distinct objects is simpler than seeing one complex object. In other cases, it’s simpler to see a single object, which brings us to…
CLOSURE
“
WHEN SEEING A COMPLEX ARRANGEMENT OF ELEMENTS, WE TEND TO LOOK FOR A SINGLE, RECOGNIZABLE PATTERN.
“
11
As with Prägnanz, closure seeks simplicity. Closure is the opposite of what we saw in the Prägnanz image above where three objects were simpler than one. With closure, we instead combine parts to form a simpler whole. Our eye fills in the missing information to form the complete figure.
In the left image above, you should see a white triangle even though the image is actually comprised of three black Pac-Man-like shapes. On the right image, you see a panda even though the figure is several random shapes. Seeing the triangle and panda is simpler than trying to make sense of the individual parts. Closure can be thought of as the glue holding elements together. It’s about the human tendency to seek and find patterns. The key to closure is providing enough information so the eye can fill in the rest. If too much is missing, the elements will be seen as separate parts instead of a whole. If too much information is provided, there’s no need for closure to occur.
CHPTR1
SYMMETRY AND ORDER LINK
“
PEOPLE TEND TO PERCEIVE OBJECTS AS SYMMETRICAL SHAPES THAT FORM AROUND THEIR CENTER.
Symmetry gives us a feeling of solidity and order, which we tend to seek. It’s our nature to impose order on chaos. This principle leads us to want balance in composition, though our compositions don’t need to be perfectly symmetrical to be in balance.
{ }{
}{
}
In the image above, you should see three pairs of opening and closing brackets. The principle of proximity, which we’ll get to later in this post, might suggest we should see something else. That suggests symmetry takes precedence over proximity. Since our eyes will quickly find symmetry and order, these principles can be used to effectively communicate information quickly.
“
13
FIGURE/GROUND
“
ELEMENTS ARE PERCEIVED AS EITHER FIGURE (THE ELEMENT IN FOCUS) OR GROUND (THE BACKGROUND ON WHICH THE FIGURE RESTS).
“
The figure/ground relationship can be either stable or unstable depending on how easy it is to determine which is which. The classic example of where the relationship is unstable is the left image above. You either see a vase or two faces depending on whether you see the black color as figure and the white as ground, or vice versa. That you can easily bounce back and forth between the two perceptions demonstrates the unstable relationship. The more stable the relationship, the better we can lead our audience to focus on what we want them to see. Two related principles can help us: Area The smaller of two overlapping objects is seen as figure. The larger is seen as ground. You can see this in the right image above. The smaller shape is the figure regardless of color.
CHPTR1
Convexity Convex rather than concave patterns tend to be perceived as figures.
UNIFORM CONNECTEDNESS
“
ELEMENTS THAT ARE VISUALLY CONNECTED ARE PERCEIVED AS MORE RELATED THAN ELEMENTS WITH NO CONNECTION.
“
In the image below, lines connect two pairs of elements. This connection leads us to perceive that the connected elements are related to each other in some way.
15
Of all the principles suggesting objects are related, uniform connectedness is the strongest. In the image above, even though we see two squares and two circles, we see the square–circle pairs as more strongly related because they are visually connected. Notice that the lines don’t need to touch the elements for the connection to be perceived.
COMMON REGIONS
“
ELEMENTS THAT ARE VISUALLY CONNECTED ARE PERCEIVED AS MORE RELATED THAN ELEMENTS WITH NO CONNECTION.
“
Another way to show a connection between elements is to enclose them in some way. Everything inside the enclosure is seen as related. Everything outside the encloser is seen as separate. The circles in the image below are all the same, yet we see two distinct groups, with the circles in each enclosure related in some way.
CHPTR1
The typical way to show a common region is to draw a box around the related elements like I’ve done above. Placing the elements on a different background color than their immediate surroundings will also work.
PROXIMITY
“
OBJECTS THAT ARE CLOSER TOGETHER ARE PERCEIVED AS MORE RELATED THAN OBJECTS THAT ARE FURTHER APART.
“
Proximity is similar to common regions but uses space as the enclosure. When elements are positioned close to one another, they are seen as part of a group rather than as individual elements. This is especially true when the elements in the group are closer to each other than they are to any elements outside the group.
The objects don’t need to be similar in any other way beyond being grouped near each other in space in order to be seen as having a proximity relationship.
17
CONTINUATION
“
ELEMENTS ARRANGED ON A LINE OR CURVE ARE PERCEIVED AS MORE RELATED THAN ELEMENTS NOT ON THE LINE OR CURVE.
“
It’s instinct to follow a river, a path or a fence line. Once you look or move in a particular direction, you continue to look or move in that direction until you see something significant or you determine there’s nothing significant to see.
Another interpretation of this principle is that we’ll continue our perception of shapes beyond their ending points. In the image above, we see a line and curve crossing instead of four distinct line and curve segments that meet at a single point.
CHPTR1
COMMON FATE (SYNCHRONY)
“
ELEMENTS THAT MOVE IN THE SAME DIRECTION ARE PERCEIVED AS MORE RELATED THAN ELEMENTS THAT ARE STATIONARY OR THAT MOVE IN DIFFERENT DIRECTIONS.
“
Regardless of how far apart the elements are placed or how dissimilar they appear, if they are seen as moving or changing together, they’ll be perceived as being related. The elements don’t need to be moving for the principle of common fate to be present. It’s more that they are seen as having a common destination. For example, if four people are clustered together, but two are observed heading toward the right, they will be seen as having a common fate. Even if two are only looking in the same direction, they’ll be perceived as having a common fate.
In the image above, the arrows are enough to indicate the elements share a common fate. While movement or change isn’t necessary, both are still a stronger indication of common fate than things like arrows or looking in the same direction which only imply movement.
19
PARALLELISM
“
ELEMENTS THAT ARE PARALLEL TO EACH OTHER ARE SEEN AS MORE RELATED THAN ELEMENTS NOT PARALLEL TO EACH OTHER.
“
This principle is similar to the common fate principle above. Lines are often interpreted as pointing or moving in some direction. Parallel lines are seen as either pointing or moving in the same direction and are thus related.
It should be noted that for parallelism to be perceived, the lines can also be curves or shapes, though with the latter the shapes should be somewhat line-like in order for them to appear parallel.
CHPTR1
SIMILARITY
“
ELEMENTS THAT SHARE SIMILAR CHARACTERISTICS ARE PERCEIVED AS MORE RELATED THAN ELEMENTS THAT DON’T SHARE THOSE CHARACTERISTICS.
“
Any number of characteristics can be similar: color, shape, size, texture, etc. When a viewer sees these similar characteristics, they perceive the elements as being related due to the shared characteristics. In the image below, red circles are seen as related to the other red circles and black circles to black circles due to the similarity in color. Red and black circles are seen as dissimilar to each other even though they’re all circles.
An obvious place to find similarity online is in the color of links. Typically, links within content will be styled the same way, often blue and underlined. This lets the viewer know that the different pieces of text are related. Once one is discovered to be a link, it communicates the others are also links.
21
FOCAL POINTS
“
ELEMENTS WITH A POINT OF INTEREST, EMPHASIS OR DIFFERENCE WILL CAPTURE AND HOLD THE VIEWER’S ATTENTION.
“
This principle suggests that our attention will be drawn toward contrast, toward the element that is unlike the others in some way. In the image below, your eye should be drawn to the square. It’s a different shape and color from the other elements. I’ve also given it a drop shadow to further emphasize it.
The principle of focal points likely arises out of our need to quickly identify the unknown to alert us to potential danger. The principles of similarity and focal points are connected, and focal points can’t be seen without the presence of similarity among other elements.
CHPTR1
“
ELEMENTS TEND TO BE PERCEIVED ACCORDING TO AN OBSERVER’S PAST EXPERIENCE.
PAST EXPERIENCES
“
Past experience is perhaps the weakest gestalt principle. In conjunction with any of the other principles, the other principle will dominate over the past experience principle. Past experience is unique to the individual, so it’s difficult to make assumptions about how it will be perceived. However, there are common experiences we all share. For example, a lot of color meaning arises out of past experience. Having seen traffic lights throughout our lives, we expect red to mean stop and green to mean go. You probably see the image above as a traffic light on its side, because of the three common colors. That’s past experience at work. Many of our common experiences also tend to be cultural. Color again provides examples. In some countries, white is seen as pure and innocent and black as evil and death. In other countries, these interpretations are reversed. Conventions can arise when the experience is commonly shared, though again it’s important to remember that we don’t all share the same experiences.
23
CHPTR2
ABOUT THE THINGS WE KIND OF KNOW, BUT DON’T KNOW
HOW TO EXPLAIN
CHPTR2
DESIGN PRINCIPLES: VISUAL WEIGHT AND DIRECTION STEVEN BRADLEY
Every element on a web page exerts a visual force that attracts the eye of the viewer. The greater the force, the more the eye is attracted. These forces also appear to act on other elements, imparting a visual direction to their potential movement and suggesting where you should look next. We refer to this force as visual weight and to the perceived direction of visual forces as visual direction. Both are important concepts to understand if you want to create hierarchy, flow, rhythm and balance in your composition.
VISUAL WEIGHT Physical weight is a measure of the force that gravity exerts on an object, but two-dimensional objects (such as elements on a web page) don’t have mass and, therefore, don’t have any physical weight. Visual weight is a measure of the force that an element exerts to attract the eye. Two-dimensional objects can attract attention. The more an element attracts the eye, the greater its visual weight. In the previous post in this series I talked about primitive features, or the intrinsic characteristics of an element, such as size, color and shape. In that post I mentioned how, through these features, you can show contrast and similarity between elements. For example, contrasting elements by making one very big and the other very small makes it clear that the elements are different.
27
Controlling the combination of these features is how you control visual weight. Red tends to attract the eye more than blue, and larger elements attract the eye more than smaller ones. A large red object carries more visual weight than a small blue object. The sum of these characteristics or primitive features is what determines an element’s visual weight. It’s not any one feature, but rather their combination that determines the visual weight of an element. Some combinations of features will attract the eye more than others. To create elements of different visual weight, you would use different combinations of primitive features.
HOW DO YOU MEASURE VISUAL WEIGHT? There’s no way I know of to precisely measure the visual weight of a design element. You use your experience and judgment to determine which elements have greater or lesser weight. Develop an eye and then trust it. The areas of a composition that attract your eye are those that have greater visual weight. Learn to trust your eye. This doesn’t mean that you have to randomly try things and see what attracts your eye the most and the least. You can isolate each characteristic to know that something bigger weighs more than something smaller, for example. It’s in the combination of features that your eye will help. Fortunately, others have isolated and tested these characteristics. Below are some of the characteristics you can change on any element and a description of how changing them will
CHPTR2
either increase or decrease the element’s visual weight. Let’s start with the primitive features that I mentioned in the last post: size, color, value, position, texture, shape and orientation. Size Large elements have more visual weight than small elements. Color Warm colors advance into the foreground and tend to weigh more than cool colors, which recede into the background. Red is considered the heaviest color and yellow the lightest. Value Dark elements have more visual weight than light elements. Position Elements located higher in the composition are perceived to weigh more than elements located lower in the composition. The further from the center or dominant area of a composition, the greater the visual weight an element will carry. Elements in the foreground carry more weight than elements in the background. Texture Textured elements appear heavier than non-textured objects. Texture makes an element appear three-dimensional, which gives the appearance of mass and physical weight. Shape Objects with a regular shape appear heavier than objects with an irregular shape. The irregularity gives the impression that mass has been removed from a regular shape. Orientation Vertical objects appear heavier than horizontal objects. Diagonal elements carry the most weight.
29
You don’t have to limit yourself to the primitive features above. You can use additional characteristics to control visual weight. Density Packing more elements into a given space increases the visual weight of the space. The viewer will perceive a larger or darker combined element as opposed to several smaller and lighter elements. Local white space White space appears to have no visual weight because it’s seen as empty. Any object placed within that space will seem heavier because of the space around it. Intrinsic interest Some things are more interesting than others. The more complex or intricate an element, the more interest it will draw and the more it will attract the eye. Your own interests also play a role. If you’re more interested in cars than in planes, then an image of a car will grab your attention more than an image of a plane. Depth A larger depth of field gives an element in focus increased visual weight, likely due to the contrast between the focus and unfocused areas. Saturation Saturated colors appear heavier than desaturated colors. Perceived physical weight We know that a house weighs more than a shoe. An image of a house will weigh more visually than an image of a shoe, because we expect the house to weigh more. In the previous post in this series about contrast and similarity, I mentioned that contrast draws attention to an element.
CHPTR2
In other words, an element that contrasts with its surroundings will appear visually heavier than its surroundings. For example, circles usually appear heavier than rectangles on a web page because most website elements are rectangular. Not all characteristics contribute equally to visual weight. Most people will notice the color of an element before its shape, which suggests that color contributes more to visual weight. You also have to consider the uniqueness of a given composition, because contrasting elements appear weightier than the elements they contrast with. The specifics of your composition will determine what contrasts and what doesn’t. Remember that visual weight is a combination of the above attributes. While big carries more visual weight than small, a small dark circle surrounded by a generous amount of white space and located at the top of the page will likely appear to weigh more than a larger yet irregularly shaped object of a cool light color at the bottom of the page.
VISUAL WEIGHT AND GESTALT One of the ideas behind this series is to point out how much gestalt principles contribute to design principles. Figure-ground Visual weights can be used to separate the two by giving the figure more weight than the background. Proximity The space between elements leads to different amounts of local white space and different densities of the objects within the space. Similarity and contrast You can use visual weight to signal either. Contrast will lead to greater visual weight in the contrasting element. Elements with similar visual weight will naturally exhibit similarity.
31
Focal point Points of attraction in a composition are focal points, and they carry more visual weight than other elements. Past experience The viewer’s experience will contribute to how much intrinsic interest they think an element holds.
STRUCTURAL SKELETONS In his book Art and Visual Perception: A Psychology of the Creative Eye, Rudolf Arnheim proposed the idea of a structural skeleton behind every canvas. The idea is that every canvas has a structural network of forces running through it. Even if no elements are inside the canvas, our eye will be drawn to certain parts of the canvas because of this network of forces seen in the image below.
CHPTR2
The center and the four corners of a rectangular canvas act like magnets to the eye. The strongest magnet is in the center, though not the geometric center of the canvas. Rather, the center that attracts the eye is the optical center, and it sits just above the true geometric center. The axes run from corner to corner, and the points along these axes that are midway between center and corner also attract attention. These midway points can, then, be connected with vertical and horizontal lines, which create additional axes of visual force. We’ll come back to this idea when we get to the post in the series about compositional flow. For now, consider that, in the absence of design, a viewer’s eye will be attracted to certain points in Arnheim’s structural skeleton, and the eye will move from point to point by following the directions of the different axes. You can make use of the structural net by placing elements where they would naturally attract the eye, thereby increasing their attractive force.
VISUAL DIRECTION AND GESTALT LINK You can think of direction as real or imaginary lines that point from one element to another or that connect different elements. The lines don’t need to be visible. Uniform connectedness The lines connecting elements have direction. An eye gaze creates an imaginary line between the eye and whatever the eye is gazing at. Continuation This principle relates to elements arranged along a line or curve, as though they are moving in the direction of the line or curve.
33
Common fate Elements seen as having a common fate are those that move or appear to move in the same direction. Parallelism In order for elements to be seen as parallel, their internal axes (the same ones that impart direction) must be established.
THE OVERALL DIRECTION OF A COMPOSITION One more concept of visual direction is that every composition will be seen to have a dominant direction, whether horizontal, vertical or diagonal. A horizontal direction makes the composition appear calm and stable. A vertical direction adds a sense of formality, alertness and balance. A diagonal direction suggests movement and action. The dominant direction of a composition will be established by the direction of the majority of elements or perhaps a few key elements. The direction will help set a general mood according to the general meaning ascribed to different types of lines. It is possible for a composition to have no dominant direction. The number of horizontal and number of vertical elements might be equal, for example. In this case, the viewer could decide which direction is dominant.
EXAMPLES For the following examples, I’ve grabbed some screenshots of pages and will share some thoughts on how I see visual weight distributed in each. You might see it differently, and that’s OK.
CHPTR2
Different eyes are attracted to different things. Again, I’m aware of no way to measure how much visual weight an element carries. Besides, two people could easily look to different areas of a composition because of their different interests. A bit of subjectivity is to be expected. An easy way to tell which elements have the most weight is to use the squint test. Close your eyes a little until some elements fade away. Those that remain have more visual weight than those that disappear. Bureau The article from Bureau shown is nearly all text. The main heading carries the most visual weight. It’s the largest piece of text, and it has some local white space around it as well. It’s arguably the most important information that someone who lands on the page should see, so it makes sense for it to be visually weighty. Links gain some weight through their contrast with the surrounding text, although the cool color lessens the gain in my opinion. The element with the least visual weight is the text in the right column. This makes sense because focus is most likely meant to be given to the article and not what’s in the sidebar. Notice the small bit of red text at the top of the right column. It’s a link to the home page of the website. As small as it is, the red gives the text some additional weight, helping it to stand out from the other text in the column. Everything in the image appears larger when you’re viewing the website directly, so the small red text isn’t quite as small as it is here. When you apply the squint test, the whole right column disappears, and you’re left with the main heading above the article and a large block of text below it. The main direction of the composition is vertical because it’s two long columns down the page. The difference in background color between the columns creates a vertical line leading you down the page and adding to the vertical direction of the composition.
35
35
CHPTR2
Create Digital Media When the home page for Create Digital Media loads, the colorful elements animate into place, calling a lot of attention to themselves. Even if you miss the animation, you likely see these elements as carrying the most weight, due to the saturated pink, yellow and blue. These elements also occupy the same space, creating a dense area in the middle of empty space. Note: Between the writing and publication of this post, Create Digital Media has closed its doors. Visit its home page if you’d like to know why. The graphics at the bottom are the next weightiest for me. They’re dark, large and complex in shape. They pull you to each of the three sections, which contain the next most visually prominent elements, the section headings. The main headline on the page is large and dark; compare it to the text directly below it. Other items that stand out for me, due to their higher visual weight, are the company’s name at the top and the logo at the bottom. With the squint test, the colored shapes and text and the graphics at the bottom remain after most of the elements have faded away. The main headline fades for me, although I can still tell it’s there. I also somewhat notice the logo in the lower-left corner, although it fades much more quickly than the graphic near it. Here, I think the main direction is horizontal. The lines run horizontally, as does the main heading and the navigation. Another of the more visually prominent elements, the highlighted text, is also horizontal. The three gears could be regarded as a single triangular, albeit curvy, shape, thus establishing diagonal directions. They don’t run long, though, and they’re the only diagonals on the page.
37
37
CHPTR2
Javier Marta Three elements compete to be the visually weightiest on Javier Marta’s home page. The graphics, the green separators between sections, and the menu items at the top all call for attention. Graphics These are large, dark and surrounded by white space. Each graphic intrinsically hold its own interest. Green separators These have color, are larger and, like the graphics, are surrounded by white space Menu items These are dark, large and, once again, surrounded by white space. Javier’s logo carries a little less visual weight for me than the menu items around it, although it’s still very prominent among them. It does carry more weight than the text, but not as much as the menu items in my mind. You may disagree. The squint test causes the menu items and logo to blend into a single unit. The graphics and separators are still visually prominent, and the text remains visible as large blocks. You can still see everything while squinting, even if you can’t make out what any of it says. On my screen, only the header and the “El evento” section are visible, giving the page a horizontal direction. However, four sections in total are on the page. When the sections are viewed all at once, the alignment of the green separators gives the composition a vertical direction. And, of course, seeing the whole page at once changes the canvas from horizontal to vertical.
39
CHPTR2
I wonder if the two graphics shown in the screenshot above would have been better on opposite sides. In the top graphic, the camera points right, which is where my eye follows. Better would be to guide the eye to the text. In the bottom graphic, the woman’s umbrella does point right, but she’s walking left, which is where I then tend to look. Both graphics might work better if their direction led back into the text instead of away from it. Stanford Arts The image at the top of Stanford Arts’ home page carries the most visual weight. It’s the largest element on the page and, being an image, has a lot of intrinsic interest. It’s also located at the top of the composition. In truth, it takes up most of my screen. I think the triangular images against the angular containers are the next weightiest elements. After that are the large red blocks that make up the header and footer. When I perform the squint test, all of the elements are visible longer than I’d expect. The elements have a good deal of both light and dark contrast, which helps them stand out. Eventually, the only things that remain are the images, although in less than full detail. I can make out the large image at the top but only the shapes of the triangular images below. The design is also interesting for its visual direction. Diagonals dominate, and because most web pages are not dominated by diagonal directions, they capture more attention here. They subvert your expectation. The particular photograph that I captured in the screenshot above also offers something of a diagonal, albeit a bit curved in parts and created by a moving line of people in others.
41
CHPTR2
Both the woman (in the rightmost triangular image) and the photographer (in the center triangle) have a direction leading to the right. Better might have been to reverse the woman to face inward and move the camera to the left block to points inward, too. Granted, the images change when you hover over any of the links in the blocks. Still, the images tend to lead outward instead of inward.
SUMMARY The visual weight of an element is a measure of how much the element attracts the eye of the viewer. A visually heavy element will attract the eye to it. Visual direction is the perceived direction of forces acting on and exerted by elements. The direction is a cue to the viewer’s eye to move elsewhere. Many intrinsic characteristics can be modified to make an element visually weightier or lighter. A few can be used to establish an element’s visual direction, as can the canvas itself. Over the remaining posts in this series, we’ll see how visual weight and visual direction lead to principles like dominance and hierarchy, flow and rhythm and, ultimately, compositional balance.
43
CHPTR1 CHPTR3
45
ABOUT THE beauty of simmetry: what to look for
looking perfect
CHPTR3 DESIGN PRINCIPLES: COMPOSITIONAL BALANCE, SYMMETRY AND ASYMMETRY STEVEN BRADLEY
A balanced composition feels right. It feels stable and aesthetically pleasing. While some of its elements might be focal points and attract your eye, no one area of the composition draws your eye so much that you can’t see the other areas. Balancing a composition involves arranging both positive elements and negative space in such a way that no one area of the design overpowers other areas. Everything works together and fits together in a seamless whole. The individual parts contribute to their sum but don’t try to become the sum. An unbalanced composition can lead to tension. When a design is unbalanced, the individual elements dominate the whole and the composition becomes less than the sum of its parts. In some projects, unbalanced might be right for the message you’re trying to communicate, but generally you want balanced compositions.
“
HAPPINESS IS NOT A MATTER OF INTENSITY BUT OF BALANCE, ORDER, RHYTHM AND HARMONY. THOMAS MERTON
PHYSICAL AND VISUAL BALANCE
“
Balance is easy to understand in the physical world, because we experience it all the time. When something is unbalanced, it tends to fall over. You’ve probably been on a seesaw or a teeter-totter at some time in your life — you on one side and a friend on the other.
47
Assuming you were both about the same size, you were able to easily balance on the seesaw. The following image appears to be in balance, with two equally sized people equally distant from the fulcrum on which the seesaw balances.
The person on the left makes the seesaw rotate counterclockwise, and the person on the right makes it rotate clockwise by an equal amount. The force of each person acts in a different direction, and their sum is zero. If one of the people was much bigger, though, the balance would be thrown off.
This image doesn’t feel right because we know the person on the left isn’t big enough to balance the person on the right. The clockwise force should be much greater, and the seesaw should be touching the ground on the right. However, if the larger person slid in toward the center, then the seesaw would be balanced again.
CHPTR3
Here, the force of the larger person is reduced by being closer to the fulcrum on which the seesaw balances. I’ll trust you’ve been on a seesaw before or at least watched others play on one and that you have a pretty good sense of what’s going on. Visual balance is similar. Physical weight is replaced by visual weight. The direction in which the physical weight acts is replaced by visual direction. As a reminder, below are definitions for visual weight and visual direction, although I’ll refer you back to the fourth post in this series for more details. Visual weight This is the perceived weight of a visual element. It’s a measure of how much anything on the page attracts the eye of the viewer. Visual direction This is the perceived direction of a visual force. It’s the direction in which we think an element should be moving if it were given a chance to move according to the forces acting on it. You don’t use instruments to measure the forces. You don’t use formulas to calculate whether everything is in balance. Rather, you use your eye to determine whether a composition is balanced.
49
WHY VISUAL BALANCE IS IMPORTANT Just as in the physical world, visual balance is a good thing. It’s desirable in and of itself. An unbalanced composition can feel uncomfortable for the viewer. Look back at the second of the three seesaw images — it looks wrong because we can tell that the seesaw shouldn’t be in balance. Visual weight is a measure of the visual interest of an element or area in a design. When a composition is visually balanced, every part of it holds some interest. The visual interest is balanced, which keeps viewers engaged with the design. Without visual balance, viewers might not see all areas of the design. They probably won’t spend any time in areas with less visual weight or interest. Any information in those areas could easily go unnoticed. You would balance a design visually because you want to balance the points of interest in your composition, so that viewers spend time with all of the information you want to convey.
FOUR TYPES OF BALANCE There’s more than one way to balance a composition. The images in the previous section show two of them. The first image is an example of symmetrical balance, and the second is an example of asymmetrical balance. Two other types of balance are radial and mosaic.
CHPTR3
Symmetrical balance occurs when equal weights are on equal sides of a composition, balanced around a fulcrum or axis in the center. Symmetrical balance evokes feelings of formality (it’s sometimes called formal balance) and elegance. A wedding invitation is a good example of a composition that you’d likely want to be symmetrically balanced. The downside of symmetrical balance is that it’s static and sometimes regarded as boring. Because half of the composition mirrors the other half, at least half of the composition will be rather predictable.
Asymmetrical balance results from unequal visual weight on each side of the composition. One side of the composition might contain a dominant element, which could be balanced by a couple or more lesser focal points on the other side. One visually heavy element on one side might be balanced by a handful of lighter elements on the other. Asymmetrical balance is more dynamic and interesting. It evokes feelings of modernism, movement, energy and vitality. Asymmetrical balance offers more visual variety, although it can be more difficult to achieve because the relationships between elements are more complex.
51
Radial balance occurs when elements radiate from a common center. Rays of sunlight and ripples in a pond after a stone is tossed in are examples of radial balance. Maintaining a focal point (fulcrum) is easy because it’s always the center. Because everything radiates from a common center, everything also leads to that center, making it a strong point of attraction.
Mosaic balance (or crystallographic balance) results from balanced chaos. Think Jackson Pollack paintings. The composition lacks distinct focal points, and the elements share a uniform emphasis. The lack of hierarchy leads to visual noise at first glance. Somehow, though, it all works together.
CHPTR3
SYMMETRY AND ASYMMETRY Both symmetry and asymmetry can be used throughout a composition, independent of, yet while contributing to, the final balance. You can have symmetrical forms in an asymmetrically balanced composition and vice versa. Symmetry is usually seen as beautiful and harmonized; however, it can also be seen as static and dull. Asymmetry tends to be more interesting and dynamic, despite not being regarded as intrinsically beautiful. Symmetry There are three primary types of symmetry. Reflection symmetry (or bilateral symmetry) occurs when everything is mirrored around a central axis. It’s probably the first thing you think of when you hear the word “symmetry.” The axis can be in any direction or orientation, although it’s often vertical or horizontal. Everything on one side of the axis is mirrored on the other side. Natural forms that grow or move across earth’s surface develop reflection symmetry. A human face and a butterfly are examples. When the reflection is a perfect mirror image, the symmetry is said to be pure. Much of the time it won’t be perfect and each side will have slight variations. This is near symmetry, and it’s more common than pure symmetry. The symmetry can even occur over multiple axes at the same time. For example, the left and right half of a composition could mirror each other, while the top and bottom also mirror each other. Snowflakes show reflection symmetry over more than two axes.
53
Rotational symmetry (or radial symmetry) occurs when everything rotates around a common center. It can occur at any angle or frequency, as long as there’s a common center. Natural forms that grow or move perpendicular to the earth’s surface develop rotational symmetry. The petals of a sunflower are an example. Rotation without reflection can be used to show motion, speed or dynamic action. Think of the spinning wheels of a moving car. Translational symmetry (or crystallographic symmetry) occurs when elements are repeated over different locations in space. Repeating fence posts are an example. The repetition creates translation symmetry. It can occur in any direction or at any distance, as long as the basic orientation is the same. Natural forms develop translational symmetry through reproduction. You can create rhythm, motion, speed and dynamic action through translation symmetry.
The butterfly is an example of reflection symmetry, the fence posts show translation symmetry, and the sunflower is an example of radial symmetry.
Symmetrical forms are commonly seen as the figure, as opposed to the ground. A symmetrical form will carry more weight than a similarly sized and shaped asymmetrical form. Symmetrical forms convey balance in and of themselves, but they could appear too stable and too balanced, leading to a lack of interest. Symmetrical forms also lead to passive space because the negative space is equal all around the form.
CHPTR3
Asymetry Asymmetrical forms lack the balance of symmetrical forms, although you can asymmetrically balance an entire composition. Asymmetry is rather common in natural forms: you’re probably right- or left-handed; fiddler crabs have different sized claws; trees branches grow in different directions; clouds have random shapes. Asymmetry creates more complex relationships between elements, and so it tends to be more interesting than symmetry. Because it’s more interesting, asymmetry can be used to draw attention. Space around asymmetrical forms is more active. Unpredictable patterns are created, and overall you have more freedom of expression with asymmetry than with symmetry. The tradeoff is that it’s harder to achieve. Much in the same way that similarity and contrast work together, you can combine symmetry and asymmetry to good effect. Balance symmetrical forms in an asymmetrical way, or balance asymmetrical forms symmetrically. Break up symmetrical forms with a random mark to add interest. Contrast symmetry and asymmetry in your composition to make elements get more attention.
GESTALT PRINCIPLES Throughout this series I’ve tried to point out how many design principles arise from gestalt principles. I also hope that as you’ve followed along you’ve seen how different design principles build on each other. One of the gestalt principles specifically addresses symmetry and order and certainly applies to compositional balance. It’s hardly the only principle that applies, though.
55
The simplicity of symmetrical forms is predicted by the Law of Prägnanz. Gestalt principles such as focal points and similarity contribute to visual weight. Principles such as continuation, common fate and parallelism impart visual direction. I also mentioned that symmetrical forms are more likely to be seen as figure rather than ground. I hope this idea that the principles of gestalt lead to many of the design principles that guide us has become clearer as you’ve read through this series. The design principles we follow didn’t arise out of thin air; they emerged from the psychology of the way we perceive our visual environment.
EXAMPLES It’s time for screenshots. I have a few more websites than usual for this last article in the series, and I’ve grouped them according to the four types of balance. As I’ve reiterated throughout the series, what follows is my opinion. This is how I see the balance in these designs. You might see it differently, which is fine. Thinking critically about the designs is more important than our agreeing about what we think.
CHPTR3
Examples of Symmetrical Balance The design of Helen & Hard’s entire website is symmetrically balanced. The screenshot here is from the “About” page, but the other pages of the website are similarly balanced. Everything reflects around a vertical axis down the center of the page. The logo is centered, the navigation bar is centered, the circular images are centered, the heading is centered, and the three columns of text are centered. The balance isn’t perfectly symmetrically. The columns have different amounts of text, for example. However, notice the top of the page. Both the logo and navigation bar are centered, but they don’t appear to be visually centered. My eye wants the logo to be centered on the ampersand, or at least closer to it. The three menu items on the right side of the navigation bar have more letters than those on the left. My eye wants them to be the same and wants the center to be in between the “About” and “People” links. I think moving these two elements out of center to make them look like they’re visually centered would balance the composition a little better.
57
CHPTR3
The home page of Tilde is another design that’s symmetrically balanced. Like Helen & Hard, everything here revolves around a vertical axis running down the center of the page: the navigation, the text, the people in the image. It’s the same as you scroll down the page. As with Helen & Hard, the symmetry isn’t pure. Centered lines of text aren’t mirror images, for one thing. Also, a couple of elements are off: the “Meet the Team” arrow pointing right and the text at the bottom of the page ending in another arrow pointing right. Both are calls to action and both break the symmetry, calling extra attention to themselves. Notice how both arrows use colors that contrast with their background, further increasing the attraction of these elements.
59
59
CHPTR3
Examples of Assymetrical Balance The home page of Carrie Voldengen’s portfolio exhibits an overall asymmetrical balance around a dominant symmetrical form. Looking at the overall composition, I see several discrete shapes. The mass of the page is a large rectangle that’s composed of a grid of smaller rectangular images. On its own, this grid is symmetrical around both the vertical and horizontal axes. It feels very strong and stable. On its own, it’s very balanced and looks like it’s not going anywhere. To the right, a block of text pulls down on the shape. It’s counterbalanced by text and the circular logo in the upper left. Both provide a relatively equal amount of visual weight acting on the grid in opposite directions. The distance to an imagined fulcrum is about the same as the weights. The text on the right is larger and darker overall, but the blue circular logo gives more weight to its general area. The circle even connects to the top-left corner of the grid through a single color. The text below the grid seems to hang from it, and it’s light enough on its own not to throw the composition out of balance. Notice that the space also feels balanced. The areas down the left, along the top right and down the right, including a bit of the bottom right, all balance each other. The area on the left is larger than the area on the right, but the right has additional space on the top and bottom.
61
CHPTR3
The images at the top of Hirondelle USA’s home page rotate. I grabbed a screenshot of this one specifically to talk about the asymmetrical balance established at the top of the page. The column in the image is slightly off center, and it anchors the composition with a strong vertical line — it’s an object we know weighs a lot. The railing on the left provides a strong connection with the left edge of the screen. It, too, feels anchored. It’s hard to imagine any design element on the page throwing either out of balance. The text above the railing feels supported by the railing; however, it’s also visually balanced by the image of the boy on the right. You might view the railing as hanging off the left side of the pole, pulling it out of balance, but I think the intrinsic interest of the boy as well as the darker values in the background behind him counterbalance both the rail and the text on the left and keep things in balance. There’s a sense of translation symmetry as the gold lines of text repeat in the upper left and lower right of the image, as well as in the button further down the page. The white text is repeated as well.
63
CHPTR3
Examples of Radial Balance The home page of Vlog.it exhibits radial balance, which I hope is clear from the screenshot. Other than the shape in the top-right corner, everything revolves around the center of the page, as the three rings of images rotate around the center circle. What you can’t see in the screenshot is how the page loads. A line is drawn from the lower-left corner to the center of the page. From that point on, just about everything that appears on the page does so by revolving around the center or radiating from it, like ripples in a pond. The smaller circle in the upper right adds a little translation symmetry and some asymmetry, increasing visual interest in the composition.
65
CHPTR3
Opera’s Shiny Demos home page isn’t circular, but the text links all seem to emanate from a common or near common center. It’s easy to imagine the whole shape spinning around one of the squares in the middle or maybe one of the corners where four squares meet. The Shiny Demos heading in the upper left and the Opera logo in the lower right counterbalance each other and also appear to radiate from the same center as the text links. It’s a good example of how radial balance doesn’t necessarily require the use of circles.
67
CHPTR3
Examples of Mosaic Balance You might expect mosaic balance to be the least used online, especially after I offered Jackson Pollack paintings as an example of mosaic balance. Many more examples are online than you might realize. The home page of Rabbit’s Tale is a good example. There’s certainly a random and chaotic feel with the letters strewn about, but the balance in the composition works. There are close to equal areas of color and space on both sides (right and left) to balance each other. The rabbit in the middle even serves as a fulcrum. It might also stand out a little after you’ve seen it, but overall the elements don’t call attention to themselves individually. I’m not going to try to figure out which elements counterbalance each other, one element at a time, but hopefully you agree that there’s an overall balance. If anything, the chaos is weightier on the right, but not to the point of throwing off the balance.
69
CHPTR3
Content-heavy websites such as news and magazine websites exhibit mosaic balance as well. You might recognize the home page of The Onion. In the screenshot, I’ve removed the background image behind the top of the page. There’s a lot to look at. The layout isn’t symmetrical. The columns aren’t equal in size. It’s hard to identify what counterbalances what. The blocks of content have different amounts of content inside and, consequently, are different sizes. Nothing radiates from a common center. There’s a bit of chaos and randomness in the different-sized blocks, some denser than others. Because the stories on the website change daily, a different chaos will appear each day. Overall, it works. Perhaps it’s a stretch to say that it’s a mosaic balance, but again I would argue that it is and that many websites exhibit this sort of chaotic balance, although something tells me that much of the chaos we see online wasn’t planned.
71
CHPTR3
SUMMARY It’s taken a while to get here, but that concludes our series on design principles. I hope you’ve enjoyed it, learned something new or found the series to be a good review of fundamental design principles. As you can guess, I think the fundamentals are important. I started this series to show how all of these principles arise out of human perception and gestalt theory. I didn’t make them up. The principles are based on how we all perceive and interpret our visual environment. For example, one reason we notice focal points is because they contrast with the elements around them. They stand out as different. That’s important when you need to quickly determine friend from foe. That ability was important for our survival as a species, and so our eyes developed to make the determination quickly. However, design principles aren’t hard and fast rules. They’re guidelines. There’s no one right way to communicate that two elements are similar or different, for example. You don’t need to follow any of these principles, although you should understand them and have a reason for breaking them. Again, I hope you’ve enjoyed this series, and I hope even more that something in the series has given you more control over the visual communication in your designs.
73
CHPTR4
ABOUT THE attention, color and positioning: who
rule the pages
CHPTR4 DESIGN PRINCIPLES: DOMINANCE, FOCAL POINTS AND HIERARCHY STEVEN BRADLEY
Has a client ever asked you to make the logo bigger? Maybe they asked that just after you completed their request to make a heading bigger. The new heading stands out, but now the logo is too small in comparison and isn’t getting noticed. The clients wants to make the logo bigger. Of course, now that the logo and heading are bigger, both are going to attract more attention than the main call-to-action button, which will need to be made bigger. And once the button is bigger, the heading is going to start looking small again. You can’t emphasize everything. It defeats the point. When you try to do that, all of your design elements compete for attention and nothing stands out. They’re all yelling at the same time. Everything is louder, but still nothing is heard. Emphasis is relative. For one element to stand out, another has to serve as the background from which the first is to stand out. Some elements need to dominate others in order for your design to display any sort of visual hierarchy.
DOMINANCE Compare any two elements in a design. Either the elements will be equal in every way or one will exert some level of dominance over the other. The more dominant element will attract the eye and get noticed first. It might even appear to exhibit some sort of control over the less dominant element. The more dominant element likely has greater visual weight than the elements it dominates. It will seem to exert force on what’s around it.
77
The circle exerts dominance over the square due to their relative sizes. As you develop a composition, you’ll see numerous elements exerting dominance over each other. Some elements will dominate, and some will be subordinate. Without conscious control, you’d just hope that things all work out and that the important information will attract attention. Fortunately, you do have control.
HOW TO ESTABLISH DOMINANCE You design one element to have more dominance than another by giving it more visual weight. The greater its visual weight, the more an element will attract the eye and exhibit dominance. You create dominance through contrast, emphasis and relative visual weight. Identical items can’t dominate each other. To exert dominance, an element has to look different from the elements it’s meant to dominate. Your goal is to create elements with noticeable differences in visual weight.
CHPTR4
You can vary the same characteristics that we talked about in the last couple of articles in this series. As a reminder, here are the most common characteristics you can vary to set different visual weights: _ size, _ shape, _ color, _ value, _ depth, _ texture, _ density, _ saturation, _ orientation, _ local white space, _ intrinsic interest, _ perceived physical weight, You can create dominance through visual direction as well. For example, you might surround an element with arrows all pointing to that element. If there are enough directional cues, the element could become dominant even if it’s of lesser visual weight than other elements on the page. You can also have co-dominance, where two dominant elements exist within a composition. However, both will compete for attention and could ultimately be distracting without the right overall balance in your competition. Ideally, you want a single dominant element.
THE DOMINANT ELEMENT The dominant element in a design is the one with the greatest visual weight (or the one that everything else points to). It’s
79
the element that attracts the eye first, more than anything else on the page. Be careful not to make the element so dominant that it completely obscures everything else, but do make it stand out in the design. Your dominant element is the starting point for the story you’re telling. It’s the entry point into your design. It should attract visitors to the first place you want them to look. This is how you start a conversation with visitors. The dominant element is noticed first and sets the context for what’s seen next. It’s at the top of the hierarchy. It should emphasize your most important information, because it might be the only thing anyone will see. Whatever message you want people to take away should be clearly communicated in or near your dominant element. Without an entry point, viewers will have to work harder to find their way into your design. They’ll have to pause and think where to look first and think about what’s truly important on the page. A lack of entry point will increase the cognitive load on visitors. Don’t make them think. Provide an entry point into your design. Focal Points Focal points are also elements or areas of dominance, just not to the same degree as your one dominant element, which could be defined as your most dominant focal point. Focal points are areas of interest, emphasis or difference within a composition that capture and hold the viewer’s attention. The focal points in your design should stand out but should be noticed after the element with the most dominance. The graphic below shows a lone circle amid a sea of mostly gray
CHPTR4
squares. The circle is not only a different shape, but is larger and bright red. It’s likely the first thing your eye notices in the graphic. Three of the four squares are also reddish in color, though not as bright as the circle. They’re the same size as the other squares in the image, but they do stand out from the gray squares due to their color. The circle and the three reddish squares are all focal points because they stand out from the majority of other elements in the graphic. They contrast with the mass of gray squares. The large bright red circle stands out the most. It’s the dominant focal point, or the dominant element in this image.
The red circle and squares are focal points. The circle is the dominant element or dominant focal point. As with the dominant element, you can create focal points by giving them more visual weight than everything except the dominant element — which, again, is your most dominant focal point. You can also create visual direction that leads to different focal points.
81
Contrast is a good way to create focal points, because contrast calls attention to itself for being different. Anything that can be contrasted and anything that can affect visual weight or direction can be used to create a focal point, in the same way that it can be used to create a dominant element. The difference is simply of degree.
LEVELS OF DOMINANCE If you create focal points and make one of those points the dominant element, then you’re starting to create different levels of dominance. The dominant element will sit on one level and will be noticed before all others. The remaining focal points will sit on another level. How many levels of dominance can you realistically have in a design? Three is a good number. As a general rule, people can perceive three levels of dominance. They notice what’s most dominant, what’s least dominant and then everything else. There needs to be enough difference between these levels for people to distinguish one from the next. You want to create distinct levels, not a continuum. You could create more than three levels of dominance, but each additional level will reduce the contrast between neighboring levels. Unless you’re sure you can contrast each level well enough, stick with three. Dominant This is the level with the most visual weight and the one that gets the most emphasis. Your dominant level will usually consist of a single element in the foreground. Sub-dominant This is the level of focal points, with the exception of the dominant element or dominant focal point. It gets secondary
CHPTR4
emphasis. Elements on this level get less emphasis than the dominant level but more than the subordinate level. Subordinate This is this level with the least visual weight. It should recede into background to some degree. This level will usually contain your body of text. It’s possible for different people to look at a composition and think that different elements are focal points or even the dominant element. Remember to go big enough with your differences in visual weight to make clear which level is more dominant. You want your dominant element and focal points to be as obvious as possible.
VISUAL HIERARCHY As you design distinct levels of dominance, you create visual hierarchy in the design. Ideally, this visual hierarchy will match the conceptual hierarchy of your content. If an article’s heading is more important than a caption in the article, then the heading should be more visually dominant. Base your visual hierarchy on the actual priorities of the information being presented. First, prioritize everything that will go on the page, and once it’s set, design a visual hierarchy to follow that prioritization. Visual hierarchy enables visitors to scan information. It helps you communicate a message quickly and effectively. The top of the hierarchy (the dominant element) should help to answer questions a visitor might immediately have upon landing on the page. Within seconds, visitors should be able to pick up the key
83
points and main message of the page. They can do this if you make the most important information the most visually prominent. People who stick around longer than a few seconds should be able to scan through the focal points in your design to gain the next most important message(s) that you want to communicate, and so on with the rest of your information.
THE INVERTED PYRAMID OF WRITING Establishing hierarchy in a design is similar to the way journalists use the inverted pyramid of writing. The most important news is all in the first paragraph or two. The lead covers the who, what, where, when, why and how. It tells you everything you need to know.
Above, the inverted pyramid of writing. The lead is followed by important details that fill out the story. They’re details that provide context or help you understand the story in greater depth. Toward the end of the article is the general and background information that’s nice to know but not necessary to understand what’s going on.
CHPTR4
If someone reads only a sentence or two, they should come away with the most important information. The longer they stick around and the more they consume, the more details they’ll get. Visual hierarchy works the same way, except that it doesn’t have to flow linearly from the top of the page. You get to control where people look first, second and so on Again, three level of dominance or hierarchy are recommended, although four or five are still possible.
GESTALT PRINCIPLES AND VISUAL HIERARCHY One of the reasons I started this series with an article about gestalt principles was to show how they lead to many of the design principles we work with. Visual hierarchy evolves out of gestalt. Focal points are one of the gestalt principles. Your dominant element is an extreme focal point. Both use contrast to stand out. The other side of the coin is similarity, which helps us to see things as the same. Similarity and contrast are necessary ingredients in hierarchy. Such laws as the ones of prägnanz and symmetry are about creating order and making things simpler and clearer. That’s exactly what you’re doing when you build hierarchy in a design. You’re organizing design elements to establish a sense of order. The dominant element is likely seen as the figure. The least dominant elements are likely seen as the ground. Really, any principle related to connection or separation can be applied to dominance and hierarchy.
YOU SEE THIS FIRST and then you see this
isn’t this fascinating?
CHPTR4
EXAMPLES As I’ve done throughout this series, I’ve collected screenshots from a few websites, to share what I see as being the dominant elements, focal points and hierarchy. This is my opinion. You may see the designs differently and that’s fine. Thinking critically about the designs is more important than agreeing on what we think. An Event Apart The dominant element on the home page of An Event Apart is the image at the top. It’s the largest element. It’s also an image of people, which we’re typically drawn to. The large white text across the image offers contrast with the image, calling your attention to it. The text “The design conference for people who make websites” is probably the most important information that anyone landing on the page needs to know. It’s a very clear statement about what An Event Apart is and who the website is for. It’s arguably the first thing someone new to the website should see. Focal points include the website’s logo, the dark background behind “Upcoming Events” and the testimonial set as a large bold heading. If you scroll down the page, you’ll notice that the design mainly uses size and color to create additional focal points and visual hierarchy. Important information is larger. It’s bold. It might be red. Occasionally an image draws the eye. If you were to visit the page and merely scan it, you would still come away knowing what the website is about, knowing whether any conferences are coming to your area, and having been convinced by the abundance of testimonials.
87
CHPTR4
Pais To Exist The dominant element on Paid to Exist’s home page is the graphic of the backpack at the top of the page. It’s an image and larger than everything else around it. It contrasts with its surroundings because it is a graphic with intrinsic interest and a different shape. Focal points include the website’s name, some of the text to the right of the graphic, and the big green “Download” button. The social sharing buttons are another focal point. Looking at the section of content just below, you’ll see three large numbered circles, which serve as focal points and lead you to their accompanying content. You’re meant to read the information. Notice how the heading above each paragraph reflects the color of its accompanying circle, to draw you in. Think about the circles and text in terms of visual hierarchy. The big colorful circle (which is one level in the hierarchy) gets your attention and leads you to information that sits on another level of the hierarchy.
89
CHPTR4
Mandy Sims Mandy Sims has a single-page website. The very top (not shown in the screenshot) includes an image of Mandy, which for me is the dominant element. Mandy’s name is also displayed as the largest text. However, I want to draw your attention to a section further down the page. As you might expect, the section’s heading is the largest text there, so it becomes a focal point. Focal points are also the testimonials down the right side. Notice how the background color of the testimonials is the same as the background color of the active link in the menu. Without reading the text in this section, you can still clearly see that Mandy offers coaching services to happy clients, because one level of the hierarchy communicates just that.
91
CHPTR4
Vanseo Design This last example is from my own website. It’s a blog post I wrote a couple of years ago. Forgive the indulgence, but unlike the other examples, I know exactly why every element on the page looks the way it does. Whether or not I’ve succeeded is another matter, but I’m certain of the intent. The page’s main heading is meant to be the dominant element. This is a blog post that I want people to read, but I want to give people a sense of what the article is about before they have to invest their time reading. The partial image also draws the eye, and you might think it more dominant, but an image like this isn’t necessarily visible at the top of every post on the website. The logo in the top-left and the RSS icon in the top-right are meant to stand out a little more than the other text, and so both are red. Both would stand out more with a brighter red, but I didn’t want people to be distracted by them. The same red is also used in headings throughout. The meta information on the left is meant to stand out from the main text. Here, I used local white space to increase the visual weight of plain text. Ideally, someone would glance at it and get information about me and the category and tags for the post. One thing I decided to do with the design was make links in the body less visible than on most websites. I want people to be able to find them, but I don’t want them to pull you out of the content. I used a blue, which doesn’t stand out much from the black text, and I chose italics instead of bold. The links are not meant to be focal points, so I deemphasized them visually. My hope is that someone landing on this or another post on the website will be able to very quickly tell what the article is about and discover some basic information about me, such as my name or the name of the website, before hopefully reading the post.
93
CHPTR4
SUMMARY You can’t emphasize everything. In order for some elements in a design to stand out, other elements must fade into the background. By varying the visual weight of some elements and the visual direction of others, you can establish different levels of dominance. Three levels is ideal; they’re all that most people can discern. On one level will sit your dominant element. It’s an entry point into your design, and it should be or be near the most important information on the page. A second level of focal points can draw attention to the next most important information visitors should see. Your third level holds everything else. Most of your content will be on this level. Designing different levels of emphasis or dominance will create a visual hierarchy in your design, with more important information being more visually prominent. It will help you communicate with visitors quickly and efficiently. We’re getting close to the end of this series. Next time, we’ll look at compositional flow, movement and rhythm. I’ll talk about leading visitors through a design so that they’re more likely to find information in the order you want them to see it.
95
95
BRAINIAC DESIGN: WAYS TO IMPROVE YOUR VISUAL PERCEPTION BY MONIQUE MECKELBURG
This book was set in Univers Type family. The body text is Univers 57 Condensed 10pt/12,5pt New York, 2015.
LIGHT GRAY AREA: If you choose to add an ISBN but do not choose to add a logo, only the light gray area will be occupied by the ISBN.