Wednesday, 20 April 2016

Syntagms and Paradigms — Telling A Story With Signs - Vanseo Design

Syntagms and Paradigms — Telling A Story With Signs - Vanseo Design


Syntagms and Paradigms — Telling A Story With Signs

Posted: 19 Apr 2016 05:30 AM PDT

A single sign can communicate meaning on its own. Think of a stop sign. No matter what context you're in when you see something that looks like a stop sign, you reflexively stop. However, signs can communicate more and more effectively when you consider the relationship between multiple signs.

Narrative Scroll - Vessantara Jataka

For the last few weeks, I've been taking a look at the world of semiotics. I talked about signs and then the three types of signifiers before looking at their literal and implied meanings.

Today I want to talk about the relationships of signs, specifically two types of relationships a sign might have, syntagmatic and paradigmatic, and how these relationships can help you tell stories using signs.

What are Syntagms and Paradigms?

You've probably heard the word paradigm before and have at least a sense of its meaning. If you're like me, the word syntagm is new. Syntagms and paradigms explain with how signs relate to each other.

  • Syntagmatic relationships are about positioning.
  • Paradigmatic relationships are about substitution.

A syntagmatic relationship involves a sequence of signs that together create meaning. A paradigmatic relationship involves signs that can replace each other, usually changing the meaning with the substitution.

The words in a sentence are all syntagms and together they form a syntagmatic relationship that creates meaning. If you change the order of syntagms in a sentence it can change the meaning significantly.

  • John ate an octopus.
  • An octopus ate John.

Two sentences using the exact same words (syntagms), but very different meanings because the order (the syntagmatic relationship) of the words changed.

Sticking with John and his dinner, John might have chosen a variety of things to eat besides octopus. He might have chosen beef, eggplant chicken, or pasta for his meal. Each is part of a paradigm of foods or specifically foods John might eat. The items in a paradigm share some kind of function and the paradigm is the set or category they belong to.

Syntagmatic and paradigmatic relations can be seen as different dimensions of a sign and they're often shown that way as in the following table.

The cow jumped over the moon
That dog walked around my yard
This cat slept under your bed
Our hamster ran inside its wheel
Their bird flew through our window
Pat's fish swam in a fishbowl

The syntagmatic relationship is seen along the horizontal axis and the paradigmatic relationship is seen along the vertical axis. Start at any row and read across for the syntagmatic relationship. Look up and down any column for the paradigmatic relationship.

For example "The cow jumped over the moon" (syntagmatic) together form one meaning, but you could replace cow with another word in the column (paradigmatic) to form a different sentence with a different meaning such as the "The fish jumped over the moon."

Let me offer one more example. Here are a couple of three course meals. The combination salad, salmon, ice cream forms a syntagmatic relationship as does soup, steak, pie. Salmon and steak have a paradigmatic relationship because one can be substituted for another.

Salad Salmon Ice Cream
Soup Steak Pie

Hopefully that's clear. It took a little while for syntagms and paradigms to sink in for me, which is why I'm offering different examples and repeating myself a bit.

I should point out that syntagmatic relationships can also be spatial or conceptual, however I think it's fair to say sequences still play a role in both. Changing the spatial relationship or the order in which concepts are delivered changes their sequences as well as the overall meaning delivered.

Creating Narrative, Story, and Myth Through Signs

Syntagmatic relationships lead into the idea of narrative, story, and myth. A narrative is usually defined as a sequence of causally related events. A happens, which leads to B happening, which leads to C happening, and so on.

You've probably read somewhere that your design should tell a story, share a narrative, or similar. One way to do that is through a sequence of signs; a sequence of visual elements.

Think about how you might create compositional flow through your design. Perhaps you design a product page in a way so the first thing a visitor sees is the image of the product, because the image has the most visual weight on the screen. The element with the second most visual weight might be the name of the product, followed by a short description and then a price with an "add to cart" button.

The order these elements are seen tells a story. It wouldn't make sense to show the "Add to Cart" button prior to seeing the product for example. That would tell a different story, probably the story of a greedy site owner asking for your money before letting you know what you'll get in return.

There's more to narrative than designing elements to be seen in a specific order. Most cultures have narratives that are familiar to the members of the culture. For example America has the cowboy myth. The story of the rugged individual who is independent and free from the constraints of civilization.

Because these narratives are so familiar to us, you can evoke the full narrative in someone by showing them a sign from an important moment in the story. We try try to understand an image as one moment in a sequence of images, or events. We see an image and we try to connect a story to it.

Marlboro famously used imagery of cowboys to invoke the cowboy myth to sell cigarettes for about 30 years. An ad would show an image of a cowboy doing something a cowboy does and smoking a cigarette. The idea was the image would remind you of the cowboy myth and you would connect independence and individualism with smoking. Part of the target market for the campaign were older kids who were at the age of declaring independence from their parents.

Hardly the most ethical use of narrative in advertising, but hopefully you get the point about delivering a narrative to a viewer with a single image.

If you understand the narrative well enough to know which key moments will make the audience think of the full narrative, you can connect a product to all the associations a viewer might have with the narrative by showing an image of one of the key moments.

Of course in choosing a single image you leave it up to the viewer which mythology to call forth. Which narrative is invoked depends on the paradigms held by the viewer. You and I might hold very different thoughts about cowboys. The narrative invoked by the image of a cowboy in one of us might be completely different than the narrative invoked in the other.

Keep that in mind if you want to use a single image to associate a product with some narrative. Make sure you know the paradigms of your audience to make sure you call the narrative you want and the associations you want made with your product.

Closing Thoughts

Signs communicate more when seen in relation to one another. None of the letters you're reading would mean much on their own. However, when placed together to form words and when those words are combined to form paragraphs and so on, they communicate a lot.

Signs can either have syntagmatic (sequential) relationships or paradigmatic (substitution) relationships. Changing the sequence or substituting one sign for another, changes the meaning of the combined set of signs.

In visual design the hierarchy you create through the use of different elements, their attributes, and different design principles creates a sequential relationship in the order in which a viewer moves through the hierarchy.

At the same time you choose which elements, attributes, and principles to use from a paradigm that provides different ways of attracting attention.

Your choice to make something red or large to gain attention is substituting one method from the paradigm of how to increase visual weight for another. Creating a hierarchy of visual weights that leads your viewer through a sequence creates a syntagmatic relationship of visual weights.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now

Wednesday, 13 April 2016

Denotation And Connotation — Literal And Implied Meaning - Vanseo Design

Denotation And Connotation — Literal And Implied Meaning - Vanseo Design


Denotation And Connotation — Literal And Implied Meaning

Posted: 12 Apr 2016 05:30 AM PDT

A sign is anything that represent something else. Signs create meaning, but what exactly do they mean? What do they communicate and will everyone who interprets the same sign take away the same meaning from it?

Hobo Signs and Symbols
Hobo Signs & Symbols — Image courtesy of Ryan Somma

The last couple of weeks I've been talking about semiotics as part of a larger series about iconography. I offered an introduction to semiotics and signs  and then talked about the different categories a sign's form might take.

Today I want to talk more about the meaning of signs, specifically what a sign's form literally denotes and what it implicitly connotes.

What are Denotation and Connotation?

Denotation and connotation both describe the relationship between a signifier (a sign's form) and what is signified (what a sign represents), though each describes a different meaning.

  • Denotation describes the literal meaning of the signifier
  • Connotation describes a secondary meaning of the signifier

For example with the word "rose" or an image of a rose the denotation is a type of flower. A connotation of the same sign could be love, romance, or passion. The first is a literal representation, while the second is an implied representation.

You can think of denotation and connotation as different levels of representation or meaning. Denotation is the first level. It's the dictionary definition. It's what you literally see. Connotation is the second level and beyond. It's an idea or feeling that's invoked by the literal meaning. It's the emotional associations you make with the signifier and not a literal interpretation of what the signifier represents.

American politics likes to compare Wall Street to Main Street. The denotation of each would be an actual street named either Wall or Main. The connotation of Wall Street is money, wealth, and power, while the connotation of Main Street is regular people with small town values.

The word home has a denotation of a physical structure where someone lives and a connotation of comfort, security, and family.

Connotations are the main part to how we understand signs. We won't, however, all have the same connotations when we interpret the same signs. Connotations require context and context is built from our unique experiences, ideologies, schemas, and mental models. Because we have different experiences and mental models, it means different people can interpret the same sign in different ways.

Codes as a Context for Interpreting Signs

Ferdinand de Saussure said signs aren't meaningful in isolation. Meaning comes from interpreting signs in relation to each other. For example every word you're reading right now is a sign with meaning. In fact every word is a sign made up of individual signs in the letters they include.

By themselves the letters aren't particularly meaningful, but when they're combined they form words that take on meaning. The meaning of the words changes based on how I've combined them and the order in which I did. The English language serves as a context for reading this post.

In semiotics terminology, this context comes from what are called codes. Codes provide frameworks for making sense of signs. They're a set of conventions for communicating and interpreting meaning.

Language is a common code that enables those who know the language to communicate with each other, to transfer meaning from one to the other. Signs are most effective when the creator and interpreter both speak the same language. In other words when they use the same code.

You probably hold a group of related ideas about what it means to be either masculine or feminine. The group of ideas is a code.

Codes help us make sense of the world. We learn to understand the world through the dominant codes and conventions present within the culture we live. They're systems of meaning or belief systems that help us simplify the signs we see to make it easier for them to communicate. These systems or maps allows us to limit the possible meaning of a sign in order to more quickly interpret it.

We interpret signs based on the codes we think apply to it. In fact you might think of creating an effective sign as using the right cues to get the interpreter to apply a certain code.

Hollywood westerns in the 50's typically had the good guys wearing white hats and the bad guys wearing black hats. The practice was later dropped, but the white hat, black hat code still exists. Look no further than the world of search engine optimization in which people are often described as wearing a certain hat color based on how much their practices is seen as good or bad in the judgement of search engines.

One thing to keep in mind is that codes are dynamic. They can and do change over time. It's unlikely you hold the exactly the same beliefs you did 10 years ago. You've experienced more in that time and so your context has grown and changed.

Types of Codes

One of sites I've leaned on for this series on semiotics was created by Daniel Chandler for his students at the University of Wales, Aberystwyth. He offers three types of codes common to media, communication, and cultural studies.

  • Social Codes — verbal language, body language, fashion, and rituals.
  • Textual Codes — aesthetic codes and codes around different genres and styles.
  • Interpretive Codes — idealogical codes such as individualism, capitalism, socialism, objectivism, and most any other "ism" you can think of.

Interpretive codes also include perceptual codes such as the gestalt principles of perception. The idea behind gestalt theory is that some features of human visual perception are universal and that we may all be inclined to interpret certain ambiguous images in the same way.

Closure for example suggests we're all likely to see an arrangement of individual elements as part of some recognizable whole instead of seeing them as an arrangement of individual elements.

To semiotics these principles are seen as making up a code about visual perception. Gestalt theory isn't the only connection.

Because signs need context for interpretation and because the interpreter needs a code to understand the meaning of a sign, not everyone seeing a sign will hold the proper context to interpret it as intended.

Design trends (any trend really) like skeuomorphism and flat design are popular, albeit temporary codes. The change from one trend to another might be seen as redefining the popular code.

The medium being used for communication can influence what codes are used by both the creator and interpreter of a sign. Many of the codes in a new medium evolve from codes related to existing media. Hence, skeuomorphic detail in computer interfaces. The details evolved from the details of more physical mediums.

Closing Thoughts

Signs often carry a literal meaning as in the picture of a rose to represent an actual rose. They can also carry an implied meaning such as the image of a rose representing love or passion. The literal meaning of a sign is what it denotes, while the implied meaning is what the sign connotes.

These meanings, particularly the implied meanings require the interpreter of a sign and the creator of a sign to share the same context if the meaning is to be interpreted correctly.

This context comes from codes which are systems of meanings or belief systems that help us limit possibilities in order to find meaning more efficiently.

The most effective communication comes about when a sign's creator and interpreter hold the same codes. This suggests that before you can really communicate, you should understand your audiences as best as you can. You should understand the codes they have because those codes will be the context in which your communication is interpreted.

Next week I'll continue and talk about two ways signs can relate to one another to communicate more than they could alone. I want to talk about the syntagmatic and paradigmatic relationships of signs.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now

Wednesday, 6 April 2016

Icon, Index, and Symbol — Three Categories of Signs - Vanseo Design

Icon, Index, and Symbol — Three Categories of Signs - Vanseo Design


Icon, Index, and Symbol — Three Categories of Signs

Posted: 05 Apr 2016 05:30 AM PDT

Signs can take many forms. They can be words, numbers, sounds, photographs, paintings and road signs among and more. However, while signs can be many things, they can be categorized as one of a few types.

Icon Index, and Symbol

The last few weeks, I've been talking about icons. I talked about them in general and then specifically about the hamburger icon. Last week I began a look at semiotics and this week I'd like to continue that look.

Charles Sanders Peirce, one of the founders of semiotics, categorized signs as being one of three types. More recently professor Yvonne Rogers came up with four categories for iconic representation and they fit nicely with Peirce's three types. I'll walk through both sets of categorization in this post.

A Quick Reminder About Signs

In case you didn't read last week's post, let me offer a quick reminder about how semiotics defines a sign. A sign is anything that creates meaning. It's anything that can be used to represent something else.

Ferdinand de Saussure, the other founder of semiotics saw signs as the basic unit of meaning and he defined two parts of signs.

  1. Signifier — The form of a sign. The form might be a sound, a word, a photograph, a facial expression, a painting of a pipe, etc.
  2. Signified — The concept or object that's represented. The concept or object might be an actual pipe, the command to stop, a warning of radioactivity.

Peirce added a third part, the interpretant or what the audience makes of the sign or the sense of what's actually communicated. If you'd like more details, I'll refer you again to last week's post. Everything that follows here applies to the signifier or the form of a sign.

3 Types of Signifiers — The Categories of Signs

Peirce said the form a sign takes, it's signifier, can be classified as one of three types an icon, an index, or a symbol.

  • An Icon has a physical resemblance to the signified, the thing being represented. A photograph is a good example as it certainly resembles whatever it depicts.
  • An Index shows evidence of what's being represented. A good example is using an image of smoke to indicate fire.
  • A Symbol has no resemblance between the signifier and the signified. The connection between them must be culturally learned. Numbers and alphabets are good examples. There's nothing inherent in the number 9 to indicate what it represents. It must be culturally learned.

I know the first time I saw definitions for each type of signifier I was more than a little confused so let's look at each in a little more detail.

Signifier as Icon

Clear your head of what you know about icons for a moment. The icons we use in digital interfaces are all signs and not specifically icons as defined by semiotics. Icons as discussed here are one possible type of form a sign might take. An icon is meant as a direct imitation of the object or concept.

Icons bear a physical resemblance to what's being represented. A photograph is an example of an icon signifier. Take a picture of a tree and the resulting image will look like that tree.

With icons there's a real connection between the signifier and the signified. Magritte's painting of a pipe, which I talked about last week, may not be an actual pipe, but it certainly looks like one and anyone viewing the painting will understand that what they see represents a pipe.

When user interfaces were first being created, most of the signs were imitations of real objects. Think documents, folders, and printers. This is possibly why we refer to all signs in user interfaces as icons, but the original signifiers used were icons in that they resembled what they represented.

Signifier as Index

An index describes the connection between signifier and signified. With an index, the signifier can not exist without the presence of the signified. For example smoke is an index of fire. Dark clouds are an index of rain. A footprint is an index of a foot. In each case the presence of the former implies the latter exists.

An index is a sign that shows evidence of the concept or object being represented. An index doesn't resemble the object or concept being represented. Instead it resembles something that implies the object or concept.

I'm sure you're familiar with WYSIWYG editors. Controls for things like aligning text to the left or using a paint bucket image to paint color are examples of index signs as they use imagery to represent the result of using the tool.

One thing to be careful with indexes is to make sure that the correlation between the signifier and signified is understood by whoever sees the sign. I think it's safe to assume that people know smoke indicates fire, but I doubt most people would know that a thrown baseball that appears to have a red dot on it is an indication that the pitcher threw a slider.

However, a major league hitter or a baseball fanatic like myself understands the rotation of the pitch combined with the red stitching on the ball leads to the batter seeing the dot. It's a reminder that the interpretant is an important part of a sign. Two people seeing a baseball with a red dot could come away with two different interpretations of what's being communicated.

Another point to keep in mind is that the correlation between signifier and signified in an index can be known innately or learned. A smile is an index of being happy and it's something I'd say we all know innately. On the other hand a red stop light is an index for stop, but it's something that we all needed to learn.

Signifier as Symbol

Symbols are at the opposite end from icons. The connection between signifier and signified in symbols is completely arbitrary and must be culturally learned. The letters of an alphabet are a good example of symbols. The shape of each letter and the sound it represents bear no physical connection to each other.

There's no logical connection between a symbol and what it represents. The connection must be learned and it usually becomes associated with the concept it represents over time. Again language and numbers are symbols. Traffic lights are symbols. Flags are symbols. What's being communicated, must be learned.

Conventions and standards help make the connection between symbols and what they represent. An example might one day be the hamburger icon. There's nothing about three lines that automatically suggests menu, but if designers consistently use the hamburger icon, the connection will eventually be learned.

An icon or index can also become a symbol over time through repetition. For example the floppy disk is still used to represent saving a digital file, even though no one uses floppy disks anymore and I'm sure plenty of people have probably never even seen one.

4 Types of Iconic Representation

One of my first stops to research the subject of iconography was my bookshelf. I picked up a few design books and found two of them (Universal Principles of Design and Visual Language for Designers) included pages about four types of iconic representation. The information originally comes from Yvonne Rogers, the director of the Interaction Centre at University College London and a professor of Interaction Design.

A warning that the choice of names conflicts with the three types of signifiers as defined by Peirce.

  • Resemblance icons are direct likenesses of the objects they represent. (camera icon for a smartphone camera app)
  • Exemplar icons depict a common example of the class of objects they represent. (trowel or rake to represent gardening)
  • Symbolic icons convey a concept at a higher level of abstraction than the object depicted. (cracked wineglass to indicate something is fragile)
  • Arbitrary icons have no relationship to an object or concept and their association must be learned. (computer on/off power button)

If you compare these to Peirce's three types of signifiers, you might notice that resemblance icons are Peirce's icons as they resemble what they represent. Arbitrary icons are Peirce's symbols as the connection between signifier and signified is arbitrary.

Both exemplar and symbolic icons as defined by Professor Rogers are Peirce's indexes. Rogers essentially widened the definition of an index and divided them into two distinct types based on the level of abstraction. In either case the signifier isn't arbitrary even if it doesn't directly resemble what's being signified.

Resemblance icons work best when the representation is simple and direct. They're most effective when communicating simple actions, objects, and concepts, however they're less effective as the complexity increases. For example showing a curved line to indicate the road curves ahead, works well, but something more is needed if the idea is to communicate that the driver should slow down.

Exemplar icons work well to show examples of the signified. They show examples that are commonly associated with an action, object, or concept. Any road sign showing an airplane to indicate an airport is a good example. They're effective when what's being represented is more complex than what a resemblance icon can easily communicate.

Symbolic icons are similar to exemplar icons, but they're more effective at a higher level of abstraction. A padlock to represent a secure URL is a good example, because we associate locks with security. Symbolic icons are best used when the actions, objects, or concepts being represented are well-established. For example a camera is also often associated with security, though the imagery isn't as quite as associated with security as a padlock, which is only used for security.

Arbitrary icons are like Peirce's symbols as there's no logical connection between signifier and signified. They're best reserved for when people will have the time to learn the connection between signifier and signified or when the representation has become a standard or convention. There's no reason why blue underlined text should be a link, but it's become the standard online and so when we see blue underlined text we now think the text is a link.

Again I wish the names were a little different, since it will be easy to confuse Rogers symbolic icons with Peirce's symbolic signifiers, but hopefully calling it out a few times here will alleviate some potential confusion.

Closing Thoughts

It's easy to think all signs are the same thing and communicate in the same way by presenting one thing that represents another, but there are different types of signs that communicate in different ways.

Signs can communicate by resembling what they represent, by implying what they represent, or through arbitrary representations that must be learned before we can understand their meaning. Hopefully after reading this post you have a better idea when to use one type of signifier over another.

Next week I'll continue this look into semiotics. I want to talk more about the meaning of signs, particularly what a sign literally denotes and what secondary meanings it connotes.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now