Which element of design refers to the relationship of the area occupied by one shape to that of another a direction C size?

Visual Design Theory & the Web

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.

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.

• Organic forms are typically irregular in outline, and often asymmetrical. Organic forms are most often thought of as naturally occurring.
• Geometric forms are those which correspond to named regular shapes, such as squares, rectangles, circles, cubes, spheres, cones, and other regular forms. Architecture is usually composed of geometric forms. These forms are most often thought of as constructed or made.

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.

• Positive space is the filled space, the object(s) or element(s) in the design.
• Negative space is the empty space, or the open space between design elements or objects, such as a background.

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

• Linear Perspective
• Size & Vertical Location
• Overlapping
• Detail (Aerial or Atmospheric Perspective)

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.

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.

Have you ever wondered what makes up a great design? This will guide you through the six elements of design, and offer a proposed seventh for the era of digital design. We’ll dissect the basics and explain how you can effectively utilize them in your work.

What are the Elements of Design?

Design elements have an impact on how a piece of work is perceived, executed, and used—and are present in design regardless of skill, taste, or style.

In his book, Art As Experience, American philosopher and psychologist John Dewey concluded that everything artists and designers create has massive implications on people’s everyday experiences. To break down the elements of design, we must follow his sound advice:

In order to understand the aesthetic in its ultimate and approved forms, one must begin with it in the raw; in the events and scenes that hold the eye and ear.

John Dewey

American Philosopher and Psychologist

In other words: Start with the basics.

Everything posses a form in one way or another. When we talk about form, we’re not talking about the content of the form, but the form itself.

Forms are three dimensional, and there are two types: geometric (man-made) and natural (organic). A digital or physical form can be measured by height, width, and depth. A form can be created by combining shapes, and it can be enhanced by color or texture. Depending on their usage, they can also be ornate or utilitarian.

For digital design, think of form as the object you’re designing for; so if you’re designing for a mobile device, the phone is your form.

All objects are composed of shapes, and all elements of design are shapes in some way. Shapes can live in a form. An example would be a button on a website: It’s a shape that’s living inside the computer (which is the form).

A shape is a two- or three-dimensional object that stands out from the space next to it because of a defined or implied boundary. A shape can live in different areas in space, and have other elements like line, color, texture, or movement. Like forms, shapes come in two different types: geometric and organic.

Geometric shapes can be drawn using a ruler, compass, or digital instrument. They feel very precise, like an architecture rendering. They’re created in CAD or by hand, and are controlled and orderly. Organic shapes are found in nature or drawn by hand. They’re the opposite of geometric, and often feel natural or smooth. That’s not to say that because they’re natural, they’re less complex. Think of the grain on a stump of wood: It’s complex, but not geometrically precise.

With the advent of computer-aided design, the definition of “hand drawn” has blurred. But as long as they’re performed free hand, organic shapes can be created with a mouse, digital pen, or tablet.

Line

Often the starting point for all artistic expression, the line is one of the most essential elements of design. It always has more length than thickness, and can be unbroken, broken, or implied. A line can be vertical, diagonal, horizontal, and even curved. It can be any width, size, shape, position, direction, interval, or density.

Points create lines and lines create shapes. A line can have other elements like color, texture, and movement applied to it. Though basic in appearance, lines can control the viewer’s thoughts and emotions, and lead a viewer’s eye through space.

In digital design, the line is commonly used to contain or break areas apart visually. For example, a navigation bar could have a line to divide itself from the content.

Texture

Texture is the way a surface feels, or the way it’s perceived to feel. It has the power to attract or detract a viewer’s eyes, and can be applied to lines, shapes, and forms.

There are two types of texture: tactile and visual. Tactile textures are three-dimensional and can be touched. The easiest example is tree bark. When you touch bark, you can feel all the bumps and ridges, the roughness and smoothness. A photo of the same bark would be a visual texture. You can see it, not feel it.

In digital design, there are currently no touch screens that emulate tactile textures—yet. So we stick to visual textures.

Color

Color is one of the hardest elements to harness, and probably one of the most challenging to understand. The basics, however, are relatively easy.

Color can help the organization of a design, and give emphasis to specific areas or actions. Like other elements, it has a few different properties: hue, saturation, and lightness. Unlike other elements, it does not always have to be used. A design can have the absence of color (yes, black and white are still colors, but you get the point). Color can be used sparingly or in a rainbow of hues, but tends to work best when there’s both a dominant color and a supporting color.

Hue typically references a wavelength of light in the color spectrum, which is blended from the primary colors of red, green, and blue (commonly referred to as RGB). A specific hue can have a vibrant or dull saturation. Cyan, baby blue, navy blue, and royal blue are blue hues that are more or less intense. A color can also be on the light or dark end of the spectrum.

It’s important to note that while color is global, different cultures have different connotations for colors. For example, in some cultures, white is associated with purity; in others, it’s associated with death.

Space

Every shape or form has a place in space. As an element of design, space refers to the area around, above, below, or behind an object.

Objects in space can occur in both two and three dimensions. In a two-dimensional setting, space is about creating the illusion of a third dimension on a flat surface. Shadows, shading, overlap, and sizing can help define an object’s place in space. For example, a button could have a shadow that makes it feel like it’s closer to the user.

Space, like color, is an element that does not have to be used. But when it is, it’s a powerful way to add emphasis.

Movement

A proposed seventh element in the age of digital design is movement.

In classical or more static design methods, movement can be implied, but objects cannot move. Movement can be applied to lines, shapes, forms, and textures, and can even move objects in space. This is particularly useful because it allows your forms or shapes to take on a personality or tell a story. An example in a static medium is a cartoon where an artist has created the perception of movement with action lines or blurred areas. Movement can also be applied to physical experiences where users interact with their space.

Movement has grown popular in apps and interfaces because it allows designers to create a timeline or sequence of events to mask transitions or loading screens. If a user taps on a button, the button can animate off the canvas and the next page can slide into view. This allows the designer to keep a user engaged through animations and/or give them feedback when they’ve interacted with a specific part of the interface.

Why you should understand the core design elements

A well-rounded designer has a solid fundamental understanding of which elements to use and when. It also gives you the ability to evaluate and deconstruct other designs; looking at a design from its basic, raw elements can help you understand why a designer made certain decisions in their work.

Collaborate early and often

You’re harnessing the fundamental elements of design and are ready to turn your idea into reality. But what’s the best way to get moving in the right direction?
InVision’s collaborative design platform empowers your team to work together to create elegant, seamless UI. Capture your product’s look and feel with Freehand wireframes. Create animations and micro-interactions in Studio to get a true-to-life interactive view of the screens your users will see. Then rest easy knowing that Inspect ensures pixel-perfect handoffs from design to development.

Which elements of design refers to the relationship?

Which element of design refers to the area that an object occupied?

Which principle of design refers to the relation of one object to another in size amount number or degree scale?

What is the element of design that defines the surfaces of shapes and forms?