Semiotics

Designers cannot ignore how meaning is created when people use the products, services, and systems they produce. When people interact with a design—when they use it—the constructed meanings are fueled by the outcome (the design) and the person’s makeup (their past experiences). Let’s explore how that works by exploring different kinds of rings. I chose rings because they are typically very personal for the wearer—chosen and worn to signal something to others. They symbolize something.

Look at each of the images of different rings below. What meaning do you create when you see them? What does each of these rings signal?

Diamond Ring

This image probably means “wedding engagement” to you. But if your cultural background does not value diamonds as an essential part of an engagement ring—or even value engagement (pre-marriage) as part of the wedding process—the ring’s meaning could be entirely different.

Platinum Bands

Again, I am guessing that “wedding” or “marriage” were meanings you created when you saw these rings. These plain bands communicate a different kind of “wedding” than the diamond ring in the first image. These are less flashy. Still, because they are made of platinum—a precious and durable metal—they communicate something different than if they were made of rubber, gold, or yarn.

Decorative Ring

What is the meaning of this ring? It does not have a direct connection to a ritual like marriage. The horses on the ring seem to mean something. Horse lover? Carousels? Consider the ring’s material makeup. It looks like this is composed of copper, silver, and gold. The ring’s thickness likely creates some meaning for you—it’s thicker than most rings.

Antique Skull and Hourglass Rings

These are some very stylized rings. A skull with a gash in the forehead area? An hourglass and a scythe? Not images you see every day. A person who wears these intends to communicate something quite specific. What do they mean to you? Can you denote the meaning of these iconic rings? Are there meanings they create that are not so literal?

Jeweled Ring

This ring is studded with as many jewels as can fit on it—including a substantial glowing diamond in its center. What does the ring signify to you? What do you think someone who wears this ring means to communicate to the world?

Silver Ornament Ring

Consider the ring’s material and the fan ornament—what do these mean? Note: this is the only image of the bunch that shows the wearer’s hand. That may shift the meaning of this ring for you.

What and How You Design Will Affect Meaning

Each of the rings above communicates something different, depending on their style and the viewer. As a designer, you must be sensitive to the meanings that the products, services, and systems you make will convey. You cannot account for every meaning—sometimes, people will decipher your design differently than you expected—but understanding semiotics will help you design outcomes that communicate your intended message.

Semiotic Terminology

The first step toward understanding and applying meaning-making is to familiarize yourself with semiotic terminology.

Tom Streeter, Faculty of Information & Media Studies at Western University in London, Ontario, Canada, created a handy guide to semiotic terminology hosted on the University of Vermont website. The following is an adaptation of his work with some of my emphases and additions.

Semiotics, or semiology, is the study of signs, symbols, and signification. It is the study of how meaning is created, not what it is. Below are some brief definitions of semiotic terms, beginning with the smallest unit of meaning and proceeding toward the larger and more complex:

Signifier

Any material thing that signifies.

• words on a page (the words “I hate you”)
• a facial expression (a smile)
• an image (a black raised fist)
• a shape in context (a rounded corner rectangle in a smartphone app)
• smell (popcorn)
• tactile texture (a plush teddybear)

Designers create signifiers when they produce any kind of interface—digital, physical, sounds, and gestures are all included.

Signified

The concept that a signifier refers to.

• the words “I hate you” = someone does not like you!
• a smile = pleasant greeting
• a black raised fist = fighting oppression
• a rounded corner rectangle in a smartphone app = button (tap me!)
• popcorn smell = playful fun!
• plush teddybear = childhood comfort and safety

Together, the signifier and signified make up the…

Sign

The smallest unit of meaning. Anything that can be used to communicate (or to tell a lie).

Think of a sign as something that “stands for something.”

Symbolic (arbitrary) Signs

Signs where the relation between signifier and signified (the design and the concept it communicates) is purely conventional and culturally specific.

• Most words are symbolic signs. To me, the word “ratchet” means a tool I use to fix things; to you, it may be slang for “exciting” or “promiscuous.”

Designers create symbos all the time—especially for digital and physical user interfaces.

Iconic Signs

Signs where the signifier resembles the signified.

• A picture is an iconic sign. The pipe in Rene Magritte’s The Treachery of Images (1929) is not a pipe; it’s a painting of a pipe.

Designers often use images (iconic signs) to represent a general group of people. For example, an image of holding hands signifies togetherness and care.

Indexical Signs

Signs where the signifier is caused by the signified.

• Smoke signifies fire

Think like Sherlock Holmes when considering indexical signs. People will interpret a sign and will make conclusions about what it signifies even if they cannot see it. This can be useful, especially in film or in theme park attractions. Broken roller coaster tracks at Animal Kingdom’s Expedition Everest signify that the Yeti has been nearby.

Denotation

The most basic or literal meaning of a sign.

• The word “rose” signifies a particular kind of flower
• An image of a Bugatti signifies a particular kind of car
• The popcorn smell signifies popped corn snack.

Select images, words, and other signs carefully. The more detailed they are, the more specific a meaning people will make of it.

Connotation

The secondary, cultural meanings of signs; or “signifying signs,” signs that are used as signifiers for a secondary meaning

• The word “rose” signifies passion.
• A Bugatti signifies luxury and extravagance.
• The popcorn smell signifies entertainment and fun.

Metonymy

A kind of connotation where in one sign is substituted for another with which it is closely associated.

• Washington for the United States government.
• The sword for military power.

Synecdoche

A kind of connotation in which a part is used for the whole.

• A hand for a sailor.
• A plate on a table for a meal.

What Does This Mean for Design?

Carefully consider the signifiers you create. Their style communicates messaging that others will interpret. To be an effective designer, you must be a wealth of signifier knowledge, or else you’ll risk creating products, services, and systems that incorrectly convey meanings. I can’t tell you how many times I have had to say to students that the rounded corner box they placed in an app design is confusing because I wanted to tap it like a button, but they just wanted to make a cool-looking design element. You gotta know and follow conventions. Semiotics can guide you through understanding the effects of your design decisions.

Read Tom Streeter’s complete Semiotic Terminology page for more.

Common Design Signifiers

Below, I explore some of the most common signifiers that designers create.

Word

When designing with words, the exact word(s) you use are of paramount importance. Every word has a shade of meaning. The wrong shade muddles communication. Think like a poet when you select words. Like Mark Twain said, “Use the right word, not its second cousin.” When designing, ask yourself, “does this word signify the exact meaning I am trying to convey?”

The words we use in the design are often set in typefaces that combine word and image signifiers. This poster by Seb Lester uses strong language set in script type to communicate a very specific message that’s polite and brash all at the same time.

Image

Images are loaded with meaning, so they must be carefully selected when designing. A picture of a dead tree with craggy branches and knots whose silhouette is cast on a background of an ominous sky communicates “spooky” or maybe “Halloween” to others. The specifics of the image will determine its communication (the thing/idea/message it signifies). Choose your pictures wisely and carefully consider the emotion and message they convey.

Sound

Sounds are loaded with meaning. Interaction designers must consider sounds such as the tone of a virtual assistant’s voice or a warning sound as carefully as they consider typeface sizes on screens. A smooth and serene sound communicates calm, while a harsh, buzzer sound likely signifies danger or caution.

Object

These physical outcomes communicate through their size, shape, and material makeup. For example, a plush pillow made of velvet with puffy tassels could signify comfort. When designing, consider the goal of your message. What object format would work best to communicate the message or at least support the message’s communication in a relevant and clear way? A new, plush teddy bear signifies something different from a ragged, worn one.

Gesture

Have you ever seen the television show Friends? There’s an ongoing joke in the show that there’s a gesture two characters invented to replace giving someone the middle finger. The gesture is nonsense… it doesn’t exist as a cultural way of giving someone the finger, but how the motion is delivered communicates a lot. You don’t need to know what the gesture means as long as it’s delivered forcefully. Watch the video below, and you’ll see what I mean.

Gestures are great like that. A motion’s delivery communicates… even if no one knows what you mean. When designing gestures, consider the movements a person will make with their body and how these movements signify meaning.

More Semiotics

Resources to assist your semiotics journey.