Basic Elements of Web Design

The most common fundamental elements of design include point, line, shape, form, space, color, value, and texture. They are abstract, in that singly they seldom represent anything meaningful other than the perception of their shapes. However, they can be useful for performing various diverse functions in design and have application in Web design. This section shows examples of how they can be used.

1. Point

A point or a dot is a design element with a position but no extension. Although using it alone may provide little meaning but perhaps intrigue, it is often when different types of points are grouped that they can become very useful in creating a design. For example, they can be used to imply shapes, forms, and patterns, as well as direct attention. Image “A” in Figure 23.1 shows examples of how points can be used to create shapes. The point at the top left, in theory, should attract attention because it is relatively isolated. The point in “B” shows a point that is also being used to attract attention. In theory, it should attract attention because it is surrounded by angular shapes and of a significantly different color.

2. Line

Lines are one of the most basic, versatile, and commonly used elements of design, in that they are easy to produce, can be in many forms (e.g., straight, curved, and irregular), and used in the composition of almost any complex design. As a result they have many different functions in design, such as the following, which might give you some ideas:

  • Organizing, separating, and connecting objects: Lines can be used to organize, separate, and link elements to indicate order. Figure 23.2 shows some illustrations.
  • Creating textures or patterns: Figure 23.3 shows some simple patterns and textures. Textures or patterns may be used, for example, as background or bars in very subdued colors that do not interfere with the perception of foreground elements. Recall from Chapter 16 that patterns can be produced using CSS gradient properties.

  • Guiding the eyes to a point of focus: An actual or implied line can be used to lead the eyes to a feature in a design or an image that may otherwise be missed, especially in content presentation, as demonstrated in Figure 23.4.
  • Suggesting movement: Oblique lines can be used to suggest movement or dynamism. Figure 23.5 gives an illustration.

  • Conveying specific feelings or moods: The direction and orientation of a line can be used to imply certain feelings. For example, horizontal lines (as in shoreline) is believed to project rest, calmness, stability, openness, and quietude; vertical lines (as in pillars) can suggest power, strength, formality, height, dignity, restriction, and sometimes potential movement; diagonal lines (as in a slope) can suggest vitality, dynamism, and agitation; curved lines (as in human body) can suggest grace, beauty, elegance, movement, and sensuality; sharp jagged lines (as in cracked glass) can suggest violence or destruction; and broken lines (as in gaps) can suggest discontinuity. Using these different types of lines in an abstract design, for example, can help communicate specific feelings or moods. Figure 23.6 shows some illustrations. When lines are used to convey moods in Web design, they would usually be used in background image.

  • Providing emphasis: Underlining words in text gives them emphasis. Figure 23.7 shows the words “basic” and “versatile” emphasized.
  • Defining shapes: Lines are central to the creation of shapes, although shapes can also be created without lines. The types of shapes or designs that lines are used to create include logos and background graphics. Figure 23.8 shows some illustrations of the different roles lines play in creating shape.

  • Decorating designs: Lines can be used for beautifying a page or creating effects in various forms, including dashed and dotted lines. Figure 23.9 shows some examples. In the left design, lines are used to beautify the heading as well as depict shadows just by varying width and color. In the right design, lines are used for the hanging bar, the chains, the logo, and to border the page content.

  • Decorating designs: Lines can be used for beautifying a page or creating effects in various forms, including dashed and dotted lines. Figure 23.9 shows some examples. In the left design, lines are used to beautify the heading as well as depict shadows just by varying width and color. In the right design, lines are used for the hanging bar, the chains, the logo, and to border the page content.

3. Shapes

A shape (flat figure) within the context of design elements is basically an enclosed space created as a result of the meeting of actual or implied lines. The three basic categories of shapes used in design are geometric, natural, and abstract. Geometric shapes are structured and include rectangles, circles, triangles, and polygons. Natural shapes (or organic shapes) primarily describe shapes that exist in nature, such as those of leaves. They can also be manmade; an ink blob, for example, is a natural shape. Natural shapes are typically irregular and/ or fluid at the edges. Abstract shapes describe approximated or stylized versions of natural shapes. Symbols on signs, such as the shape of a man or a woman used to identify toilets, fall under abstract shapes. Figure 23.10 shows examples of these different types of shapes.

Traditionally, geometric shapes, particularly those with straight vertical and horizontal lines, are more commonly used in screen designs than other types. This is mainly because squarish shapes tend to allow optimal use of space and facilitate the organization of elements. However, more rounded organic shapes do find applications in some types of websites, particularly in less formal websites, such as games and children’s websites. Figure 23.11 shows some illustrations.

4. Size/Scale

Visual size and scale exist together and are similar, but different. Whereas size describes the actual or usual physical dimensions of an element, scale describes the size of an element in relation to other things, including its actual physical size. Scale, in essence, is relative. Size and scale can be used to accomplish many goals in design, such as to emphasize the most important element, attract attention, create hierarchy (i.e., order of importance), create perspective, organize elements, contrast two elements (e.g., adding small text to a large element), and create interest and variety. Giving the right sizes to different elements of a design, such as sidebar, header, and the main content area, creates scale, which if right contributes to the achievement of the gestalt effect. Figure 23.12 shows the example of size and scale in use.

5. Space

Space is the area on a page and there are two types from the point of view of design: negative and positive. Negative space is empty space and what a design would normally start with. Positive space is the space that contains an object. The ratio between the two is important in design. For example, a lot of negative space can make an object more conspicuous while too little can make a design appear cluttered and unattractive. Figure 23.13 illustrates negative and positive space.

Figure 23.14 shows how the ratio of negative and positive space can affect the look and feel of a design. Notice how more airy the one on the left is. With a little imagination, it is possible to see how a screen that looks like it would be more aesthetically appealing. Positive space is sometimes also referred to as positive shape and negative space as negative shape.

The other use of space in design is in depicting the illusion of depth. The main techniques used to achieve this include diminishing size and vertical position, overlapping, diminishing details, and linear perspective. Figure 23.15 shows some basic examples.

Image A in the figure demonstrates the notions that the farther away objects are, the smaller they become and also that objects that are smaller and higher on the screen tend to be perceived to be farther away than those that are lower and bigger. Image B demonstrates that when an object is partially blocked by another, it gives the sense it is farther back than the one blocking it. Image C demonstrates that as objects move farther away, their details, such as color and value (i.e., tone), become less distinct both in relation to other objects and the background, making us perceive objects that are clear as being closer relative to those that are faded or indistinct. Image D shows that all lines will eventually come together at a point on the horizon (called the vanishing point) that is farther away. The technique is used to create a focal point in a design, where the most important object is placed. The lines used would usually be implied, using, for example, objects’ alignment. Notice how in the illustration the eyes always seem to be led to the center back of the design by the lines. Any combination of A, B, C, and D can be used to produce an even stronger illusion of depth. Figure 23.16 shows an example of how overlapping is often used in a Web page to create the illusion of depth.

6. Hue and Value

Value, as mentioned under the HSL (or HSV) color model in Chapter 9, refers to the relative level of lightness or darkness of a color. The lightest color has the highest value, while the darkest the lowest. So, light colors are sometimes called high-value (or high- key) colors, while dark ones low- value (or low-key) colors. Value is an important element in design and can be used to communicate various visual messages. Gradation in value, for example, can be used to create the illusion of depth, as should be evident in the use of CSS gradient properties in Chapter 16. Figure 23.17 illustrates this with two circles, one filed with plain color and the other with gradient.

Different values can also be used to create contrast. The farther apart the values are, the more pronounced the contrast produced. Contrast is especially useful for creating emphasis and attracting attention. For

example, a light figure on a dark background is automatically emphasized, and vice versa. Figure 23.18 shows a design with different-value elements. The color of the button and the angular bar at top-left is red and that of the larger rectangle, which is light pink, was derived from adding high value to the red.

Another important role of value in design is its use in creating mood. In theory, lower values produce designs that are often described as somber and quiet designs, while higher values produce lighter, happier, more vibrant, more cheerful, or more playful ones.

7. Texture

Texture refers to the surface quality of an object. It is both visual and tactile. However, it is the visual dimension that is so far typically applicable in Web design. It can be described in various ways, including soft, rough, smooth, wavy, and patterned. When using texture in a design, the aim is to match it to the theme of the design. For example, a design about fashion might use the texture of fiber. It is important, of course, that a texture does not overpower the foreground elements. For example, overpowering text can compromise legibility. Figure 23.19 shows some textures as well as demonstrates the effects of overpowering textures. Notice how overpowering the textures are in the left illustration and how after they have been toned down the text is more legible in the right image. A better design also seems to have been produced.

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 *