What are Elements of Design?

The elements of design discuss the components of the composition itself, and provide the designer with a basic set of tools to begin working with.

The elements of design are the basic components used as part of any composition. They are the objects to be arranged, the constituent parts used to create the composition itself. In most situations the elements of design build upon one another, the former element helping to create the latter, and the elements described in this column are arranged as such. We will be focusing on the elements of point, line, form (shape), texture and color.

Point

A point is an element that has position, but no extension. It is a single mark in space with a precise, but limited, location. Alone it can provide a powerful relation between negative and positive space, but when grouped with other points the Gestalt grouping principal of closure tends to kick in and the brain compulsively connects the points together. Line or form is a natural result of multiple points in space.

Point	Multiple points in space	Closure

Line

A line is an element characterized by length and direction. Lines create contours and form, and are often used to convey a specific kind of feeling or point to an important feature in a design. Lines are also used to create perspective, and dominant directional lines are often adopted to create a sense of continuance in a composition. In addition, lines that are grouped together often create a sense of value, density or texture.

Organic	Rigid	Differing weights

Form (Shape)

The simplest definition of shape is a closed contour, an element defined by its perimeter. The three basic shapes are: circle, rectangle (square) and triangle. Form is the shape and structure of a dimensional element within a given composition. Form can be both two-dimensional and three-dimensional and can be realistic, abstract or somewhere in between. The terms form and shape are often used synonymously, which is why they are both included here. In reality, form is derived from the combination of point, line and shape.

Contour	Dimensional

Texture

Texture is used to create surface appearance, and relates to the physical make-up of a given form. Texture often refers to the material that something is made of, and can be created using any of the elements previously discussed. Texture is both a visual and a tactile phenomenon.

Rough texture	Organic texture

Color

Color is the response of the eye to differing wavelengths of radiation within the visible spectrum. The visible spectrum is what we perceive as light. It is the part of the electromagnetic spectrum that we can see. The typical human eye will respond to wavelengths between 400-700 nanometers (nm), with red being at one end (700 nm), violet at the other (400 nm) and every other color in between these two.

There are many different kinds of color systems, and many different theories on color. We will get into that kind of detail in a later column. For now we will focus on the basics, using a color wheel for illustration purposes. There are three main components of color:

• Hue: Where the color is positioned on the color wheel. Terms such as red, blue-green, and mauve all define the hue of a given color.
• Value: The general lightness or darkness of a color. In general, how close to black or white a given color is.
• Saturation: The intensity, or level of chroma, of a color. The more gray a color has in it, the less chroma it has.

Color harmonies

Color harmonies serve to describe the relationships certain colors have to one another, and how they can be combined to create a palette of color.

• Complementary: A complementary relationship is a harmony of two colors on the opposite side of the color wheel. When complementary colors are placed side-by-side they tend to enhance the intensity (chroma) of each other, and when they are blended together they tend to decrease the intensity of each other.
• Analogous: An analogous relationship is a harmony of colors whose hues are adjacent to one another on the color wheel. Analogous colors tend to be families of colors such as blues (blue, blue-violet, blue-green) and yellows (yellow, yellow-orange, yellow-green).
• Triadic: A triadic relationship is a harmony of three colors equidistant from one another on the color wheel. Primary colors and secondary colors are examples of color triads.

In these examples, a subtractive color space was used for illustrative purposes.

Complementary	Analogous	Triadic

Color spaces

Color is typically organized in a hierarchal fashion, based on how colors are mixed. A color space helps to define how the colors are mixed, based on the medium in which the colors are used. There are two different kinds of color spaces:

• Subtractive: A subtractive color space is the traditional color space that most people refer to when they talk about color. It is pigment-based color, as in the mixing of paint. In a subtractive color space, the pigments manipulate the wavelengths that our eyes see. The absence of any pigment produces white, and all pigments blended together produces black.
  • Primary colors: Red, yellow, blue
  • Secondary colors: Orange, green, violet
• Additive: An additive color space is an electronic color space. It is light-based color, as in the mixing of color on the computer. In an additive color space, light is added to the screen in differing amounts to produce color. The absence of any light is black, the presence of all light, or light at full intensity, is white.
  • Primary colors: Red, green, blue
  • Secondary colors: Yellow, magenta, cyan

Subtractive color space	Additive color space

Related Concepts

There are many additional concepts that are related to the elements of design. These can include specific terms and/or techniques that are in some way based on one or more of the above ideas. In they end, they add to the collection of compositional tools available for use by the designer.

Typography

Typography is the art of arranging typefaces, selecting style, line spacing, layout and design as a means of solidifying language. There are many facets to typography, and only a brief investigation will be started here based around some common terms.

• Baseline: The line on which all letters rest.
• Beardline: The line reached by the descenders of lowercase letters.
• Bowl: The round or elliptical parts of a letterform.
• Cap line: The line reached by the top of uppercase letters.
• Counter: The white space enclosed by a letterform, whether completely or partially.
• Extenders: Extenders are the parts of letters that extend either below the baseline (descenders) or above the midline (ascenders).
• Midline: The top of lowercase letters such as a, c, e and the top of the torso of lowercase letters such as b, d.
• Serif: A stroke added to either the beginning or end of one of the main strokes of a letter.
• Stem: The main stroke of a letter that is generally straight and not part of a bowl.
• Topline: The line reached by the ascenders of lowercase letters.
• X-height: The distance between the baseline and midline of an alphabet. The x-height is usually the height of the unextended lowercase letters.

Pattern

Pattern is the repetition of shape or form. It can also reflect the underlying structure of a design by organizing the surfaces or objects in the composition. There are many different kinds of patterns:

• Flowing: A flowing pattern is based on the repetition of an undulating line, and reflects a natural meandering through a composition.
• Branching: A branching pattern is the repetition of forking lines, or patterns of deviation. These kinds of patterns can be found in almost all plants, and in many other places in the natural world.
• Spiraling: A circular pattern, or a pattern that winds in and around itself.

Movement

Movement can be defined as motion of objects in space over time, and is often described in one of two ways:

• Literal: Literal movement is physical movement. Examples of literal movement include: Products such as the automobile, motion pictures and dance.
• Compositional: Compositional movement is the movement of the viewer’s eye through a given composition. Compositional movement can be either static or dynamic. Static movement jumps between isolated parts of a composition. Dynamic movement flows smoothly from one part of the composition to another.

Conclusion

We have thoroughly explored the fundamental concepts of the field of design. The principles of design give us a way of looking at the world. The overarching axioms of the profession affect the designer universally, and provide guidance for any composition. The elements of design discuss the components of the composition itself, and provide the designer with a basic set of tools to begin working with.

In order to explore the fundamentals of design, we needed to step back a bit away from any one medium. Now it is time to focus in on the Web. In the next column we will investigate the constraints of designing for the Web that can effect how we make use of the principles and elements of design. We will look at medium-specific concepts, such as screen resolution, graphics compression and color mixing in additive spaces.

Call for Submissions

The fourth column in the Design in Theory and Practice column will be a review of concepts discussed in the previous three. We will tie together everything we have looked at so far, taking all of the principles and elements of design and seeing how they are put into practice. We will use the medium of the Web to find real-world examples of how this is done.

In order to do this, we will need examples of Web sites that make good use of one or more of the fundamental concepts we have been talking about. If you know of any sites that do, please send me an email (or post a comment) explaining why you think so, and a link to the site for consideration. I will include as many of them as I can.

Additional Resources and References

There are many resources available about all of the topics covered in this article, both online and off. The following is a small list of some of the ones I am aware of, but is by no means exhaustive.

Related resources on the Web

1. Art, Design, and Visual Thinking
2. Wikipedia.org/wiki/typography
3. Typographica - A Journal of Typography
4. Counterspace
5. Munsell Color Science Laboratory
6. Pantone

Related books

1. The Pantone Guide to Communicating with Color
2. The Elements of Color
3. The Elements of Typographic Style

Unity

The concept of unity describes the relationship between the individual parts and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in design is a concept that stems from some of the Gestalt theories of visual perception and psychology, specifically those dealing with how the human brain organizes visual information into categories, or groups².

Gestalt theory itself is rather lengthy and complex, dealing in various levels of abstraction and generalization, but some of the basic ideas that come out of this kind of thinking are more universal.

Closure

Closure is the idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces. Objects can be deconstructed into groups of smaller parts, and when some of these parts are missing the brain tends to add information about an object to achieve closure. In the below examples, we compulsively fill in the missing information to create shape.

Continuance

Continuance is the idea that once you begin looking in one direction, you will continue to do so until something more significant catches your attention. Perspective, or the use of dominant directional lines, tends to successfully direct the viewers eye in a given direction. In addition, the eye direction of any subjects in the design itself can cause a similar effect. In the below example, the eye immediately goes down the direction of the road ending up in the upper right corner of the frame of reference. There is no other dominant object to catch and redirect the attention.

Similarity, Proximity and Alignment

Items of similar size, shape and color tend to be grouped together by the brain, and a semantic relationship between the items is formed. In addition, items in close proximity to or aligned with one another tend to be grouped in a similar way. In the below example, notice how much easier it is to group and define the shape of the objects in the upper left than the lower right.

Related concepts

There are many additional concepts that are related to the principles of design. These can include specific terms and/or techniques that are in some way based on one or more of the above tenets. In they end, they add to the collection of compositional tools available for use by the designer.

Contrast or Opposition

Contrast addresses the notion of dynamic tensionÔthe degree of conflict that exists within a given design between the visual elements in the composition.

Positive and Negative Space

Positive and negative space refers to the juxtaposition of figure and ground in a composition. The objects in the environment represent the positive space, and the environment itself is the negative space.

Rule of Thirds

The rule of thirds is a compositional tool that makes use of the notion that the most interesting compositions are those in which the primary element is off center. Basically, take any frame of reference and divide it into thirds placing the elements of the composition on the lines in between.

Visual Center

The visual center of any page is just slightly above and to the right of the actual (mathematical) center. This tends to be the natural placement of visual focus, and is also sometimes referred to as museum height.

Color and Typography

Many would place color and typography along side the five principals I have outlined above. I personally believe both to be elements of design, so I’ll give them some attention in my next column. In addition, both topics are so robust that I plan on writing an entire article about each of them in the future.

Dominance

Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design. There are three stages of dominance, each relating to the weight of a particular object within a composition.

• Dominant: The object given the most visual weight, the element of primary emphasis that advances to the foreground in the composition.

• Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the composition.

• Subordinate: The object given the least visual weight, the element of tertiary emphasis that recedes to the background of the composition.

In the below example, the trees act as the dominant element, the house and hills as the secondary element, and the mountains as the tertiary element.

Proportion

Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts. Differing proportions within a composition can relate to different kinds of balance or symmetry, and can help establish visual weight and depth. In the below examples, notice how the smaller elements seem to recede into the background while the larger elements come to the front.

Rhythm

Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture. There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it.

• Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.

• Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.

• Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.

Regular
rhythm

Flowing
rhythm

Progressive
rhythm

Symmetrical

Symmetrical balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. In addition, it is possible to build a composition equally around a central point resulting in radial symmetry¹. Symmetrical balance is also known as formal balance.

Asymmetrical

Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights. Often there is one dominant form that is offset by many smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension. Asymmetrical balance is also known as informal balance.

Horizontal
symmetry

Approximate
horizontal symmetry

Radial
symmetry

Asymmetry

Focus on the best bits

When you 'own' your own brand, your consumers see what you give out, and what you give out comes directly from what you believe.

The easiest way to increase impact is by choosing the right beliefs.

This isn't about being false, but focusing on the best bits. You don't have to tell the whole truth.

Note: This isn't just great for projecting a powerful brand - it's great anyway!

Talk about positives, and avoid negatives, i.e. say what you do, or can do, what you believe in, how you work, what you have done, what your experience is...

• If you don't have as much experience, mention any relevant experience you do have.
• If you're young, talk about your energy, enthusiasm and value-for-money.
• If you're a small company, emphasise your commitment, availability, and flexibility.
• If you have fewer skills than competitors, turn them into specialisms and focus.

Tone of voice

Active voice is important: present what "you can do" or "what you can get", e.g. "Register for our newsletter" / "Log in" / "More about Service A".

Everything that goes into your web site must have a purpose.

Every single feature must either

• Help your visitors achieve their goals, or
• Support the site's goals without obstructing the visitor's goals

Use Occam's razor

Occam's Razor is an intellectual tool that basically states that, given any two solutions to the same problem, the simpler solution will be the best. This applies to the discipline of web design very well.

Applying Occam's Razor to web design will help you find the most elegant and direct solution to your design problems.

• Simple, conventional, recognisable layouts that you know work will be more likely to work for your users than complicated, innovative designs.
• A simple message will be understood better than a complicated one
• Interactions with simple, clear steps and few instructions will be completed by more people than a long, wordy alternative
• Clear, uncluttered, recognisable visual design will reduce cognitive friction, reduce mistakes, and help visitors succeed

In many cases, pursuing design simplicity simply saves time and money. Or rather it finds room in a budget for thinking creatively about the real design problems, which is where you can discover the solutions that deliver true competitive advantage.

How to design to the brain's strengths

Our brains have evolved over millions of years to be extremely good at these kinds of tasks, learnt in wild situations where survival is critical. However we've only had a tiny amount of time to learn how to negotiate an online browsing situation. How do we respond when faced with an unfamiliar web site? (Remember, nearly all web sites are unfamiliar) That's right - we use those same advanced mental skills we've honed for millions of years, and which are hard-wired into our minds.

Web designers can't do much about the user's minds, but understanding the way the mind works, we can do a lot to make our pages easier to interact with, to maximise the user's chance of success.

Matching shapes

We can use the power of shape-recognition to convey desired meanings. We do this by applying recognisable signs where appropriate, using tone, colour and contrast to help direct the user's eye toward the most important elements.

Seeing patterns

We can take advantage of the user's pattern-matching ability, by using techniques of alignment, proximity, hierarchy and containment to create correct visual messages.

One of the things we do when scanning is quickly to group elements, based on their proximity and patterns. This is easier when different elements are clearly distinguishable. Elements are more distinguishable when they:

• Have significant tonal and/or colour contrast compared to other elements
• Have white space around them (helps define a shape)
• Are big enough

Focusing on the important; ignoring the unimportant

When you see a new web page, you use your hunter's skills to scan for what's relevant to your task. You use mental rules to filter out what is less important. This saves you time and mental energy. You've developed the mental rules mainly from your web-browsing experience.

When designing a page, we can help users be successful by making the most useful elements more noticeable, and making less important elements recede. We can make pages easily scannable, by using mechanics like whitespace, colour and contrast. We can make use of design conventions, putting mundane elements in conventional places and giving them conventional styles, which helps the user instantly identify them and their purpose.

High-speed problem solving

We can help the user quickly come up with correct interpretations to visual problems, by accurately identifying different elements and promoting the things the user is most likely to need. Useful techniques include:

• Clear headings and labels
• Clear hyperlinks
• Clearly differentiating form controls, such as buttons and input fields
• Highlighting key words or phrases in text

Accessibility

What we can do

• Use text for text, wherever possible. CSS makes it easy to do rich background for buttons etc., and has the benefit of decent mouseover effects built-in
• Make all text resizable where possible. People with poor eyesight may have a larger default size, and may not be able to read small text.
• Include helpful 'alt' attribute for all relevant images, to aid users using screen readers. Make alt text concise and to-the-point.

Time delay between client and server

There's always some lag between any web server and browser, no matter what the user's connection speed. Anything more than 1/10 of a second response time is noticeable. The longer the delay before the browser starts to render your web page, the more likely your user is to abandon the attempt. Anything over ten seconds wait appears generous today, so responsiveness can make a vital difference to online success.

What we can do

• Use CSS as much as possible. Tables can take a long time to render.
• Build pages in discrete, sequential chunks, and avoid wrapping entire pages in large tables.
• Save imagery for content, wherever possible.
• Make the most important items text/css based, not images. The most important items are very often the things that tell you where you are, what you can do here, where else you can go, and what else you can do when you get there.

You don't know how the user got here

You can't always be sure what route a user has taken to get to your web page.

What we can do

• Provide enough information on each page to make it clear what the site is about, where you are in the site, what's on the page, what is elsewhere and how to get what you want...

How do users respond?

The main coping mechanism we use to counter the low trust we have in the web is a manic, impatient behaviour.

• We decide in as little as 1/20 of a second whether a site is appealing or not.
• We scan pages for clues that "You're in the right place"
• We make quick decisions about whether to carry on or go back (It's proven that web users don't read the page and make a valued decision on the best link to follow, but select the first likely-looking option. See Steve Krug's book "Don't Make Me Think" - below - for more excellent insight into this.)
• When searching, we often don't even wait for the page to load, before deciding whether to click back, or follow a link (Note: Principle of putting the most important stuff at the top so it loads and is seen first.)

Designing for communication

It always helps to have a framework to start from, so that we're not designing into thin air. A good way to build a framework is to list what a site has to say, and then prioritise those messages. I like to picture an active two-way conversation between the site and the user.

How to aid scanning

When your eye scans a page, it only settles on a few elements: the ones that seem most likely to be useful. There are ways of 'promoting' elements to help them stand out to the scanning eye, and there are ways of making content 'recede' - stand out less. These techniques make use of the classic tools of design: hierarchy & containment, contrast, proximity, rhythm, motion and flow. Of these tools, contrast is the most important (it has its own tutorial later on).

To aid scanning, we can:

1. have insight into what features will be most relevant and important to the user.
2. know how to apply visual styles and techniques to help point the eye towards those elements, and skip over the unimportant elements (see the graphic design section for specific articles & tutorials).