Does Your Design Set The Right Context For Your Content?

When talking about different aspects of design I often mention the word context. However, I realize I don’t always talk about the importance of that word and why we should always be thinking about the context within which we work. Today I want to correct that and offer some thoughts about context.

checkerboard-illusion
The squares marked A and B are the same shade of gray.

It’s All Relative

The world seldom works in absolutes and that’s particularly true with things like design where a measure of creativity is involved. We know or should know that there’s never a single answer to a design problem. We seek the best solution, but there are often multiple best solutions. What’s best is relative to the specific problem.

It’s not just design.

  • The earth is spinning and moving through space at incredible speeds. We don’t feel it, because relative to the earth we’re barely moving. The earth is our context.
  • Politicians speak in sound bites. We often receive bits of text or speech taken out of context. Without context the words take on completely a different meaning and politicians often quote their opponents out of context for political gain.

Your design is the packaging for your content. Design is the context in which content is absorbed.

Back to design, colors look different when placed against other colors. The absolute color you choose is less important that the combined scheme of colors you use. Each color in the palette influences how the others will be seen. Purple next to blue feels warm. Next to red it feels cool.

Consider the image above. Despite what your eyes are telling you, the color of square A and square B is exactly the same. They look different because of context. The local colors around each lead you to see one as darker and the other as lighter.

You can use your favorite color picker to prove they’re the same shade of gray or check out the proof and explanation. The point is perception is relative. The context in which you perceive something shapes your perception of that something.

2 old and worn picture frames leaning against a wall

Frames, Expectations, and Exposure

Awhile back I offered a post discussing 3 different principles for setting the context. I’ll let you read the post for the details, but here are the principles along with a quick definition of each.

  • Framing effect — the idea that manipulating the way information is presented can influence and alter decision making and judgement about that information.
  • Expectation effect — the idea that perception and behavior change as a result of personal expectations or the expectations of others.
  • Exposure effect — the idea that repeated exposures to things that we have neutral or positive feelings about increases the likability of those things.

All three of these play into context. Framing is about creating a context. Expectations are about bringing a context with us. Exposure is about changing context over time. Common to each is that context influences perception.

LHBS 3C Model: Context, Concept, Connection
LHBS 3C Model: Context, Concept, Connection

Design and Context

Ultimately the reason people visit a website is for its content. The content is the message. It’s what’s being communicated. It’s why content should come before design. However, how the message is packaged affects how the message is interpreted.

Design is the packaging for the content. It’s the context in which content is absorbed. When someone lands on your site they’ll immediately take in the aesthetic and start to form opinions. The context has been set. As they continue to look around they’ll get a sense of the atmosphere that exists further refining the context.

The initial and immediate impression starts influencing everything that comes after and each new observation influences the next. Everything consumed will be interpreted in relation to what came before. It’ll be interpreted within the context previously set.

This is why we want to create aesthetics that are meaningful. This is why we want unity in our designs. We give meaning to aesthetics to make sure the proper context is set and we unify everything to continue to reinforce that context.

We know hierarchy exists to draw attention to the most important elements and information. It’s also important for setting context, since the order in which we present elements will influence each subsequent element seen. Your headline will influence how your article is read.

Imagine a news story of two children trapped in a burning building. A fireman is able to rescue one, but unable to rescue the other.

  • Fireman heroically rescues 5 year old girl from burning building
  • Fireman watches while 5 year old boy burns

Two very different headlines that could potentially be used for the same event. The exact same article could be offered, but you’d likely come away with 2 different feelings based solely on the different headlines. That’s the influence of context.

Many of the elements we design will be open to interpretation. Many of the words we write will be too. If we can create the right context, we stand a much better chance of having both be interpreted the way we intend. Set the wrong context and the opposite might be true.

Knowledge is information-in-context
Knowledge is information-in-context — Michael Ventura

Summary

First impressions make a difference. It’s important to get off to a good start. The beginning sets the context for the middle and the end. Every thought you hold and judgement you make is influenced by all that came before it.

A lot of what we do as designers is set the context. We create an atmosphere in which content is consumed. Our aesthetics can lead to a positive interpretation of a site or a negative one. They can reinforce our message or contradict it.

When placing an element on the page, think not only of what that element is communicating. Think also of how what it says influences how the next element is perceived and the one after that. Context influences everything.

Download a free sample from my book, Design Fundamentals.

5 comments

  1. As a webdesigner, having finished a website, can you really know whether you set the right context?
    It might also be a good idea to clearly define this before starting the design. Hard to define though, you’ll quickly end with vague terms like professional, young, dynamic, blabla

    How does one measure context? Any ideas?

    • Good question. I don’t think you can “know” whether you did things right or wrong with a lot of design. You can run tests, but in the end you’re inevitably using some of your judgement and experience.

      I’m not sure how you would go about measuring context. You probably can’t in the sense that different people will bring different experience with them. How I might interpret a color or image could be very different from how you would interpret it.

      I actually try to define this before starting a design, just by using words like you mention. They may be vague, but they carry meaning with them. For example think professional and young. What kind of colors do you see? What kind of imagery? How should the text read? You can ask yourself all kinds of questions like that keeping professional and young in mind.

      Now ask yourself the same questions, but think about retired and mature. You’ll likely have different answers to the same questions.

  2. Interestingly, it occurs to me whenever I do web design, at 24 hours dislike it and I can think of other designs. I think it’s very important to meditate each design, and know that there are always several ways to do a job, you just have to think what is the most appropriate. Porst Very interesting!
    Regards,
    Sofia

    • Funny. I often dislike a design shortly after finishing it too. Sometimes I think I’ve just looked at it too much, but more often I think it’s because there’s something about it that isn’t right. I may not consciously know what that is, but something inside tells me it isn’t what it should be be and so I dislike it.

      Usually I try to figure out what it is and see if I can fix it.

  3. This gives me a lot of food for thought. I never really thought of the importance of context to the extent you demonstrated. Thanks for another awesome article.

Leave a Reply

Your email address will not be published.

css.php