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.

I'm driving across the country.
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.

NS 9355 - Lafayette, Indiana
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?

fonts.png

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.

Download a free sample from my book, Design Fundamentals.

9 comments

  1. nicely written piece, very well presented and poetic definitions of powerful words….I could definitely see these ideas working in many other creative endeavors, especially say…. architecture…..
    your old friend ab

  2. Excellent post on an extremely vital and central subject that is hard to find information about in general. I’ve had trouble getting myself the concepts of concept and theme and this is one of the best explanations I’ve found so far : )

    Elsewhere, I’ve read good definitions and guidelines regarding the subject in a few books including “Hotwiring your creative process” by Curt Cloninger and “MTIV” by Hilman Curtis.

    One thing that I really find would be excellent for learning about developing and conveying strong concepts would be case stories – describing how concepts were developed and conveyed through themes etc. Do you or any of your readers know any good resources that present these kinds of case stories?

    Thank you for your excellent articles : )

    • Thanks Bo. You know I’ve discovered quite a few things when it comes to design are hard to find information about. The information is readily available in books, but not so much online. Glad my explanation was helpful. I’ve been trying to fill in some of the gaps in design information online and hopefully inspire others to do the same.

      I haven’t read either of the books you mentioned, but the titles sound interesting so I’ll look for both.

      Case studies are a good idea. I don’t know any one place off the top of my head. There are definitely designers who’ll post about their process with a single design.

      Graham Smith, of I’m Just Creative often will often walk through the process of showing how he came up with a logo. Here’s one of his more recent case studies.

      It’s something I would like to work in here more as well.

  3. I can realy eplain how much i appreciate this work as it has giving me an insight of what design conceptualization is because if have really for a while now tried to make sense out of it. Its a course am offering for my M.A and this work has given me a better undersanding and please can you also do a work on design externalization. Am a Nigeria from the department of Theatre Arts

    • Thanks Leyira. I’m glad I could help with your understanding.

      I’m not sure I know what you mean by design externalization. I’m trying to look it up, but I’m not finding much. Could you provide a couple of details, enough so I can search for information?

Leave a Reply

Your email address will not be published.

css.php