Visual Design Theory & the Web

Elements of Design

To begin adapting traditional visual design practices to the Web we start by examining elements of design as they've been articulated for physical media for hundreds of years. Remember, the classic theory of design argues that a work of design is pleasing to its viewers as a result of how the elements of design are composed in accordance to the the principles of design.

Elements of design are the fundamental parts or aspects used to compose any work of design. It is important for web designers to know these elements because (1) they provide a defined vocabulary with which to discuss and explore; (2) focusing on individual elements may help us travel down creative avenues; (3) familiarity with the elements is critical for understanding how the principles work.

Line

Line is a form with width and length, but no depth. Line is characterized by length and direction(s). Artists use lines to create edges, the outlines of objects. Lines are also used to create perspective, and dominant directional lines are often adopted to create a sense of continuance in a composition. Line can be very simple, suggesting only abstraction, or it can suggest form even through simplicity.

This design uses line subtly to demarcate important sections and accentuate shape. Chyma - http://chyma.net

Shape

Shapes can be created by enclosing line, or by color and value changes which define edges. Form and shape can be described as either organic or geometric.

This design combines organic and geometric shapes to create theme, texture, and to emphasize navigation features. Outdoor Italia - http://www.outdooritalia.it/

Space

Space, or depth, is the eponymous property of our 3-dimensional world. It refers to the area that a shape or form occupies. Space can be defined as positive or negative.

Designers can create the illusion of physical space and spatial relationships through:

The human brain is trained to interpret images relative to the world we live in. Where are you the viewer in relation to this telephone pole? What has moved in these pictures?
Is the perspective provided by the pattern of lines/shapes in this design effective? If the background were an illustration instead of a photograph, how would that impact the design? Soyrosa - http://soyrosa.nl

Texture

Texture is the surface quality of an object in a tactile sense. Texture is captured in a two-dimensional plane by varying the pattern of light and dark areas on an object. Textures are described by word such as rough, silky, or pebbly.

Cameron Moll is famous for his innovative use of texture on the web. What effect does his use of texture in this site have on the user? What other uses of texture can you find on the web? Cameron Moll's Portfolio - http://cameronmoll.com/portfolio/
The photorealistic pattern in this design creates a texture that seems to be in direct contrast with the 2-dimensional geometric shapes found in the rest of the site's design. Why would the designer do this? U-Turn - http://homeless.org.za

These are just a handful of the most useful elements of design, but they should have prepared you to move on to principles, which interpret how elements are applied.