Design is or (soon will be) approaching commodity status, but the management of the design process is difficult, misunderstood, and undervalued.

The quote struck me, because I’ve never thought about design as a commodity. Is design now a commodity or could it ever approach commodity status? As I’ve been thinking through this I can definitely answer yes and no. Ok, that’s not so definitive, is it. I can see how design can be commoditized by the market, but I don’t think design is truly a commodity.

Let me walk you through my thinking, though you may find I raise more questions than I answer.

The article itself is only available in the print addition, but you can get a feel for what it was about reading What About Crowdsourcing on the How Magazine site or the associated forum thread discussing the article.

What is a Commodity?

To answer the question we first need to define what a commodity is. Here are a few definitions I found at online dictionaries.

• Commodity: a physical substance, such as food, grains, and metals, which is interchangeable with another product of the same type.
• Commodity: a good or service whose wide availability typically leads to smaller profit margins and diminishes the importance of factors (as brand name) other than price.
• Commodity: a good for which there is demand, but which is supplied without qualitative differentiation across a market.

There are a couple of related ideas in the above. Commodities are goods and services where there is little difference in quality across a market and where buying decision comes down to price and price alone.

Keep both ideas in mind as you read this post and think about the question.

What is Design?

I think we also need to answer the question what is design as well, though I’ll offer a limited answer, since it can easily take up several posts and discussions on its own.

Design is a planned solution to a problem. When we talk about visual or communication design, the problem is naturally one of communicating a message or messages to an audience visually. When we talk about web design we add in solving problems of usability and other technical concerns.

Rarely if ever is there a single solution to a design problem. A large part of a designer’s job is choosing the best or most appropriate solution to the problem. That there is generally more than one solution to a problem implies that the quality of solution, the quality of design varies across the market.

On the other hand is there truly a best solution? You and I would likely come up with a different design for any client, but does that necessarily mean your design is better than mine or mine better than yours?

What is creativity and what role does it play in design? Again some definitions I came across:

• Creativity is the ability to generate innovative ideas and manifest them from thought into reality. The process involves original thinking and then producing.
• Creativity is the ability to produce something new through imaginative skill, whether a new solution to a problem, a new method or device, or a new artistic object or form.

Innovative, original, new, imaginative, artistic. These aren’t commodity words. These words hint at qualitative differences and in our definition of commodity we learned that commodities don’t show qualitative differences from solution to solution.

How much creativity then is part of design?

Andy Rutledge wrote an interesting post for A List Apart a couple of years ago Here’s the post republished on Andy’s site.

Creativity has nothing at all to do with self-expression or flamboyancy. Aside from the simple ability to create things, the most important feature of creativity is a highly developed perception filter that is somewhat less common than we’re led to believe. Despite what we were taught in school, we don’t all possess significant creativity, and fewer of us still have any skill at employing it. True, anyone can make something, and anyone can make something up. In this mundane sense, everyone is creative. But this basic truth belies the design-relevant definition of creativity, and ignores the fact that each one of us has different creative abilities.

An interesting way of looking at creativity, but what stands out to me in the context of this discussion is the last sentence about each of us having different creative abilities. Again that implies difference in quality.

A couple of other quotes from the post that also lend to the argument of qualitative differences.

Creativity is an inborn capacity for thinking differently than most, seeing differently, and making connections and perceiving relationships others miss.

It is primarily these disciplines that set top creative professionals apart from those who are merely gifted.

Of course Andy has also argued that creativity has nothing to do with design, which would mean we shouldn’t use it as an argument against design commodity here.

Then again Andy makes sure to protect brand when hiring and choosing clients to avoid becoming a commodity.

Do Clients Value Design?

Our clients must value design to some degree if they’ve hired us, but search any small business forum and it won’t take you long to find many people expressing opinions that design isn’t important, especially on the web. There’s a common thought that design isn’t necessary.

Usually people are referring to design aesthetics when they say this, though to most people design and design aesthetics are one and the same. They’re not differentiating design and art. They point to examples like Craig’s List to show that you don’t need design to be successful. Personally I think there’s a lot more design at Craig’s List than people give it credit for. Aesthetics? No. Design? Yes.

Content though, trumps design. Most of us will put up with a very bad design if we feel the content is worth the effort.

From what I can tell most people don’t see the value in design. You and I do, but we’re designers. We think design matters and equate code to poetry. The best designs are often unnoticed to those not in the profession. It’s only when design gets in the way that people realize it’s impact. Bad designs stand out to the average user. Good design is seamless and unnoticed.

This will probably sound a bit elitist, but how many sites have you looked at that were clearly designed by an amateur and what did you think of those designs? I know I cringe when I visit a site where every bit of text is centered and there is no space between any element on the page. I cringe when I see tables showing the default html borders and no consideration whatsoever to any principle of design.

Yet cringing though I may be, I also know the owners of those sites often think they look great. They honestly like how the site looks and can’t see the difference between it and one designed by someone like Jason Santa Maria.

If the average person doesn’t see value in design, if they don’t see the difference between good and bad design, then what is the criteria for their buying decision? Likely price. If people don’t see the value of your services and can’t see the difference in what you offer as compared to the next designer aren’t they viewing you and design in general as a commodity?

Can Design be Commoditized?

A few more thoughts on both sides of the argument:

Things like design patterns and design templates and themes lead design down the path of commoditization. If we’re all using the same design patterns doesn’t that lead to a sameness in our designs?

If people are buying templates and themes then aren’t their sites looking mostly the same? If more and more designs use the same stock photography and freely available icons and patterns and textures aren’t we commoditizing design?

Everything can be outsourced or done cheaper. Every part of the design process can be sent to someone who works for less than you do. Outsourcing to reduce costs leads design toward commodity status.

Think about Apple. Apple is a company who’s business is based around design. They nail aesthetic details and above all else look to design the best experience they can for their customers, even if that means ignoring features much of the market wants. If adding the feature takes away from the experience, the feature doesn’t get added. Apple innovates through design.

Apple may not have the largest market share in many markets, but they often have the highest margins. You may or may not like them, but they are certainly doing well and people mainly choose Apple products because of the differentiation in the quality of design. Their success would indicate that design is hardly a commodity.

Earlier I mentioned content trumping design. That’s true, but many studies will show that we thing we’re more productive when the thing we’re working with is aesthetically pleasing. We often judge content based on it’s packaging. Design can and does provide a better experience and make things better. Even if it’s only the perception of something being better it becomes better based on that perception. Design matters, which indicates it’s outside the realm of commodity status.

Let’s take this back to the original article that started me thinking about all this. The article was about crowdsourcing and the idea that crowdsourcing design pushes it toward commodity. However doesn’t the idea that several or many different designs are created and then a “best” one chosen clearly say there are difference in the quality of those designs.

Again consider the two aspects of commodities. No differentiation in quality and a buying decision based solely or mainly on price. You’ll never convince me that there is no differentiation in quality from design to design. The influence of creativity and the idea that there isn’t a singular design solution as well as my own observation of different design, clearly say to me there is a great differentiation in quality from design to design.

On the other hand if the market doesn’t see the value in design and can’t see those differences in quality then they are commoditizing design. As tools are developed that enable anyone to create a design (good or bad) the supply of design increases. People start to buy on price alone, which leads many designers to compete based solely on price, which again leads us down a commodity path.

Can design be commoditized? I think the answer is yes, based on how the market views design. Is design a commodity? I think no based on the always present differences in quality from design to design. Design itself will never be a commodity, but the profession of design can be commoditized.

If we don’t want the latter to happen we should do what we can to consistently improve our skills and create better and better designs. We should never use price as a selling point and by example show others that good design outperforms bad design.

Like I said more questions than answers. Do you think design is a commodity? Has it been or can it be commoditized?

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 and Scale
• Thoughts on Whitespace
• How to Use Space in Design
• Color Theory
• The Meaning of Color

Let me apologize in advance for bouncing back and forth between names throughout this post. Form, surface, plane, shape, volume, mass, weight. They get interchanged a lot depending on where you read them. Hopefully it won’t become too confusing as you read here or even better all these terms of visual grammar become clearer by the time you finish this post.

What is Form?

Form is any positive element we place on a page as opposed to the negative elements we consider space. Form is the point, line, plane, and volume. It’s the shapes and dots and text and textures and images we use in our design. If it’s meant to be a positive element it’s form.

I’m including form here in the series since it’s most often used as a synonym for either shape or volume, for those elements that are either 2-dimensional or 3-dimension. I’ve often found this confusing when reading articles talking about form, since the greater more inclusive meaning of form is usually absent leaving one to believe a form is a 2-dimensional shape in one place and a 3-dimensional volume in another.

Again form is any positive element on your page. Everything in your design is either form or space, positive or negative, figure or ground.

Form and space, figure and ground are mutually dependent on each other. You can’t change one without changing the other. The relationship between form and space creates tension, determines the amount of visual activity and movement, and gives a sense of 3-dimensionality in a design. A viewer must first understand the relationship between form and space before understanding any of the individual objects on the page.

All forms carry some kind of meaning, though no one form is better than another at communicating meaning. Your choice in which forms to use, however, is an important consideration in communicating the right message, your message.

Surfaces, Planes, Shapes

Much the same way a line can be thought of as a series of adjacent dots, a plane or surface can be thought of as a series of adjacent lines. We’re simply adding another dimension. Surfaces and planes are abstract objects. We’ll talk about them more as shapes or forms as we think of them as concrete objects.

Planes or surfaces mostly act as dots. The difference is the size of the surface has grown large enough to become an important characteristic as has the contour defining the plane. The larger the size of the plane the more the dotlike characteristics become secondary. This size is relative to the surrounding space and elements.

Large planes can still act as dots if the space around them is large enough and any other elements in the space small enough. As the relative sizes change there is a point of change that occurs when the plane becomes large enough so that it’s shape affects the space and other shapes around it.

The more active the contour of a plane, the more dynamic it’s shape will appear to be and the less dotlike it will appear to be.

While technically a 2-dimensional object doesn’t carry any mass or volume, our 2-dimensional elements carry visual weight and mass. This visual mass and weight are determined by the size and simplicity or complexity of the contour of the shape.

Large, simple forms carry a heavy visual weight and appear dotlike. Surfaces with complex contours and interaction with their internal and external space (both positive and negative) carry less weight and become more line-like.

Shapes; Geometric and Organic

When we come to see a form’s outer contour, our brains try to establish some meaning with the shape and the contour. We can group these shapes under two main types, geometric and organic. A third type of shape, abstract, we’ll consider as a sub type of organic shapes, though more often it’s considered one of the three classes of shape.

When a form or shape has regularized contours, when internal and external measurements are mathematically similar in multiple directions, we think of the form or shape as geometric. Angular and hard edged forms are generally seen as geometric.

The 3 main types of geometric shapes are the circle, the polygon (square and triangle being the simplest), and the line. The square is the most stable and carries the most visual weight. The triangle is the least stable and displays great movement. The circle is nearly as stable as the square and hints at rotational movement.

Circles or dots can be interpreted as either geometric or organic.

Shapes or forms that have irregular, complex, and highly differentiated contours are considered organic. Soft, textured forms also appear to be organic shapes as they are seen more like things we see in nature. Variation is an inherent quality of organic forms.

Abstract shapes are simplified or stylized versions of organic shapes. Think icons.

Geometry does exist in nature, but it’s often obscured by perceptions of irregularity. Think of a leaf. It’s generally symmetrical and often close to taking a triangular shape. However we perceive the irregularities in its contours before we see this symmetry and near triangularity.

Geometric forms can be arranged organically and organic forms can be arranged geometrically. Either creates tension between the forms and their structure. When we want to convey an organic message, we should emphasize the organic qualities of form and use more irregularity and variety.

Volumes and Mass

Volumes are empty space defined by surfaces, lines, and points. When we fill in the space or give the perception that the space within a volume has been filled to some degree the volume contains mass.

If you remember from physics class, density = mass / volume. In a 2-dimensional design we can only offer the perception of mass, density, and volume. When we give a surface or plane the illusion of being 3-dimensional we have a volume.

We can do this by adding pattern and texture to the surface or by changing the color or value across the surface to mimic the effect of light and shadow. We can also use perspective within a form to create the illusion that the form is a volume.

Since we live in a 3-dimensional world when we add volumetric qualities to our 2-dimensional format we add a sense of realism to a design. For some examples have a look at either of the following posts and consider how the designs shown make use of depth and 3d elements to add a sense a realism.

• Beautiful Examples of 3D Elements in Web Design
• Gallery of 3D Elements in Web Design

Volumes advance when compared to a plane and also carry greater mass and visual weight than planes or surfaces. If we overlap a plane on top of a volume it creates tension between the foreground and background as normal expectations are for the volume to advance and the plane to recede.

Visual Mass and Weight

Mass and Weight are physical qualities that don’t really exist in a 2-dimensional format. In design we talk about visual or optical mass and weight.

In the physical world objects with great mass attract and pull other objects toward them. In the world of visual design elements with great mass also attract. The perception of mass in an element is how strongly the element pulls your eye toward it.

As with volume, mass is only something we can hint at or represent in the 2-dimensional format we work with. We add visual mass and weight to an element, through size and color or value. We can also play around with the form of the element.

Through our use of mass or weight we control balance and movement in a design.

We can add mass to a series of angular planes by rotating them and letting them overlap each other. The overlapped area becomes darker and is seen as containing the mass from multiple planes. The rotation also creates movement.

Adding a consistent pattern on a surface leads to the perception of there being less mass in that plane. The plane also becomes flatter as compared to an adjacent solid plane. The solid plane appears to advance into the foreground due to the perception of it carrying more weight.

While appearing flatter our textured plane also appears more active than the adjacent solid plane and if we overlap the textured plane on top of the solid plane we again create tension between foreground and background.

This changes if the pattern or texture emulates the effects of light and shade, in which case the surface or plane becomes a volume with greater mass and weight and naturally appears less flat. Volumes are 3-dimensional and the extra dimension brings with it the perception of mass and weight. A sphere always weighs more than a circle.

Summary

Forms are any positive element you place within the negative space of your design. All forms communicate and you should choose your forms based on the message you want to communicate to your audience. The relationship between form and space should be one of the most important considerations in any design.

Planes or surfaces are 2-dimensional abstract forms. Shapes are the concrete equivalent. A plane can appear either dotlike or linelike depending on its contour and its relative size to the size of the space and other elements around it.

Volumes are 3-dimensional forms. They can only represented on a 2-dimensional format, but in so doing give a greater sense of realism to a design. Volumes are created mimicking the effects of light and shadow on a surface or plane.

All forms carry a visual mass or weight determined by size and color and by the contour of the form. Volumes carry more weight by default than surfaces, but the weight of both can be increased or decreased by altering the characteristics of either form.

If you think back to my post on visual grammar, we talked about objects and structures. This post and the previous one in this series on points, dots, and lines covered the objects of visual grammar.

Next time we’ll continue the series by moving on to a discussion of structures. By structuring any or all of the objects we’ve looked at we can form patterns and textures.

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 and Scale
• Thoughts on Whitespace
• How to Use Space in Design
• Color Theory
• The Meaning of Color

• Points/Dots
• Lines
• Surfaces/Planes/Shapes
• Form/Volume/Mass
• Pattern/Texture
• Size/Scale
• Space
• Color/Value

Points or dots and lines have distinct characteristics and functions. In fact most of the other elements will mimic these fundamental qualities of point, dot, and line in some way so it makes sense for us to understand these two elements before any other.

Let’s dive right in to points and dots.

Points and Dots

As I mentioned last week a point is a coordinate without any dimensions, without any area. Points are the simplest element of visual design. By definition we can’t actually draw a point, since to see one would require it have dimensions.

What we can draw is a dot. In fact dots are the building blocks of everything else. Any other mark we make can be seen as one or more dots in combination. Every shape, form, mass, or blob with a recognizable center is essentially a dot regardless of its size.

The defining characteristic of a dot is that it’s a point of focused attention. Dots anchor themselves in space and provide a reference point relative to the other forms and space around it. While we often think of dots as circular in nature, they don’t have to be. What they are is points of focused attention. Dots are the focal points in our compositions.

Dots establish a relationship with the space around it. The two most important relationships formed are the proportion of the dot and the space around it and the position of the dot within that space.

As dots increase in size we start to see them as shapes, but they still retain their fundamental dot-like qualities and characteristics. A square placed in the whitespace of a page is still a dot. It still attracts visual attention to it, which again is the dot’s defining characteristic.

Dots centrally placed within a composition create symmetry and are neutral and static, through they tend to dominate the space around them. Dots placed off center create asymmetry. They are dynamic and actively influence the space around them.

The Relationship between Dot and Dot

Things get more interesting when we add more than one dot and they interact with each other. 2 dots near each other shift the emphasis of the relationships of the dot with its surrounding space to the relationship and interaction between dot and dot. 2 dots imply a structure.

As the space between dots decreases the tension between them increases. As that space approaches zero the tiny bit of space itself becomes more important than either dot or any other interval of space on the page. All the tension is held in that tiny bit of space.

As dots get closer together they start to be seen as a single object. Their identity moves to that of the single object instead of the multiple identities of distinct objects. If we allow the dots to continue to to get closer until one dot overlaps the other, the tension in the space between them decreases, replaced by a new tension based on the appearance of depth.

One dot overlapping another creates a figure/ground relationship. One dot is now in the foreground and the other is pushed into the background. Overlapping dots form more complex shapes than either of the individual dots. This resulting cluster of dots is in itself a new dot with a different form.

Dots further apart emphasize the structure between them instead of the identity of either dot. If you then add more dots in close proximity to a pair of dots it also emphasizes the structure of all the dots instead of the identity of a single dot or dot pair.

Dots working together can form an endless variety of arrangement and complexity. The can become lines and curves. They can form complex shapes, patterns, textures, and any other structure imaginable. Dots in combination can even imply direction and movement, bringing us to lines.

Lines

A line is a series of points adjacent to each other. Where a point has no dimension, a line has one dimension. They have a length, but nothing else. In reality a line would need a second dimension to actually see it, but we’ll continue to call them lines and not something else here.

The fundamental characteristic of a line is to connect or unite. This connection can be visible or invisible. Two dots on a page have a connection even if that connection, that line between them, can not be seen. The dots attract of repel each other along a line.

Where dots are about position, lines are about movement and direction. A line leads somewhere, your eye moves along it seeking one or both of its endpoints. This movement and direction makes lines inherently dynamic. A line is not attracting you to a point in space. It’s directing you toward and away from points in space.

The flip side of connecting is separating. Lines not only connect elements, they can also separate elements. They can connect an element to space or separate it from space. Lines separate and join both spaces and objects. Lines can also cross barriers, protect, and support.

As lines become thicker they begin to be perceived as planes or surfaces and they gain mass. To maintain their identity as lines they must increase in length as they increase in width. Changing the width of a line relative to its length has a much greater effect on the quality of a line as changing the size of a dot has on the quality of a dot.

If a line continues to get thicker without also getting longer at some point it ceases to be a line and becomes a surface or plane.

A single line traveling in a curve around a fixed, invisible point with an unchanging distance from that point, eventually joins it’s starting point and becomes circle. A circle is a line until the thickness of the line increases to completely fill the negative space inside the circle. The negative space itself can be seen as a dot distinct from the line/circle. If the distance from the fixed center point is allowed to change the line doesn’t meet it’s starting point and a spiral is formed instead of a circle.

The thinner the line the more the emphasis is on the quality of direction. The thicker the line the more emphasis is moved to the quality of mass and away from the quality of direction.

The endpoints of a line can be seen or appear to move toward infinity. As lines are allowed to enter and leave a format without seeing their endpoints their sense of movement is reinforced. When one end point is contained within the format the direction is no longer infinite. It becomes specific to the point and the tension between the end point and the surrounding space is increased.

The Relationship Between Line and Line

When two lines join they create an angle between them. This joint or point of connection becomes the starting point to move in 2 different directions along 2 different lines. Multiple joints create a sense of altered direction. When the angle between lines is acute (less than 90 degrees) the movement and change in direction is perceived to be rapid.

Separating lines from each other focuses attention on the individual identity of each line and the interval between them. As the interval between a series of lines and the width of those lines varies, a rhythm is created. Changing the color or value of the lines can add more complexity to that rhythm.

Changing the thickness or weight of lines and the intervals between lines creates a sense of depth. Lines that appear closer together have more tension between them and advance to the foreground. Lines further apart have less tension between them and recede into the background.

If a line or lines is to added a series of lines at an angle and allowed to cross several lines, this sense of depth is increased. It creates perspective.

Thick lines placed close together create a thin line in the negative space between them. This negative space line can often become the positive element and the original lines are seen as the new negative space.

Lines working together and in rhythm can form patterns and textures.

Summary

Points or dots and lines are the two fundamental objects at our disposal. True a line is basically a series of points or dots, but dot and line carry two different fundamental functions.

One holds a point in space and the other connects and separates points in space. One is about attracting your eye to a given coordinate and the other is about moving your eye from one coordinate to another along a direction.

Points and dots lead us to talking about points of entry and focal points and the principle of dominance. They lead to discussions of contrast and visual hierarchy, composition and balance. Lines lead us into discussions of movement and direction and to creating design flow. They lead us to proximity and grouping and alignment.

Most everything we do as communication designers will come back to the fundamental qualities and functions of these basic elements.

When we look at the other objects and look at structures we’ll see they function in similar ways as either dot or line. They either anchor our attention of give a sense of movement and direction.

Next time we’ll look at the 2 and 3 dimensional objects at our disposal before moving on to a discussion of structures and the patterns and textures we create from them.

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 and Scale
• Thoughts on Whitespace
• How to Use Space in Design
• Color Theory
• The Meaning of Color

I’d like to take a deeper look at objects and structures, a look at our design elements, what they communicate to the viewer and how we can use them in our designs.

This post will serve as something of an introduction. We’ll walk through the difference between design elements and design principles and then talk briefly about each of 8 different design elements.

Over the next few weeks I’ll write more detailed posts about most of the elements listed below.

The Difference Between Design Principles and Design Elements

Awhile back I wrote a series entitled The 7 Components of Design. The use of the word component caused a bit of confusion in at least person and understandably so.

That title and the use of the word components were due to the book I used as a starting point for the series. The book called them components, so I called them components. The truth is they were a mix of principles and elements (PDF).

Design Principles

Design principles are rules or rather guidelines to follow. Some are based on scientific data, some based on human psychology, some are simply observations over time of what works and what doesn’t. You’re free to go against any principle, though you should always understand why the principle exists and what it communicates by going against it.

Each principle of design conveys messages. For example contrasting two objects conveys a message that the objects are different. Repeating a size or color across different principles conveys the idea that they are somehow the same.

If strongly aligning objects in your design provides a sense of order and your main message is one of disorder it makes sense to ignore the principle of alignment. You want to communicate disorder so ignoring a principle that tells you to maintain order could make more sense than following it. However ignoring the principle just because you don’t understand it or don’t feel like following it is going to lead to poor design.

Try not to get caught up in the names people give to principles or exactly how many there are. You’ll often see the same principle with different names. For example the principle of repetition and the principle of similarity are really the same thing. They’re both the idea of repeating attributes like color or shape or size so two or more elements, while different, communicate something similar.

The main thing to remember is that principles are rules or guidelines to follow, because they’ve been shown to generally improve a design. You don’t have to follow any one principle, but before going against one you should understand why it exists as a principle and what going against it communicates.

Design Elements

Design elements are the things we actually use in a design. You can’t draw a principle or create one in Photoshop. You create elements or objects and you place them on the page or screen according to a set of principles.

The objects and structures we looked at when talking about visual grammar make up most of the elements of design. When we add space and color we pretty much have them all.

As with principles try not to get caught up in names and specific numbers about exactly how many elements there are. Again different people will group them differently or give them different names. If you look through the resources I link to further down in the post you’ll see what I mean.

Like principles, elements also convey messages. A dot has a different story to tell than a line. Each serves a different function. You don’t need to use every element in a single design, but you should be familiar with what each does and what each communicates.

Elements are the actual things we add to a design. Principles tell us how we should organize those elements on the page or screen. Remember the goal is to communicate something, Elements and principles are the tools through which we can communicate.

This combination of following and breaking principles through our use of different elements and organization of those elements is visual or communication design.

8 Elements of Design

We’re focusing on elements here so let’s list what those elements are. If you search for “elements of design” or similar you’ll find a number of lists that mostly agree, yet each seems to include something the others don’t or leave off something included in most lists. That’s because the elements are interrelated.

Of the first 5 elements listed below, the latter 4 can all be created from the point or dot. So are they all truly elements or just complex points and dots? Size and color are characteristics we give to these 5 elements. So again are they elements since they don’t really exist without the other elements? Even space might seem to be a category unto its own.

My point is not to see this as the definitive list of design elements. It’s how I’m listing them here. In three months I could easily create another list that groups things a little differently.

1. Points/Dots – Points are coordinates in space, without dimension or area. Dots are how we see points. Dots are points of focused attention. Points and dots are the most basic element and are the building blocks for everything else.
2. Lines are series of adjacent points. They’re points in motion. By definition they have one dimension, but to see a line we need to see 2 dimensions. Where dots are about attracting attention, lines are about movement and direction.
3. Surfaces/Planes/Shapes – all have 2 dimensions. Each is essentially a flat object without depth. Technically they have no mass, but we begin to see a visual mass or weight in 2 dimensional objects
4. Form/Volume/Mass take us into 3 dimensions. However the format we work with (page or screen) is 2 dimensional so we can only represent form, volume, and mass in design.
5. Pattern/Texture evolve out of structures. When two or more elements are placed in a design there is a structure between them. We describe structures through the patterns they form. As these patterns begin to form their own compositions they become textures.
6. Size/Scale are about the relative size and proportion of different elements. Elements of different sizes convey different messages especially in relation to other elements of different or similar size.
7. Space connects and separates elements. It’s the contrast that allows everything else to be seen and recognized. Learning to see and control space is perhaps the most important skill you can learn as a designer.
8. Color/Value – Color is how we see the reflection of lightwaves. Value is the relative lightness or darkness we see. Both convey a lot of meaning as each of us is influenced physically, psychologically, and socially by color and the value of color.

Again don’t take the list above as gospel. Different lists will define the elements in different ways. I think I’ve managed to cover all the essential elements in the list above, but in three months time this list could be different as well.

I’ve written about both whitespace and color several times in the past and won’t cover them again in this series. I’ve also covered both lines and shapes in the past, but I do want to take another look at both.

In the nest post we’ll consider points, dots, and lines. We’ll then look at surfaces/planes/shapes and form/volume/mass. Finally we’ll dive into pattern and texture and size/scale.

Resources

As I said search around and you’ll find slightly different lists of design elements, though if you read a few you’ll see they’re each saying essentially the same thing.

Here are a few posts I’ve collected with those lists and thoughts about what each element is and does.

• The Elements of Design
• Composition & the Elements of Visual Design
• Want to know how to design? Learn The Basics.
• Elements Of Design
• The ABCs of Visual Design: Elements
• Elements and Principles of Design in Art and Music
• Elements and Principles of Design

Summary

Design principles and design elements often get written about together, but they are different things. Elements are the actual things we use in a design and principles are the rules that govern the use of the those elements.

Both elements and principles are tools in our designer toolbox. As you often hear me say our job is to communicate. Elements and principles are the means through which we communicate so it’s important for us to understand those means. In this series we’ll focus on design elements.

Next time we’ll take a deeper look at points/dots, and lines. Each has a distinct characteristic. Dots attract attention to a specific point in a design and lines connect and separate points along a directions. When we look deeper at the other objects and structures that make up our design elements we’ll see they either function in similar ways as dot and line. They either anchor our attention of give a sense of movement and direction.

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 and Scale
• Thoughts on Whitespace
• How to Use Space in Design
• Color Theory
• The Meaning of Color

Communication requires language. That language can be aural as in the spoken word, it can be gestural as in sign language, or it can be visual as in design. The more you understand any language the better you can communicate using that language. The visual language of design is no exception.

Design elements are like letters and words. When we add design principles and apply them to our elements, our words, we form a visual grammar. As we learn to use both we enable ourselves to communicate visually.

Defining Visual Grammar

Most of the information in this post is coming from Christian Leborg’s book Visual Grammar shown above. From the preface of the book:

The reason for writing a grammar of visual language is the same as for any language: to define its basic elements, describe its patterns and processes, and to understand the relationship between the individual elements in the system. Visual language has no formal syntax or semantics, but the visual objects themselves can be classified.

The last point in the quote above is important. It would be great if we could place a circle on the page, a rectangle to the right of it, and a curved line to the right of the rectangle and have it mean the same thing to all people. It won’t. That makes it harder to think and communicate visually, though also much more interesting. It’s one reason a single design problem can have so many different design solutions.

However, we can classify much of this visual grammar. I’m going to deviate just a bit from the way Christian organizes his book and organize visual grammar as:

• Objects – The basic elements we have to work with. Can be abstract or concrete.
• Structures – The patterns formed from our basic elements. Can be abstract or concrete.
• Activities - The processes we can represent with our basic elements and patterns.
• Relations – The relationships between objects, patterns, and processes. They’re the way everything in your design relates to each other and the viewer.

Objects and structures will both further be subdivided into abstract and concrete sections. In the book the main sections are Abstract and Concrete, with objects and structures being the subsections, but I think it makes more sense to organize them as I have here.

As you read through the rest of this post you’ll see many connections to design principles that myself and others have written about. In many ways this post and Leborg’s book are a way to organize all those principles and ideas to see how they fit an overall visual grammar

Objects

Objects are the basic elements at our disposal. They’re akin to letters and words. We use objects to express different ideas and concepts. A circle is an object as is a line as is a single character of type. A single point is an object as is an image of a person holding your product. Objects are the most basic elements we can add to any design.

Objects can be abstract or concrete.

Abstract Objects

Abstract objects are idealized shapes that can’t physically be created. For example take a point. A point by definition has no area. It only has a position. Any point we try to draw will have some kind of area if we are to see it and once it does, it ceases to become a point. It can only exist as an abstract concept and not as a physical thing.

Abstract objects include:

• Points – A position on a coordinate system without area. Points have no dimensions
• Lines – A series of points adjacent to each other. Points have one dimensions
• Surfaces – A series of lines that are adjacent to each other and perpendicular to their direction. Surfaces have two dimensions.
• Volumes – An empty space defined by surfaces, lines, and points. Volumes have three dimensions.

Theoretically objects can have an infinite amount of dimensions. Of course we can only perceive three of them, width, height, and depth so our abstract objects end with volumes. Beyond volumes we can only imagine more abstract objects and we can only represent these additional abstract objects using points, lines, surfaces, and volumes.

Everything we see is perceived in relation to some kind of external limit. This external limit is the format. For example this post is seen in relation to the format of your browser window. The format of a book or magazine is the page.

Concrete Objects

Concrete objects are perceived within defined limits called contours. Inside and including the contour itself is our object, our shape, our form, and outside the contour is everything else. Forms or shapes can be geometric, organic, or random (sometimes called abstract). A circle is an example of a concrete object. It’s contour being the curved line that encloses it.

Concrete objects have:

• Form – defined by a contour of surfaces and lines. A form is how a thing looks.
• Size – Forms can be large or small. They are perceived relative to the person viewing, other forms in the compositon, and the format of the design.
• Color – we perceive different wavelengths of light as color. A form can be any color, though we are limited to seeing only those colors in the visual spectrum

Any element we place on the page is a concrete object. Remember abstract objects can not physically be created. Abstract objects exist to talk about objects in general in order to better describe them.

Structures

Whenever we place two or more objects in relation to one another we form a structure. We describe these structures by the patterns they form. We must be able to recognize the presence of a pattern in order to describe the structure.

Structures have structure lines connecting objects. These lines are the axis along which the objects are arranged. Structure lines may be visible or invisible and they may be active or inactive.

As with objects, structures can be abstract or concrete.

Abstract Structures

When the structure lines of a structure are invisible and inactive the structure is considered to be abstract. Consider the image below. The circles are clearly arranged in a pattern. There is a structure present, but the lines defining that structure are invisible.

Even when the structure lines are invisible we can often see them in our minds. Through the gestalt principle closure we fill in what’s missing to complete the picture. Again consider the image above. While no lines are visibly connecting the circles, it’s easy to imagine straight lines from the center of one circle to the next. Structure lines are not limited to running through the center of objects though.

In the image above the structure lines are not only invisible, but inactive as well. That is they don’t influence the form of the structure in any way even while they are defining the position of the structure.

The circles above are an example of a formal structure. The objects are evenly distributed. They’re symmetrical and arranged on a grid. The structure lines are either horizontal or perpendicular.

Formal structures are not the only type of abstract structures we can encounter or use. Structures can be categorized as:

• Formal – even distribution of elements and spacing (structure units) between them
• Informal – lacking regularity in the arrangement of objects. Even if a pattern is observed the structure is informal if the objects do not follow straight structural lines
• Gradation – structure units change in form or size, but at an even rate
• Radiation – structure units radiate from a common center
• Spiral – uneven distribution from a common center

When the structure organizing the objects can be judged by the eye alone we say the structure has visual distribution. Each form is allowed to occupy a similar amount of space as the others in the structure.

All compositions or objects are bound within certain limits of the surface on which they exist. These limiting forces follow certain axis or paths which are considered the structural skeleton of the composition or object.

Concrete Structures

Concrete structures have either visible or active structure lines. Where abstract structures indirectly show the structure, concrete structures directly show the structure. Concrete structures can be visible compositions on their own such as the patterns that form into textures.

Visible structures do not have to include objects. As long as the structure lines are visible, the structure itself is visible. Visible structures can include the objects being organized, but they don’t have to. Both of the structures in the image below are visible structures despite the absence of any objects in the second one.

Active structures are those where the structure lines influence the form of the objects within the structure. In an active structure the objects need to be present, but the structure lines can be absent as long as their influence is seen. In the image below both structures are active despite the absence of any visible structure lines in the second one.

Structures that can be seen and/or felt are textures. Textures can be formed from either objects or structure lines or both. Textures can be ornamental, random, or mechanical and we can classify them in the same way we classify abstract structures. They can be formal, informal, gradations, radiations, or spirals.

Activities

The elements we design, the objects we place on the page don’t move. Ignore for a moment the idea that as the browser gets resized elements can move or we can use javascript to move elements around the page or use css and javascript to respond to different mouse and keyboard inputs. For the sake of this discussion our elements don’t move and our compositions are static representations.

To convey the idea that some activity is taking place on the page we generally need to create some kind of sequence of objects or create the illusion of the activity through some static representation of it.

If you can understand how to show activities through sequence and the illusion of activity you can better understand how to make use of css, javascript, and browser resizing to express activity as well.

Instead of trying to give you a couple paragraphs on each kind of activity, I’ll summarize them in the table below. Notice how many of these activities are the design principles you’ve seen myself and others write about. In the future I’ll also look to covering some of the activities below in greater detail.

I’m sure many of the above terms needed no definition and you were likely familiar with all or many of them. We’re building a vocabulary in order to be able to communicate better about design and also through design. Again notice how several of the above find their way into the principles of design.

Relations

Objects placed in a composition relate to each other, they relate to the overall design, the format and, they relate to the viewer. Through relations with each other, elements can attract or repel, they can imply movement and flow. Through relation to the overall design, elements convey a concept and theme. Through relation with the viewer elements communicate different messages.

As with activities there are a number of relations defined by Leborg and again notice how many of them are design principles that I and others have given a more detailed treatment. Since many of these relations are deserving of their own post, I’ll again present a table summarizing each here and look to writing more detailed posts about those I haven’t covered in the past.

As with the table of activities above, I’m sure many of these relation terms were familiar to you and needed little or no definition. As with the activities we’re building a vocabulary to talk about design and to use design to talk to others. Many of the terms in both tables above are deserving of their own posts, some of which I’ve already written about and others I’ll write about in the future.

Summary

As communication designers it’s our job to communicate. Communications requires language and for designers that language is visual (PDF). How can we communicate if we don’t understand the language to at least some degree?

In life we can communicate through the spoken word or through gestures. In design we’re bound by a visual language. Even the words on the page are made up of characters of type which are abstract shapes. Written language itself is a visual representation of spoken language.

This post has been an introduction to the grammar of the visual language we use in each of our designs. The more we understand that grammar, the better we can speak the language, and the more effectively we can communicate with our audience.

This visual language, this visual grammar, is the context within which we study design principles. When we learn to use girds or better understand typography or color we are doing so in order to communicate more effectively with our audience. The principles are the trees. Visual grammar is the forest.

…there’s gotta be enough space in there (between notes) so that the sound will work in an air space. That’s what makes the music work.
—Frank Zappa

Without space there is no music. Try to imagine every note playing at the same time or being played so quickly that there’s no distinction between one note and the next. You wouldn’t have music. You’d have a solid wall of noise. As Zappa said, “There’s gotta be enough space in there.” You have to leave room for the sounds to be distinguished from each other, to be heard for what they are.

A few notes played together form a chord. All notes played together form noise. To create rhythm and melody requires a measured and planned space. Music isn’t sound. It’s a balance between sound and space. Without both there is no music.

The same is true visually. There’s gotta be enough space. Without whitespace none of your elements gets seen. They become noise.

What Does Space Do in Design?

Space can be used to both separate and connect elements in a design. Wider spaces separate elements from each other and narrower spaces connect elements to reveal relationships between them. Overlapping elements maximizes their relationship.

By controlling and shaping space in our designs, we create rhythm, direction, and motion. We create design flow through our use of space.

Whitespace does three main things in a design.

1. Creates groupings of elements
2. Creates emphasis and hierarchy
3. Improves legibility

Consistent use of white space across pages connects those pages. Space is layout. When the space in boilerplate elements remains the same your visitors don’t get disoriented. Your navigation stays in the same location. Your logo is in the same spot on every page.

You can also show difference. Sections within your site can maintain consistent space within the section and differ from other sections. As long as the boilerplate remains consistent it’s apparent the site is the same.

Consistent use of negative space is a hallmark of professional design. Look at any design that strikes you as amateur. I can almost guarantee little thought will have been given to the space within the design.

If you arrange white space well your elements fall into place and look great, but if you only arrange the positive elements, your white space will most always be ineffective.

Whitespace gives a place for the eye to rest, which it needs in order to absorb the message you’re trying to communicate. It’s a visual cue that there’s a break in the content or that the content is finished. Whitespace makes your page and site easier to navigate.

Space can be used to convey a variety of meanings, some of which include

• quality – wealth, luxury
• solitude – abandonment, loneliness
• cleanliness – bleached, washed
• purity – unsullied, unadulterated
• spirituality – sacredness, connection to something greater
• openness – distance, infinity
• calmness – placidity, inaction

Negative space can be active or passive. When the space in a design is symmetrically balanced the space becomes passive. It’s static and formal and for the most part boring. When negative space is asymmetrically balanced it becomes active. It’s dynamic and modern and interesting.

How to Use Space in Design

Space in web design can be divided into to types.

1. Micro whitespace – is the space within elements, such as the margins surrounding text and the leading between lines of text or the spaces between the individual characters.
2. Macro whitespace – is the space between major elements in your design. These spaces tend to be larger and are usually immediately apparent

Micro Whitespace

legibility and readability in typographic design as well as offering thoughts on building a typographic stylesheet and I’ll direct you there to more details.

Suffice it to say your use of space in typography plays a huge role in how legible and readable your text is. One of your main concerns will be setting the leading or linespacing which will help determine typographic color and is used to set a vertical rhythm in your text.

Macro Whitespace

Earlier I mentioned that space is used to separate and connect elements. Boxes (borders and backgrounds) are often used to enclose and connect some elements while separating them from other elements or groups of elements. Boxes can be overkill. Yes, they work well at separating things, but they do it too well and can sometimes harm the overall unity of the page.

Space can be used instead of boxes to separate and connect. Again wider spaces separate and in comparison narrower spaces will connect. Space can be a better way to separate elements while still maintaining unity across your design.

Negative space can be used to give emphasis to elements. Those placed within or near large blocks of space gain importance by their separation from other elements. They naturally stand out in a field of empty space as well. Through emphasis we begin to create a visual hierarchy in our design.

Whitespace plays a role in many other design principles. It’s used to achieve balance, both symmetrical and asymmetrical. Space implies rhythm and movement. It’s the ground in the gestalt figure/ground relationship.

Space creates columns, rows, and grids.

Grids and Space

Grids are a way to organize space. By learning to use grid systems a designer is forced to think about whitespace and learn to shape it in designs. Grids become visible in part by the way elements align and also by the fields and paths of empty space that aren’t filled.

Grids encourage you to create more dynamic and asymmetrical compositions in which space is not only present, but flows through and around elements in your design.

Fixed and Fluid Layouts

When working in print the overall size of your page, the total space you get to manipulate is fixed. Not so on the web.

One reason you see many web designers opt for a fixed layout is because it fixes the working space of your design. It allows for less surprises in the whitespace. Currently it’s common to set the page width at 960px. This gives web designers more control over the horizontal space, since one aspect of the total space is fixed.

Often fixed layouts are centered within the browser window. This creates a passive (symmetrical) balance of space outside the page. Inside the 960px the designer is free to use either passive or active space.

We lose control of the overall space with fluid layouts. The more fluid your design, the less control you have over the total whitespace. This leads to new problems to solve in regards to space. Will every column in the design be fluid? If so how will the micro space in the column be managed as the column expands and contracts? Will some columns be fixed and if so how will the macro space between major elements be managed?

I can’t speak for you, but when I’ve come across completely fluid designs their major failing seems to be in how the whitespace changes at different browser sizes. What looks good and is easy to read at one width looks horrible and becomes difficult to read at another. For the most part I don’t think web designers have thought much about or at least solved this problem of the total canvas space changing. Hence the more common use of fixed layouts.

Can You Have Too Much Whitespace?

You generally won’t hear many complaints about a design having too much whitespace. Many new to design will attempt to fill every last bit of space with color or graphics or content. More experienced designers will encourage you to use more space and not try to fill up every little bit. Again few people viewing a design will complain that it has too much whitespace.

Still there are times when it makes sense to fill more of the space. You have to consider both the content of the page and medium delivering the page.

Ecommerce sites are a good example of the former. There’s no reason why most pages in an ecommerce site can’t use ample space. However think about category and search pages, which are mostly a grid or list of products. Too much space can make it harder to compare one product with the next. That’s not to say you should fill all the space on these pages. Rather you need to think differently about it.

Micro whitespace takes on more importance to ensure that products and any information about them can be easily understood. You also need to make sure one product and it’s information can easily be differentiated from the next one. Overall though you would probably use a tighter grid with less space between elements (products)

A case where the medium takes on importance is design for mobile devices. Given the smaller screen sizes too much space could lead to a mostly or even completely empty screen requiring visitors to scroll to see anything. Again make use of micro whitespace for smaller screens, but be aware that large blocks of space may not work as well as you think. You have to carefully consider the smaller amounts of space you have to work with.

Information graphics are another case where less space in the content makes sense. More densely packed information allows readers to compare the data more quickly. You’ll want enough space so each bit of information can be clearly seen and discerned, but not so much that it makes it hard to compare and contrast them. Here you might opt for other ways to separate elements such as different colored backgrounds on rows or columns in a table.

Whitespace in Logos

One of the more fun ways to study whitespace is to see how it’s been applied in logos. I don’t have any specific thoughts to share in regards to whitespace in logos other than to say the principles above still apply. Mostly I thought I’d point you to a few posts that show a variety of logos where whitespace is not only used, but used in a way where it makes the logo what it is.

Enjoy

• Negative space in logo design
• A Showcase of Clever Negative Space in Logo Design
• 35 Logos brilliantly using Negative Space: Negative is Positive

There are plenty more similar posts if you search and want to see more use of negative space in logos.

Summary

In his famous book on writing, The Elements of Style, William Strunk offers the phrase “omit needless words.” We can modify that for visual design as “omit needless elements.”

When designing a page think about what truly needs to be there. Omit everything else. Thinking about space will help you see what is and isn’t essential on the page. More than likely you can include less elements than you think in your design.

An interesting point system (<— scroll down to the bottom of the page) which I’ve seen a few times, is where a total amount of points is allocated to be distributed across all the elements on the page. You assign more points to the most important elements and less to the least important elements, thereby creating a hierarchy for your design.

In establishing this hierarchy you’ll find that there are no points left for some elements, which should tell you they probably don’t need to be included in the page. You’ll need less elements, more whitespace, to give emphasis to your most important design elements.

Space is perhaps the most important tool for any visual designer. It plays a role in grids and typography and is a component of so many different design principles. When we learn to see space and learn to control it within our designs we elevate ourselves to a new level of design skill.

As you find designs you like take the time to study them, particularly in how they use whitespace. Learn how effective use of space can make or break a design and how controlling space in your designs can make them more interesting and communicate more effectively.

I thought I’d take a few minutes to explain why I started writing these posts and why I think design principles are important even vital for web designers to learn and understand how to use.

A Learning Designer

I consider myself a designer, not necessarily a great one at the moment, but a learning one. I didn’t go to school to learn design or any visual art for that matter. Like many I entered the field of web design, because I taught myself how to build a web page with html and then later with css and javascript and php/mysql.

My entry point into web design was that point between graphic designer and application developer. I guess the term now is front end developer.

There are so many disciplines that cross into web design and early on I tired to learn as much as I could about any and all of them. Marketing, seo, copywriting, programming, etc. In time it was the visual or communication design aspect that appealed to me the most. I love design and want to do everything I can to become a better designer.

The Current State of Web Design Blogs

One of my first steps in learning to be a better designer was to tap into the current community of design blogs. Unfortunately I found most design posts on the useless side. The talk focuses on trends or the latest set of icons to download. Posts are filled with lists of information no one really needs to know. How does seeing 20 blue or red web designs without any explanation of why the sites were included in the list make you a better designer.

Please understand the paragraph above isn’t meant to criticize most design blogs. In truth I probably subscribed to the majority of the blogs in my feed reader because they offered a list of things I was interested in when I came across it or I appreciated the links to free icons or backgrounds as a solution to something I was working on. If I was working on a design that was going to use blue as the dominant color then a list of blue web designs could be helpful.

I’ve even written list posts of my own.

I think many people entered web design much like I did with more knowledge and experience on the technical side of building web pages and less on the principles of design. When I look through galleries of what’s considered great design I’m often left less than excited. I see one site successful in doing something and then lots of other sites copying that first one.

Certainly not everyone. You can find quite a number of people who have been trained in the art of taught it to themselves. There are also some great multi-author sites out there teaching design and some experimenting with design on their own sites.

A good design education is out there if you look for it, however for the most part there seems to be a lack of content helping others learn those same principles hence the tendency to copy. Sadly some of the better among us write the least often. Perhaps because they’re working so much designing.

Again this isn’t meant to condemn the current state of web design blogs. I think list posts and free downloads have a purpose and can be useful to many people. They also exist in such great number because we click on those posts and bookmark them and retweet them. It’s just that I don’t think those posts helped me improve my skills to where I wanted to take them. Something was missing.

The blogs were handing out fish instead of teaching us how to fish. When you’re starving you just want a fish. If you don’t want to be hungry again tomorrow you need to learn how to fish for yourself. To learn how to fish you need to learn design principles.

Learning the Language

I’ve often used the phrase visual design when speaking about what we do. I recently came across what I think is a better term; communication design. Our job as web designers is to communicate. You can’t communicate without understanding the language with which you are communicating. For us that language is is visual and can be found in the principles of design.

Ultimately the words on your page will carry the day, but it’s up to us to make sure those words, at least the most important ones, are read and to make sure we’ve put people in the right frame of mind to absorb what those words are trying to convey.

The language we use to achieve this is a visual one. On some level we instinctively understand this visual language and its grammar, but for the most part we aren’t well versed in understanding the language and being able to use it effectively. We miss the nuances of the language. It’s one thing to point to a ball and know it’s called a ball. It’s another to use the word in a sentence and to weave sentences into paragraphs all focused on communicating a single idea.

Teaching as a Means to Learning

Failing to learn the language through design blogs and other sites about design I came across, I turned toward books on design. Much of what you see written here is me reading or rereading one or more books on my bookshelf dealing with a design principle and then researching it as much as I can. In trying to teach it to you I find I learn it better myself. In fact until you can teach it to someone else, I’m not sure if you’ve truly learned it.

When I’m working on a problem in typography, I’ll spend more time reading and experimenting with typography and then writing about typography. When I’m struggling with grids you’ll see me write more about grids. Maybe not every post here gets written that way, but in general if you want to know what I’m learning, follow what I’m writing about.

Web Design is More Than the Technical

I think design is important. I think it matters. I think good design leads to a better experience for users, which leads to a better bottom line for businesses. I think design is something worthwhile to learn and something imperative to do better if you want to be a web designer. Web design is not html and css alone. They’re important considerations as is every other technical aspect of building a website, but they aren’t web design.

In the print world the technical side includes the quality and texture of the paper, the limitations of the ink used in printing, calibration of colors on your monitor so they match the color that finds its way onto the page. Understanding these technical issues alone won’t make you a graphic designer. It’s understanding this technical side in conjunction with being able to communicate with the language of design that makes you a graphic designer.

It’s the same thing on the web. A different medium means a different set of technical problems to solve. The language we use to communicate is still the same and the syntax and grammar of that language is found in the principles of design.

The design principles posts you find here are a way to fill a void many other blogs seem averse to filling. They’re a way to teach myself to be a better designer, hopefully to the point where I can inspire you to learn more and maybe even teach you to be a better designer a bit. I also hope you’ll respond and teach me a thing or two about becoming a better designer and together we can form a community the helps to improve web design for every one.

If you’re willing to invest a little time you can find great design content and communities on the web. I think more sites and communities are needed and hopefully this place can be one of those communities.

Every journey begins with a small step on a road mostly unseen

Do you sometimes struggle with how many links to include in the main navigation of a fairly large site? Maybe the issue is where the secondary navigation will be located in your design. How about sidebars? Are you able to find the balance between all the things you want to include without overwhelming the space and your visitors?

Most people use at most 20% of any given complex system. The problem is everyone uses a different 20%. What’s a designer to do? How do you include all the different features that your audience in total wants, while holding back on the 80% of features no individual will use or wants to see?

The answer lies in progressive disclosure.

What is Progressive Disclosure?

Progressive disclosure is the concept of managing information by displaying only what’s necessary or requested at any given time. The idea is to help prevent information overload and keep designs cleaner by reducing clutter and noise. The goal is to keep your audience from becoming frustrated or disoriented by giving them what they need and want and nothing more.

From his 2006 Alertbox article on progressive disclosure Jacob Nielson points out the dilemma faced by designers.

1. Users want power, features, and enough options to handle all of their special needs.
2. Users want simplicity; they don’t have time learn a profusion of features in enough depth to select the few that are optimal for their needs.

How does one provide all the features users want while still keeping interfaces clean and simple? In the same post Jacob also offers the solution.

1. Initially, show users only a few of the most important options.
2. Offer a larger set of specialized options upon request. Disclose these secondary features only if a user asks for them, meaning that most users can proceed with their tasks without worrying about this added complexity.

This is progressive disclosure. You want to separate information into multiple layers and by default only present those layers that are necessary or relevant to the task at hand. Along with those necessary layers of information you want to provide simple mechanisms to let people have more information on request.

There are two related ideas in the previous paragraph. One is to provide necessary and relevant default information and the other is to provide more on request.

The first idea tells us it’s ok to present different information on different pages of a web site and the second tells us we should provide a way for our visitors to get more information if they want. This extra information might also change from page to page, though all the extra information should be readily available at any and all times.

Drop down menus, while sometimes suffering from other usability issues, make for a good and simple example of progressive disclosure. Your main navigation presents an overview of the general topics that can be found on your site, while secondary links are not displayed until a user mouses over one of the main links.

Imagine if every page on your site had an always visible link in your main navigation. Not a pretty picture once your site has grown past a dozen or so pages, is it?

If someone clicks into a specific section of your site you might present a secondary menu for those pages available within the section, but not the secondary pages available in another section since they aren’t relevant at that moment. Once someone clicks into a different section the links in your secondary menu will also change since it is now a new set of links that are relevant.

Progressive disclosure enables you to hide advanced information from new users while still making that information available to the more advanced users who want it. Information that isn’t currently wanted is essentially noise. Reducing noise and increasing signal is something we should strive for in design and progressive disclosure gives us a mechanism for doing so.

Presenting limited sets of information increases learning efficiency. When information is gradually presented as needed or requested it’s processed better and is perceived as more relevant. Errors and the time and frustration of recovering from those errors is consequently reduced. Less frustration means a better user experience.

How to Design Progressive Disclosure in Your Website

We’ve already looked at one way to include progressive disclosure in a website, that being drop down menus. Drop downs do have other usability issues, many of which are solved by mega drop down menus. Still it’s easy to see how they present only needed information with more being available on request.

A few other techniques I’m sure you’ve encountered:

• Read more links
• Advanced search options
• Modal popup windows
• Related posts
• Tool tips
• +/- icons to open and close a hierarchy
• Context menus on right click
• Links in general
• Product summaries that link to detailed product pages
• Dynamic forms (PDF) that reveal questions based on the answers to previous questions
• Tabbed info boxes in sidebars

Each of the above hides some information until that information is requested. You do need to be careful offering too many mechanisms for additional information. Take the related posts idea. Too many links can overwhelm quickly. If you try to present mechanisms to more infomation everywhere you still end up with a lot of noise

Joel Reyes recently wrote an article for Spyre Studios combining a variety of techniques under the umbrella term inline expansion. Many fall under the single accordion technique, but there are also mega drop downs and sliders and drawers and other similar techniques for hiding information until requested.

You may want to click through to Joel’s article as he provides links to some jQuery resources as well as providing examples of sites using some of these techniques.

We can also look at some higher level design principles. Developing an information or visual hierarchy on your page helps with progressive disclosure. Hierarchies allow people to scan one level of information on a page while ignoring the rest. Assuming they want the rest of that information it’s easily there for their consumption.

Through contrast, repetition, alignment, and proximity you can create multiple layers of information within a single page. These layers while technically all visible at once still make it easy for the eye to ignore what’s not relevant until such a time when it becomes relevant. We make the most important elements highly visible and minimize the visual impact of the full text so it can be safely ignored on first glance.

Think of your page as an onion with different layers that are revealed little by little as one absorbs one level and then moves on to the next.

Ideally someone should be able to visit your page and scan the headings to gain one level of information. They should then be able to scan a little more deeply perhaps taking in images and lists to gain another level of information. On each successive scan or deeper look at your content new layers of information are revealed.

The above idea is a visual representation of the inverted pyramid journalists use when writing an article. The most substantial, interesting, and important information is presented as close to the top (usually in the first paragraph alone) of the article. As you read further down more details, more information is disclosed. Readers can leave the story at any point with a clear understanding of what’s going on. Those who read more will get more out of the article, but even those leaving after a paragraph or two get the main points.

Chunking

Chunking is a technique of combining many units of information into a limited number of units or chunks, so that the information is easier to process and remember. The design principle of proximity is a visual way to chunk information on your page.

As long as each chunk is clearly and meaningfully identified your visitors can scan different sections of your design easily and based on their needs ignore that section or dig deeper into it.

How to Effectively Disclose Information

The concept is easy to understand, but there are some considerations in regards to effectively disclosing information. Think of our single article.

There’s the visual hierarchy we need to create to make headings and important text stand out. There are the words we use in those headings and selective text that captures the main points of what we want to communicate. There’s the way we organize the information to determine what should and shouldn’t be at each level of the hierarchy. There’s writing the article in an inverted pyramid style.

The less of these things we get right the less effective our progressive disclosure becomes. I’ll refer back to Jacob Nielsen for some things we need to consider.

1. You must get the right split between initial and secondary features. This will be easier after your site is live and you’ve collected some data about what actually gets clicked and used. During design you can do task analysis to better understand the steps someone needs to take in order to complete different tasks
2. It must be obvious how users progress from the primary to the secondary disclosure levels. You want to make the mechanics of finding more information as simple and obvious as possible and you also want to label buttons and links in a way that sets clear expectations for what will be found in the next level of information. Ideally you’ll create a strong information scent creating a desire for the additional levels of information

Nielsen also mentions a related concept, staged disclosure, and suggests using it where appropriate. A common example of staged disclosure are the wizards used to lead you through a task. Since each step in the task depends on the one before it you lead people through the wizard presenting only the step required to complete the current task.

Staged disclosure works best when the information is naturally accessed in a linear sequence. Paginating an article or presenting a long article as a series of shorter articles is another example.

You can mix in progressive disclosure to staged disclosure as well. Take the wizard example. While each step follows in sequence, there may be some advanced options you can set in each step. These advanced steps can be presented with a button labeled advanced or similar. As long as it’s clear that these advanced steps aren’t required and can be set later you provide an easy sequence of steps for novice users while also allowing more advanced users to find additional information they may want.

Summary

Progressive disclosure is a pretty easy concept to wrap your mind around. You may not have known the term, but I’m sure you were familiar with the concept prior to reading here. I’m also sure you didn’t hesitate to accept the concept as something desirable for your designs.

The number of ways to selectively hide and display information may not have been so obvious and how to effectively disclose information may not be as easy as it first seems. There are a lot of considerations that go into deciding what you should display where and it will likely take some iteration to truly get right for the majority of your audience.

Pay attention to what happens on your site to get a better feel for what your visitors click on, where they spend the most time, what sequence of pages or actions do they take on your site?

Remember the goal is to reduce information overload for new and novice users. Selectively display only what’s necessary or relevant at a given time, while providing simple mechanisms for those visitors who want more.

In either case there was exactly the same amount of water in the canteen, however my reaction and determination of how much water is in the canteen frames the situation. It gives a context to a canteen half full and half empty. That frame, that context, alters your decisions and judgements about the canteen, the water inside, as well as your behavior when it comes to taking a drink.

The Framing Effect

The framing effect is the idea that manipulating the way information is presented can influence and alter decision making and judgement about that information. Through the use of images, words, and by presenting a general context around the information presented we can influence how people think about that information.

Framing is used exceedingly often in politics. One side sets the context for passing a bill as the end of humanity while the other side frames the situation of not passing the bill as the end of humanity. If you really want to understand how framing works study a political election in great detail as objectively as possible. Learn the facts and then watch how both sides present those facts to you in order to influence you.

The context in which information is delivered shapes assumptions and perceptions about that information. Information taken out of context is often meaningless. Information within a context, within a frame is altered by that context and frame.

People reach conclusions based on the framework within which a situation is presented.

Positive frames tend to elicit positive feelings and result in risk taking and proactive behavior. Negative frames tend to elicit negative feelings and result in risk aversion and reactive behavior. Stress and the pressure of time amplify both.

A common sales technique is to present your product in a positive frame, presenting your competitors product in a negative frame, and presenting the customer with a time sensitive offer requiring a quick decision.

When people are exposed to multiple and conflicting frames it causes cognitive dissonance and the framing effect is reduced and neutralized leaving people to rely more on their own internal frames that have been created over time.

A frame is a reference point for all future decisions and judgements. Frames set expectations, which leads us to…

The Expectation Effect

If you think you can do a thing or think you can’t do a thing, you’re right.
—Henry Ford

The expectation effect is the idea that perception and behavior change as a result of personal expectations or the expectations of others. Once a person believes something, the belief alone creates the possibility that it will happen.

Some examples of the expectation effect that may be familiar to you:

• Halo effect- an employee’s performance is rated better based on overall positive impressions and not specifically their performance
• Hawthorne effect – employees become more productive based on the belief that changes to their work environment will increase productivity
• Pygmalion effect – students perform better/worse when teachers expect them to
• Placebo effect – patients experience treatment benefits based on the belief that the treatment will work
• Rosenthal effect – teachers treat students differently based on expectations of how they will perform
• Demand characteristics – people respond in interviews or experiments in ways they believe are expected by the interviewer or experimenter

In order for the expectation effect to come into play the expectations set must be credible. It’s important that we believe something may happen in order to to create the expectations that influence us. Think again about the framing effect for a moment. A large part of framing is setting expectations by placing information inside a certain context.

A credible presentation will lead to the expectation effect in about 30% of any audience. Being somewhat vague helps as it leads people to interpret things based on their internal expectations. Think about astrology or psychic predictions. Both are presented vaguely. You interpret them with your own expectations altering your behavior to the degree where the predictions come true.

The expectation effect is temporary in nature. Any changed behavior reverts back to a baseline after a time, which leads us to…

The Exposure Effect

The exposure effect, also called the mere exposure effect, is the idea that repeated exposures to things that we have neutral or positive feelings about increases the likability of those things. We favor the familiar and mistrust the new and different. Repetition breeds familiarity. We develop preferences for things simply because they are familiar

The exposure effect is one of the basic concepts behind advertising. You see an ad in a magazine or a commercial on TV over and over again and after a time become more likely to buy the product being advertised.

Repeated exposure to an ad works better than a single exposure. For most businesses you’re better off buying a small ad in the same location in the local paper every week for 6 months than you would be taking out a full page ad once.

It’s important that the perception to the stimuli being repeated is neutral or positive. Repeated exposure to negative stimuli will more likely amplify the negative perception.

The strongest exposure effect is seen with photographs, meaningful words, names, and simple shapes. The weakest effects are seen with icons, people, and auditory stimuli. Complex and interesting tends to lead to a stronger effect than simple and boring.

As the number of exposures and the duration of each exposure increases, the effect begins to weaken. There’s a point of diminishing returns. Familiarity can also breed contempt. Brief and subtle (subliminal) exposures work best, especially when each exposure is separated by some time. The effect will be strongest for the first 10 impressions.

Once again let’s think back to the framing effect. Framing is not a one time thing. You often build a frame over time with repeated exposures to the context you’re trying to set. A series of small and consistent messages can build a frame that will be seen in either a positive or negative light.

Think branding. Branding makes great use of the exposure effect. The more exposures to your brand (assuming your brand is initially seen in a neutral or positive light) eventually leads to a more positive perception of your brand. You create a positive message that builds a frame and your consistency with that message increases the exposure leading to more positive associations with your brand.

The Effect of Design

Hopefully after reading through the above you can see how each of these three effects can be put to use in your designs to influence your audience.

Framing Effect

Visual design is framing. Your design sets a mood, creates the emotion, and puts your audience in the right frame of mind to absorb the message. Your visuals set the context for the message. The initial impressions your design conveys frames everything that comes after.

The frame you create needs to be credible. It needs to be based on reality. You can’t make up a story that isn’t true and expect it to stick. The more in harmony your visuals are with the company message the better the frame and the stronger the framing effect will be.

Within a design use positive framing to move people to action and negative frames to move them toward inaction. Frame your own message in a positive light and if you’re ok with it frame your competition in a negative light. If your competition has built a positive frame around their product offer another frame that conflicts with theirs.

On a different note think about how your design can create a positive experience for your visitors and what kind of a frame that positive experience builds. Is your site usable? Is it enjoyable? Does it make people want to spend time on the site and come back for more? Yes or no, what do you think people will tell others about your site and what kind of frame will that build for those people?

Expectation Effect

Your frame will help create expectations and the expectations you set will help persuade your audience (PDF). Remember not to make promises you can’t keep. The expectation effect lasts only so long. Broken promises create a new set of expectations that you probably prefer not be set.

Set expectations for your audience in a credible way rather than letting them form their own unbiased conclusions. Don’t lie, but do nudge them toward the conclusions you want them to draw.

You hear all the time to talk benefits over features. Features don’t set expectations. Benefits do. Try to get people to imagine themselves using and enjoying your products or services. It will set a positive expectation in their mind.

In your own work remember not to let expectations inhibit your creativity. Don’t try to live up to the expectations of others or set expectations for yourself based on work you admire.

When it comes to usability think conventions. What are conventions? They’re expectations about how something will behave. In regards to testing be careful about influencing test subjects by setting expectations for them. As designers we’re naturally biased in favor of our designs. We don’t want to pass that bias on to those testing our designs and have them react in ways they think we expect them to react.

Exposure Effect

The expectation effect has limited duration. Frames have a more lasting effect when built over time. Increasing exposures helps both.

Be consistent and subtle in your message as both lead to a stronger effect. Use photographs (product images) and more meaningful words. Exposure to names works well. Think brands and product names. Make them meaningful. Every page of your site should make obvious the brand name. Every product page should make obvious the name of the product.

Repeat calls to action across pages instead of leaving them in a single place to increase exposure. Expose people to your message on and off your site prior to forcing the call to action on them.

Be subtle. Too much in your face message weakens the effect. You don’t need to always push the buy message at people. Show them images of people enjoying your product without asking them to buy. Weave happy testimonials through your site. Offer subtle mentions from time to time in blog posts that your visitors will be happy with your products.

When it comes to advertising remember that there’s a diminishing return to exposure. Think ad blindness. Mix up where you advertise and remember the exposure effect is strongest for the first 10 or so impressions and that placing some time between exposures also helps strengthen the effect.

With new and different designs expect some resistance if your design deviates enough from the norm. Be aware that usability conventions work in part because people have been exposed to them time and again. We mistrust the new until we’ve seen it enough for it to become familiar. Consider most any famous artist or revolutionary thinkers throughout history. Many were heavily criticized during their lifetimes. Exposure to their “radical” ideas led to familiarity and eventually a more positive critique.

Summary

Let me share some advice I recently read on launching a new product. My apologies to the person who offered the advice since I can’t remember where it came from. I think it was Brian Clarke, but I’m not entirely sure.

Prior to launching a product start mentioning the problem it aims to solve on your blog. Talk first about the problem that you and others likely have. Then begin talking about existing solutions to the problem in part to help your audience and in part to make clear how none of the existing solutions are ideal. Finally offer your product, your new solution to the problem that’s better than any of the current solutions to the problem.

Now think about the above in terms of the three effects we’ve been discussing here. Your repeated discussion about the problem and solutions increases exposure. Your mention of the inadequacies of existing solutions sets negative expectations for them and indirectly sets positive expectations for any solution that overcomes these inadequacies. By the time you launch, you’ve built a positive frame as the context for your product. The combination of all three should have your audience predisposed to wanting to buy your product at launch.

The framing effect, the expectation effect, and the exposure effect are three very powerful ways to influence people in your favor, especially when all three work in combination.