Web Design Harmony: Concept, Conveyance and Theme

When you come across posts and articles teaching web design the focus is usually on how to do one specific thing. A tutorial on creating an effect in Photoshop or a tutorial on how some specific css property works.

These posts are often helpful and I learn from many of them myself. However you usually don’t find a lot of good articles on the abstract concepts that drive a design and combine the various parts into a unique and successful whole.

Hopefully this post will help you with a few higher level thoughts and ideas behind creating a design for your site.


photo credit: helenadagmar

Concept, Conveyance, and Theme

As you can tell from the heading above I want to talk about three ideas in design.

• Concept: The idea behind your design.
• Conveyance: The delivery of your concept
• Theme: The coordination between all your design elements toward a unified whole

Design solves problems and visual design solves the problem of how to communicate ideas visually. It’s important to remember that your design doesn’t exist in a vacuum. A good design is not solely a matter of aesthetics.

When you’re creating a design for a website you have to start with an understanding of the goals for that particular website and an understanding of the audience for that a site. A site aimed at generating a lead for a service based business is going to end up looking very different from a site aimed at teaching young children math. The two sites have very different audiences and very different goals.

Without an idea behind your site and a way to deliver that idea in a cohesive whole your design fails.

Concept

concept (noun) — an abstract or generic idea generalized from particular instances; a scheme; a plan

What’s the purpose of your design? What’s the idea behind it? What is your design supposed to do? Who is it for? What is its function?

As you answer these questions you’re forming the concept of your design. You’re developing the idea for the site and the purpose you hope to achieve. You’re creating the central message your design hopes to get across to visitors.

Concept is direction. It’s the roadmap you use to get to the finished design. Concept is abstract, yet without its binding forces your design fails. Concept is the glue that holds everything together in your design. It’s what defines every decision you make about how your site will look and feel.

photo credit: JFeister

Conveyance

convey (verb) — to transport, to communicate, to impart, to make known.

Concept is a abstract, but it needs to get to your visitors in some tangible way. That way is conveyance.

Conveyance is the delivery of your concept. It’s how your abstract concept connects with your audience through your design. Conveyance is your choice of elements and how you style those elements in order to deliver your message.

Everything conveys meaning according to rules and context. Sometimes that meaning is obvious and sometimes it’s more subtle. The words “Click Here” convey the message to click those words. Blue underlined text on a web page conveys the same message without being as direct.

Different elements convey different messages and different styles to the same element convey different messages. Red and Blue are both colors, but each conveys a different message. Red is impulsive, while blue is calming. If your goal is to convey ideas of trust and stability, blue is probably a better choice for a dominant color.

Hard edges and and angles are seen as more masculine, while curves and soft edges are seen as more feminine. Long horizontal lines are static, Angled lines are dynamic. Whitespace conveys elegance, sophistication, and luxury. Lack of space can convey crowded and chaotic. Everything conveys meaning.

If you were designing a wedding invitation which font below would you be more likely to choose? Why?

Your choice is one of conveyance as is every other choice you make about the various components that make up your design.

Conveyance is relative to your audience. For example in western cultures black often represents death and funerals. The opposite is true in eastern cultures where it’s white that represents death and funerals. Your choice of white for a bridal site will convey a very different message in the United States as it will in many Asian countries.

While many elements will convey the same message regardless of audience (a smile is the same in any language), many will be audience dependent. Txt speak likely works well for your gaming site. It would be seen as sloppy for a corporate site. Understand your audience in order to understand what visuals resonate with them and what meaning they’ll derive from your elements.

Remember you’re trying to connect with a specific audience and to convey a message to them you need to speak their language, both verbally and visually.

Mastering conveyance is part instinct and part understanding visual language. Learn what you can about the visual meaning of various elements and symbols, but even more use your own observations and experience of life.

Always be asking how the visual symbols you see around you communicate to you and others.

Theme

theme (noun) — a subject of discourse; a unifying or dominant idea; a recurrent idea; a motif

Do your elements work together? Does your color scheme convey a message of warmth and openness, but your contact information is nowhere to be found? What does the lack of contact information say about how warm and open you are? Are your elements working together or are they sending mixed messages?

Concept is conveyed through a theme. Your theme is the agreement between the distinct parts of your design. Do your buttons send a similar message as your background images? Do your font choices mesh with your color scheme?

Theme is the tone, the emotional appeal of your design. Your theme of warmth and openness calls for a warm color palette, with plenty of whitespace to create an open layout. You would likely choose curves and soft edges over right angles and hard edges. Each of those choices reinforces the same central message. Your visitors may not be conscious of the specific message conveyed by each element, but taken together they will connect with your overall message.

The more your elements point toward singular theme, the more your design and your audience will connect.

Design elements united in the message they convey and all pointing to your central concept, deliver a strong theme that will resonate and connect with your audience and will turn your design into something that is more than the sum of its parts.

Summary

With a few minutes of searching you can find many great tutorials on how to create a grunge texture or how to create a metallic button. You can find tutorials on how to add hand-drawn imagery, how to create realistic lighting effects, how to create ice, how to create fire, how to … well you get the idea.

You can find great tutorials for creating many different design elements, but how do you best make use of those elements in achieving your overall design.

The answer lies in concept, conveyance, and theme.

Determine the purpose of your design and the main concept behind it, understand the messages various elements convey to your audience, and combine them into a singular theme that supports your main concept.

Web design is much more than making a few elements look good and slapping them together on a page. Web design is about solving a problem of communication between website and audience.

Concept is what you want to communicate. Conveyance is how you will communicate it. Theme is how well you coordinate it.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.