Structures As Patterns and Textures: The Elements Of Design Part IV

Structures, specifically patterns and textures, are used to differentiate one form from another and a form from it’s surrounding space. They also add interest, depth, and a sense of realism to your design. They can be added to individual forms or to the space around forms and they are created through organized or random structuring of elements.

So far this series on design elements has focused on specific objects we add to our design. We started with points and dots and continued to add dimensions until we arrived at volumes and the concept of optical mass. Today we move beyond the objects themselves and look at organizing or structuring objects to create visual activity in the form of patterns and textures.

A few weeks back I wrote about visual grammar including a discussion of structures. Let’s begin here with a review of structures and some additional details the previous post didn’t cover.

What are Structures

Any time we place two or more objects on a page in relation to each other they form a structure. There becomes some kind of organization between the elements and the more elements that make up our structure the more complex and interesting that structure will be.

Structures are defined by their structure lines, those lines that connect the objects. These lines can be visible, though they don’t need to be. As long as we can perceive the connection between objects, structure lines are present. These lines can also be active or inactive. Active structure lines are those that influence the objects in the structure in some way.

Structures can be:

• Abstract – the structure lines are both invisible and inactive.
• Concrete – the structure lines are either visible, active, or both. When the structure lines are visible the objects themselves don’t need to be present to form a concrete structure.

Either objects in the structure or the structure lines can be used to form patterns and textures. The structures we form can be geometric or organic and we can combine geometric forms organically or organic forms geometrically. Each will convey a different message.

Structures as Surface Activity

We can talk about structures as surface activity as they are going to cover some area or surface. They make that surface more active hence the term surface activity. There are two types of surface activity, patterns and textures.

• Patterns are structures with a geometric quality. When objects are arranged in a recognizable and repeatable structure they form a pattern.
• Textures are structures with irregular surface activity. When objects are arranged in a random or varying pattern they form a texture.

Both patterns and textures are attributes we add to our design elements. We can add them to planes and surfaces and the whitespace around our forms. They can be used to add dimensionality to turn planes and surfaces into volumes. They can call attention to whitespace that takes on a texture or pattern of that contrasts with a textured or patterned element.

As with objects the basic building block is the dot. Groups of dots of varying size, shape, mass, color, etc., create the perception of surface activity. We’re not limited to using dots of course. Lines and other forms can also be used to form structures, patterns, and textures.

Patterns

Visual activity across a surface is a pattern when the structure forming the pattern based on consistent and repeated relationships. Patterns are geometric and mathematical. They are planned structures, synthetic and mechanical. Their geometric nature means patterns can be easily mass produced.

Patterns can add richness and depth to a design. They can give life and energy to areas of of design usually left blank, namely whitespace. Patterns can be used as supporting backdrops for text and images as long as they don’t overwhelm the element they’re placed on top of or the element they aim to support.

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.

It’s key to remember that patterns are supporting elements. The content, style, and message of a pattern should enhance the message you want an element to convey. The message of a pattern can also contradict the message of an element and combine to form a new message.

Single shapes and objects can be used to create complex geometric patterns through both repetition and rotation. These patterns can help make another object more complex and interesting.

Increasing the density of objects in a pattern leads to the pattern having a darker value. Changing the density of the pattern over the surface can create a consistent transition from light to dark that mimics the play of light over a volume. Patterns used this way tend to create a more stylized version of a volume than when textures are used in a similar way.

Again remember that patterns work best in a supporting role. Too much pattern in a design can become a bad thing. They can make your design seem too decorative and pushing things to excess. Patterns support you message. They aren’t your message on their own and they can quickly overwhelm your elements and design when overused.

Textures

Visual activity across a surface is a texture when the structure forming the texture is based on irregular and random relationships over given areas. Textures are organic and natural. The size of the objects or lines forming the texture may vary. The distance between them may vary. The density of the structure may vary. This variety leads to a perception of organic, natural, or random structures in a texture.

Textures are physical. We can touch them. We can feel them. They can be smooth or rough, hard or soft. Naturally in web design we can’t actually create this physical quality. We can only create the perception of this physical quality. When we work in a 2-dimensional format we create implied texture. Done well your audience will be able to imagine how your texture will feel.

This physical quality gives texture a sense of realism. Textures add depth, a 3rd dimension to the 2-dimensional format of the screen in an organic way. This connection to the physical world can give a greater sense of realism to your design.

Textures can be a nice way to add subtle details to your design. (<— video: texture discussion begins about 1:45 in) They help add another sense (touch) through which we can communicate with our audience.

The more constant the irregularity of a texture’s density, the less contrast across the surface, and the flatter or more 2-dimensional the texture appears. The more contrast in the texture’s density across the surface the greater the depth and the more 3-dimensional the texture appears.

As with patterns when the density from dark to light over the surface is an even and continuous transition we can mimic the play of light over a volume. Unlike patterns these volumes will seem more realistic and not come across as stylized.

We can create textures from dots and lines and from patterns. They can be added within the contours of a single shape to add interest to that shape or communicate an additional layer of message. That message can complement or contradict the message of the object. Interesting juxtapositions can be created when texture and object offer contradictory messages.

You might have heard the phrase typographic texture. Type has a visual structure, varied through weight, density, spacing, etc., that suggest fabric. In fact the word text comes from the Latin textus, which is the work for the texture of woven fabric.

Repetition in textural styles can help create unity in design. And again as with patterns they can add visual interest when done well. When overused they can create chaos and cause a design to suffer.

Consider the two images depicting Vincent Van Gogh’s bedroom in Arles, one by Roy Lichtenstein (above) and one by Van Gogh himself (below). The Lichtenstein image uses pattern and the Van Gogh image uses texture. Both images while strikingly similar in composition are also strikingly different in their use of structures and the feeling they convey.

Resources

I’m sure you’ve encountered tons of posts offering free textures and showcasing sites using textures and maybe even some posts offering tutorials for creating your own textures. So what’s a few more, right? Here are some I collected while working on this post.

• Textures and Patterns Design Showcase
• Textures In Modern Web Design
• 25 Excellent Photoshop Texture Tutorials
• Showcase of Textures in Print Design
• Web Designs that Use Textures Beautifully
• Using Texture to Get the Most Out of Design
• Textures In Web Design: Examples And Best Practices
• The Big Collection Of Free Design Textures
• Using Texture: Real World Examples
• Texture Used in Web Design: Examples, Best Practices, and How-To

Summary

Structures differentiate one object from another and differentiate objects from their surrounding space. They add interest and depth and can be used to add a sense a realism to an element or an entire design.

The two types of structures we work with are patterns and textures. Both work by adding activity on the surface of a form. Patterns are geometric and stylized. Textures are organic and realistic.

Patterns and textures aren’t limited to the background. They can be placed on forms or whitespace and can either complement or contradict the message conveyed by the form or space.

Both should be used primarily in a supporting role. They add an extra layer of communication to the message you want to convey, but they need your design elements and whitespace to communicate that additional layer of message. Structure for the sake of structure, too much pattern or texture, can overwhelm a design and be seen as excessive decoration lacking communication.

Think about what different patterns and textures say and think about how they can enhance your elements and overall design. Used sparingly they add subtle detail and interest that can help unify your design and message.

The Elements of Design Series

• Introduction: Design Elements and Principles
• Points, Dots, and Lines
• Form: Surfaces And Planes, Volume And Mass
• Structures, Patterns, and Textures
• Size, Scale, And Proportion
• Thoughts on Whitespace
• How to Use Space in Design
• Color Theory
• The Meaning of Color

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.