Principles of Web

Any component of a design that can be separated and defined on its own is an element of the design; and the basic elements of design, such as dots and lines, can be organized to create a design that produces the gestalt effect that communicates a meaningful cohesive visual message. The principles described by Gestalt theory for achieving this effect are mainly balance, emphasis, rhythm, proportion, and unity.

1. Balance

Balance in visual design relates to the concept of visual equilibrium and refers to the way elements are distributed across a design and the perception of whether the design is visually balanced or lopsided around the pivot point of the design. Within the principle, every area of a design carries a virtual weight in terms of lightness or heaviness. For example, lighter colors appear lighter in weight than darker colors, neutral colors appear lighter than vivid colors, and transparent areas appear lighter in weight than opaque areas. One way to view a design when addressing balance is in terms of a set of scales or see-saw. Using the see-saw analogy, it can be imagined that a page is laid flat and balanced on a fulcrum and the various elements represent weights, as illustrated in Figure 23.20. The general idea is that a page is balanced if the total of the visual weights on one side of the fulcrum roughly balances out the total on the other side. This naturally takes into consideration the distance of each element from the fulcrum, just like with a see-saw. There are two main types of visual balance: symmetrical balance and asymmetrical balance.

Symmetrical balance (also known as formal balance) is when visual weight is equally distributed on either side of the central vertical axis of a design. It is achieved in two ways: pure symmetry and approximate symmetry. In pure symmetry, identical parts are distributed on either side of the central axis of a design. The design produced can be monotonous and uninteresting. In any case, this type of balance seldom lends itself to too many practical applications, as it is seldom possible to distribute elements identically about the vertical axis of a design. In approximate symmetry, the elements in the two halves of a design are varied but still similar. Ways in which this is done include varying value, texture, and shape. Designs that are balanced in this way are often more appealing and interesting. Figure 23.21 shows an illustration each of pure and approximate symmetry.

In contrast to symmetrical balance, asymmetrical balance (also known as informal balance) occurs when both sides of the central axis of a design are not identical but appear to have the same visual weight. This usually happens when several smaller elements on one side of the axis are balanced by a larger one on the other side, or smaller elements are positioned farther away from the center of the screen than a larger one. Figure 23.22 shows some examples.

Other types of balance that are not as commonly considered but might apply to a design are vertical and radial. Vertical balance is essentially balancing the visual weight on either side of the central horizontal axis (i.e., balancing the top part against bottom). Typically, the bottom would be visually heavier than the top. Radial balance is when elements are organized around the center of a design at equal distances. Figure 23.23 shows an example.

It is important for a design to be balanced, as off-balance (or discordant) designs can cause uncomfortable feelings, such as the feeling of motion. This does not mean, of course, that off-balance designs are prohibited in Web design. Sometimes it suits exactly the requirement of an application. For example, a design might be intended to project some artistic merits and be thought-provoking.

2. Emph asis

Emphasis makes an element stand out and gives it importance (or dominance). This makes it attract attention. For this reason, emphasis is used to control the attention of the user. Commonly used techniques for implementing emphasis include contrast, placement, and isolation.

2.1. Emphasis through Contrast

Contrast causes an abrupt change in the continuity of a design and therefore in eye movement. The contrast may be due to change in any of various characteristics, including color, value, shape, orientation, and size. Figure 23.24 shows some examples. The design on the left shows emphasis through change in orientation, the middle design through change in color, and the design on the right through change in shape. By far the most powerful shape for producing contrast-based emphasis is a circular shape, mainly because most other shapes around us or in most designs are angular. For this reason, circular shapes can attract attention even without being filled with vivid colors or surrounded by white space.

Emphasis through contrast is especially invaluable for producing visual hierarchy of importance to aid the navigation of content. Visual hierarchy essentially controls what to look at first, second, third, and so on. It involves emphasizing important elements and organizing them logically and predictably to help guide viewers’ eyes through content, so that they can view content the way intended. To implement visual hierarchy, content elements are identified based on their importance and then given emphasis accordingly, with the most important elements getting the most emphasis, the second important getting weaker emphasis, and so on. Hierarchy also makes content easily scannable. Other principles used to make text scannable are discussed in Chapter 24. Figure 23.25 shows some examples of visual hierarchy application. In the left image, the eyes are likely to dart back and forth between the design elements. In the middle one, they are likely to be attracted first to the pepper, then the headline, then the footer; while in the third, they are likely to go to the headline, then to the pepper, then to the footer.

Figure 23.26 shows examples of visual hierarchy with simulated textual content. The image on the left represents a screen full of plain text; the middle represents the same text chunked up, with sub-section headings that have larger font size and bolder font style and text with jagged right edges; and the rightmost adds short text in the form of comments and excerpts from the main text. It also adds light graphics in the form of color blocks to provide more contrast.

2.2. Emphasis through Isolation

When the element to which attention is to be attracted is placed some distance away from other elements and surrounded by ample space, this is known as creating emphasis through isolation. Figure 23.27 shows a couple of illustrations. The star and word on the right in the images certainly appear to have more importance, simply because they are isolated.

In which of the following scenarios do you think it would be beneficial to use isolation for emphasis, and which element or elements would you isolate?

  • A page with a heading, sub-headings, and graphic illustrations that are cited in the text of the page.
  • A form with minimum number of fields, a form with average number of field, and a form with many fields. Each form naturally has a submit and a reset button.
  • A page where all elements hold similar level of importance.
  • A page of text with a heading and a block quotation to which you want to draw attention.
  • A page with an important paid advert.

2.3. Emphasis through Placement

Emphasis by placement is when an element is positioned uch that it attracts attention. This is achieved in a number of ways. One way is to arrange an element so that other elements in a design point to it. This exploits the human tendency to look in the direction of a pointer or in the direction someone is looking. An element can also be placed in the center of a design, exploiting the human tendency to focus first on the center when a design is homogeneous; or it can be enclosed in a frame that is not so thick or whose color is not such that it overpowers the object. Figure 23.28 shows an illustration of each type. Other types of placements include objects overlapping or placing them such that they touch the outside edge of a design, thereby arousing curiosity.

3. Rhythm

Visual rhythm in design describes the timed, regular, or predictable occurrences of elements throughout a design. It is in essence the repetition of elements in a design. An advantage of visual rhythm is that it creates an easy path that the eyes almost instinctively follow. The movement of the eyes can be slow, connected, and flowing, or abrupt and dynamic, or circular, depending on the frequency of repetition, the types of repeated elements, and spacing. The repetition of similar elements or flowing circular elements produces a design that makes the eyes move through it in a connected flowing rhythmic fashion, while the repetition of unrelated elements produces a design that makes the eyes move in an abrupt and dynamic manner. Figure 23.29 shows some basic illustrations that communicate this general principle. Notice that each of the three designs has a different visual rhythm. Assuming they were producing musical beats, the rhythm they would generate would be different. Notice also that out of the three designs, “C” has the most pronounced accent. What this means is that if three different Web pages are designed to simulate the rhythm of each of the designs, the page design that simulates “C” would be the easiest to find items on, because the eyes will be guided from one point to another much more easily.

Rhythm is particularly important in long Web pages or when large amount of information is being presented. Too bland a rhythm can result in nothing standing out more than others, making it difficult for someone to locate things. This, in a sense, relates to the topic of emphasis through contrast discussed earlier. Similarly, too much rhythm can make a page look chaotic. The best approach is to design a page on the basis of how the information it contains is intended to be viewed. It may be that people are intended to read quickly through, or go from one important part to another in the first place and then read the less important parts if they wish. Figure 23.30 shows an example of rhythm being used in a Web page. It is designed to guide people to the important parts of the page. The page basically presents titles of articles and a brief description under each title. Notice how each article is presented using repeated patterns of color, text style, design elements, and alignment. Notice also how the different sections have different rhythm/ style but are not so different as to disrupt the overall feel or theme of the page.

4. Proportion

Proportion describes the relationship between the sizes of visual elements of a design as well as between the elements and the design as a whole. It is said to be good or harmonious when there is a correct or desirable relationship between the elements. To help produce designs with proportions that are considered harmonious, mathematically derived grid systems (or grid theories) have long been used by designers. The practice goes back thousands of years, and although it was originally used for technical designs, such as architectural designs, it has since been adopted and adapted in various areas of visual design, including photography, videography, graphic design, and more recently Web design. Grid systems (i.e., the ways grids are divided) vary widely. The two most commonly used are the golden ratio and rule of thirds. While these grid systems are more typically used in shot composition in photography, film, and art, they can sometimes find use in Web design, especially in content design. The grid layout model discussed in Chapter 20 is mostly concerned with the precise placement of elements rather than where best to place them for the purpose of aesthetics.

4.1. Golden Ratio

The golden ratio, which is also known by various other names, such as divine proportion, is one of the oldest and most commonly used grid systems in visual design. It was derived hundreds of years ago from the observation that a certain pattern or proportion ratio commonly occurs in natural designs, such as in horns, shells, and flowers, and because of this it is believed that it is probable that humans are genetically programmed to instinctively find it aesthetically pleasing. The value of the ratio, termed phi, is known to be 1.6180339 (approximately 1.618). The proportion between two geometric elements is in the golden ratio if the ratio of their sizes is equal to the ratio of the sum of their sizes to the size of the larger of the two. Using Figure 23.31 to illustrate, this means that b/c = a/b. As also shown in the figure, to achieve the ratio, the size of an element is simply divided by 1.618 to obtain the size for the larger part and this is then subtracted from the size of the element to obtain the size for the smaller part.

The most common evidence of the attempt to apply the golden ratio to design is in the form of the golden rectangle, in which the ratio of the larger part to the smaller part is in golden ratio. This is illustrated in Figure 23.32 with a horizontal length of 960 pixels, which is the width that is left to display a Web page at 1024 x 768 screen resolution in a typical Web browser, after the chrome (the edges of the browser) and space needed for the vertical scrollbar have been accounted for. Many Web pages are designed in this style or its variations.

Of course, the application of the golden ratio involves more than just dividing a rectangle into two aesthetically proportioned parts. Its application extends to using it to determine where to best place elements within a design to produce an aesthetically pleasing composition. This typically involves repeating the division process, starting from every edge of the rectangle, so that a grid like that shown in Figure 23.33, known as the phi grid, is produced. It is believed that when the object of focus is positioned along a grid line or on the intersection of two grid lines, more tension and interest is created than simply placing the object in the center, thereby producing a more aesthetically pleasing composition.

Another interpretation of how the golden ratio should be used involves placing the golden spiral on a design and using it as a guide. The golden spiral, shown in Figure 23.34, is created through connecting the opposite corners of the sequence of squares produced through repeatedly applying the golden-ratio-division process to the smaller of the parts created after each process, until division is no longer practical. In any case, given its relative complexity and the fact that Web page design does not need to be perfect to the pixel, the strict application of the golden ratio is hardly necessary and generally not followed. It is often only used as a guide.

4.2. Rule of Thirds

Like the golden ratio, the rule of thirds is hundreds of years old but still relevant. It is an easier system to apply in a design than the golden ratio, in that it involves just dividing a space, such as a screen, into thirds, vertically and horizontally; that is, into a 3 x 3 grid. As with the phi grid, it is believed that a design would be more appealing if the areas of interest in the design are located along the grid lines or at the intersections of the lines. Figure 23.35 shows the rule-of-thirds grid. Notice its similarity to the phi grid. Figure 23.36 shows an example of the grid being used for positioning content.

5. Unity

Visual unity is achieved when the various elements of a design, such as typeface, shape, color, texture, line, and space, agree and are in harmony with each other to produce a unified design (i.e., something that the eyes see and the brain likes). It is a very important goal, as it helps project the central theme of a design. It is an indicator that all the other design principles have been applied correctly in relation to each other. Without visual unity, viewers may miss certain elements of a design, or may not get its essence or connect with it. Unity is achieved using a collection of secondary principles, or methods, including proximity, repetition, closure, continuation, and alignment, which are discussed next.

5.1. Proximity

When elements are positioned close to one another, they project the sense of belonging together. This can also allow viewers to see a pattern, which can further enhance the connection with a design. To apply this principle effectively, related objects are placed closely together, as shown in Figure 23.37. Notice how the design on the right looks more compact and more structured. Many would see it to be more aesthetically pleasing.

In the design example shown in Figure 23.38, it is clear that it is the proximity between the elements of a group that causes the perception that they are in a group. Notice that even though the ovals and rectangles are of different shapes, their proximity to each other gives the impression they are in the same group. If all the elements in the design have been of equal proximity to one another, for example, it would be ineffective to use proximity for grouping and another technique will have to be used.

5.2. Similarity

Elements that look similar tend to seem to belong together. Grouping based on similarity is done using three main properties: size, shape, and color/value. Figure 23.39 shows an illustration of each. Note that the proximity of elements to each other can affect the effectiveness of this principle. So if it is difficult to instantly group by size, color, or shapes respectively in the Figure, it is possibly because the relevant elements are too far apart. The degree to which elements that are supposed to be in a group are similar to the elements of other groups can also play a role, as does, for example, the orientation of elements.

Even when the proximity law is already used to group elements, the similarity law can still influence grouping. In Figure 40, for example, even though the grouping of the elements is informed by proximity between each rectangle and oval in a pair, all rectangles and ovals seem grouped by shape. For example, you would instinctively expect information with the rectangles to be of the same type, and likewise for the ovals. The use of the similarity law to group items is common with websites that sell products. It is what is at play, for example, when the products in a section of the screen are of similar sizes even when they are differently shaped.

5.3. Repetition

Repeating elements, such as colors, shapes, textures, and lines, can create visual relationship between different elements. Typically, only the key elements of a design need to be repeated to bind the design together. This allows nonkey elements to be used to add variety, uniqueness, or character to a design to make it interesting. Repetition, of course, equals consistency. For example, consistency in theme across pages that deal with the same subject is a kind of repetition. Figure 23.41 shows a simplistic illustration. The design on the left has no repetitions and therefore looks less unified compared to the one on the right in which the key elements (i.e., the two sidebars and buttons) are identical.

5.4. Closure

Generally, complex objects are made up of smaller and simpler elements that the brain puts together as a single entity. For example, a face is a collection of different elements, including mouth, nose, ears, and eyes. The closure principle is based on the idea that if any of these elements is missing, the brain is capable of filling them in to complete a picture. In visual design, the use of the closure principle can make designs different and more interesting, provided care is exercised not to remove the vital parts of an object. Figure 23.42 shows two examples, a triangle and circle with missing parts. When the closure principle is used properly in a design, so that the arrangement of the elements that make up the design projects a discernible shape, it can help unify a design.

5.5. Continuity

The principle of continuity is based on the notion that when we perceive a path, we tend to continue looking along its direction, even when the path is intersected by another, until our attention is drawn by something more significant, or we have reached how far we can go in that direction. This is how when two lines intersect; we still can distinguish between them. In design, this means, for example, that if one element points to or overlaps with another, the eyes tend to continue on from the first element to the next, and so on. This tendency is usually exploited to direct a viewer’s attention. Figure 23.43 shows an example of the continuity law being applied in the form of an arrow being used to direct attention to a piece of information that is important but could not be placed in a more noticeable area of the page because information about newer more important items need to be placed there. Because the continuity principle essentially involves connecting one element to another, it can also help in unifying a design.

5.6. Alignment

The alignment law involves arranging elements so that their edges or centers align with those of other elements, creating more sense of harmony in a design. Figure 23.44 shows the difference good alignment can make. The design on the right certainly looks more unified and more professional because its elements are well-aligned.

Alignment can also be used in projecting a tone, as illustrated in Figure 23.45. Although there is nothing particularly wrong with the alignment of the elements of the design on the left, it is probably too symmetrical, too formal, and uninteresting. With a different alignment, plus an extra element

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *