I am available for freelance work - HIRE ME

The Vowels of Design

posted by Matt Ward on Sep 11, 2010.

Vowels are an critical part of language. Without them, we could not form the words that are the basis of our communication. The same idea also applies to certain concepts in design. In this article, I want to look at five fundamental concepts that could be called the “vowels” of design.

Language is something that is very important to me, as many readers may already know. Recently, I was thinking about just how amazing language really is, and that train of my thought brought me around to the concept of the vowel – you know, a, e, i, o and u (and sometimes y). The more I thought about it, the more I came to believe that most people probably just don’t really recognize just how fundamental the role of the vowel is. Without it, language falls apart.

Seriously. Try taking this sentence, removing all the vowels and then actually reading it out loud. You won’t be able to. You may be able to string the consonant sounds together, but what comes out of your mouth won’t really be language. It won’t even be intelligible.

In languages like English, which are based on an alphabet (ours is primary Latin in origin), the vowels are the airy, almost musical sounds that bind the harder consonant sounds together to actually form what we call words.

As I was thinking about just how important vowels are, I eventually started thinking about design. After all, there is a strong connection between language and design through the art of typography. As my mind wandered, I started thinking about the possible metaphor of the “vowels of design.” It seemed to me that these would be fundamental concepts that would have the same critical importance to design as vowels do to language.

So, in this article, I would like to look at the five “vowels of design,” as I have formulated them.

A is for Aesthetics

One of the more obvious, but still very important aspects of design focuses around the visual appeal of something – a logo, a website, a poster. In our various articles and online discussions, we often talk about making things look beautiful, and that’s what aesthetics is all about. It is quite literally the study or science of beauty.

Balance, colour, position, shape, texture and negative space are all carefully and meticulously considered, both on their own merit and through their their various interdependencies, all for the purpose of establishing the greatest possible level of beauty and visual appeal.

There is an old and cliched adage that “beauty is in the eye of the beholder”. There is certainly some merit to this idea, based mostly on the concept of taste. Some people love stark minimalism, while others tend to prefer the complexity of intricate detail. Both have legitimate aesthetic value, and I’m certainly not here to make judgments.

What I do want to say is that aesthetics have an important bearing on design, in that different aesthetic choices have drastically different implications. Let’s look at a couple of website examples. First, we have the site of Contempo, a small web design studio:

The contempo website is clean, professional and firmly entrenched in a clear tradition of design

The contempo website is clean, professional and firmly entrenched in a clear tradition of design

The site has a wonderful, minimal and “Swiss style” inspired design. The aesthetic itself suggests simple professionalism and well crafted work, based on a long tradition of design. Compare that against something like the website of Casisus, a designer based out Australia:

Bold and colourful, the Cassius website has a hip, youthful and trendy feel

Bold and colourful, the Cassius website has a hip, youthful and trendy feel

The colourful, quasi-psychedelic logo and big prominent photograph suggest a hip youthfulness and work that is unique, edgy and probably somewhat more organic.

These, of course, are just quick, snap judgments that are based entirely upon the aesthetics of the sites themselves. It’s kind of like judging a book my its cover, and that’s okay because a designer’s job is to create that cover. As such, we need to design with the expectation that people are going to make snap judgments, and base many of our aesthetic choices on this expectation.

E is for Experience

These days, when we read the word “experience” as it pertains to design, our minds invariably turn to thinking of web design. We talk, at great lengths, about the importance of the user experience (UX) and about the various things that we can do to help improve that experience through better design and usability. Some members of the community are even working specifically as UX designers, and there are a multitude of websites and online magazines dedicated to the subject.

That’s all very good and important, but in the larger scheme of design, experience encompasses far more than just the work we do on the web.

I talked about this kind of thing a few months ago in my article “iPhone Lessons and the User Experience”. In that article, I talked about the positive experience that I had with Apple products, based primarily on the design – both of the product itself, and the packaging. Interestingly, a friend of mine recently picked up a new iPhone and MacBook Pro, and we had a similar conversation about all the little touches that just lead to a better experience, starting with when you first open the box. It echoed pretty much everything I had to say in that article.

The point is that all design results in an experience of some sort, and good design is consciously crafted to help direct the course of that experience. It could be interactive, as with a website, but it could also be emotional, intellectual, or even aesthetic.

Take a magazine for example. How is it designed? Is content clean or cluttered? Is the layout plain and simple or elegant and sophisticated? Is it standard size or oversize? What kind of paper is it printed on? Is it printed in black and white or full, stunning colour?

All of these are key factors that will shape the experience of the reader. There’s not necessarily a right or wrong answer to any of these questions on a general level, but their certainly is on case by case basis. Making the right decisions in these areas can be every bit as much a matter of design as typography and layout.

I is for Information

In formulating an answer to that broad and difficult question of “What is Design?” I came to the conclusion that one of the three key elements is content. I suggest that all design concerns itself with content at some level. In the most obvious way, it has to do with things like articles, reports, stories and other written material. But it extends beyond that. Images are a form of content too.

And so are ideas, concepts, values and even identities.

All of these are forms of information that needs to be conveyed. As designers, our job is to determine the best way to do the conveying. With written content, the solution can often seem much more clear and obvious (though that’s not to say it’s easy), but with more abstract information, it can become a bit more of a challenge.

Let’s take a logo as an example. Right off the bat, there is one bit of information that will usually need to be included, and that’s the company name (though this need not always be true). Occasionally, there might also be a slogan or catchphrase. That’s the obvious stuff

But what about the ideals and values behind the business or organization? What about their corporate culture or position within a given market? This is all information that also needs to be conveyed through the design (in other words, content). How can you achieve that through colour, shape, lines, typography and so forth? These are all important considerations for effectively conveying information through design.

O is for Organization

Design, by its very nature, is never random. It may occasionally appear to random, and there may even be some degree of randomness incorporated (like a scatter brush), but as a whole a good design should always be carefully and meticulously laid out with a very clear purpose and intention.

This is where organization comes into play.

We’ve already talked about the importance of aesthetics, experience and information, and all of these things will be affected, to some degree, by organization (as is our letter ‘U’ concept – but we’ll get to that). How are elements arranged on the page or screen (or other surface)? How are they positioned in relation to each other? How are they they spaced? Is the layout clean and structured or more organic and chaotic? All of these are important questions to consider, and have a direct bearing on the other ‘vowels’ of design.

Organization also controls progressive flow of content from the design to the reader/viewer. In the case of the more abstract, it can help formulate a hierarchy of implied ideas and values, suggesting what is primary and what is secondary.

With more obvious forms of content, such as articles (to be specific) or websites (to be a bit more general), organization helps dictate the flow of the material itself, and to help users or readers find particular bits of information that they might be looking for.

No matter how you slice it, organization is an absolutely crucial function of any design, and is something that we need to pay close attention to.

U is for Understanding

I bet you thought that when I got down to the letter ‘U’ I was going to start talking about usability, didn’t you? It did cross my mind, and its certainly an important factor, but I think that the concept of understanding is equally (and perhaps even more) important.

In many ways, everything else is just a means of getting to this point. As a designer, you have a message you need to convey. That’s the information (or content), and you can use aesthetics, organization and experience to actively try to deliver it. In the end, however, if the message is not fully understood, the design fails to achieve its ultimate purpose.

That may sounds a little harsh, I know, but it’s true.

What good is a logo, book, website or poster if the information that it is trying to covey to the reader/viewer is not actually reaching them? It really doesn’t do much good at all!

One small but key example is a story that a fellow designer told me regarding a web project he was working on for a client in another country. He was working on the search bar and used a simple magnifying glass icon on the search button itself. The client, however, came back and had to ask what it was. As it turns out, their particular culture did not have the same figurative understanding of the magnifying glass, and so they did not grasp the meaning of the metaphor.

The popular magnifying glass metaphor may not work in all cultures

The popular magnifying glass metaphor may not work in all cultures

Obviously, this is a small example and my colleague was able to address the problem, but it does show the kind of unfortunate breakdowns that can occur and how small obstacles can become a barrier that prevents understanding.

Conclusion

So there you have it, the five “vowels” of design, which I think are as key and foundational to good design as the letters a, e, i, o and u are to language. You can no more design without these concepts than you can speak or write without vowels. You may not be conscious about them (though now you will be right?), but they will always play a role.

Every design will have some sort of aesthetic, and lead to some sort of experience. Every design will attempt to convey some sort of information (concrete or abstract) and will have some form of organization (whether poor or not). And, ultimately, every design will work to bring the reader/viewer to some point of understanding.

Reading this article isn’t going to change anything fundamental, but perhaps if we are conscious of these things, it will help us to make better design decisions and to produce stronger work.

What do you think? Do you pay attention to these ‘vowels’ of design in your own work? Please feel free to share your thoughts and ideas!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Sep 11, 2010

Man Mohan says:

Nice WriteUp dude…keep it up

Sep 11, 2010

iainspad says:

Really good post Matt!! Great article and nice to see you’ve got terms on which you managed to explain it thorough, well-written, and with visual evidence.

In particular, I like the “Understanding” statement – There is sometimes a fear I have which we, the designer, get carried away in our visual lingo on which the general client, and public, find hard to understand.

Sep 11, 2010

Richard Georges says:

Yet another great article Matt. You have a few typos in there, but the concept is definitely agreeable.

Sep 13, 2010

Joseph Alessio says:

Good “vowels,” many people tend to take one or two of them and think they’re a designer. All of them are necessary. Experience is probably the most difficult to acquire, because when you start out, you don’t have experience, but you can’t get anywhere without it. So, get some projects going, whether volunteer, personal projects, etc, and eventually you’ll get projects that reward you monetarily!

Sep 14, 2010

Ryan McAwesome says:

Just to play devils advocate(/comments douche), what about words like rhythm? fly/sky/sty/cry?

Sep 14, 2010

Matt says:

“It won’t even be ineligible.” I think you mean “intelligible”.

Good article by the way.

Sep 16, 2010

Sunalini says:

Very well written & explained. A Great Post!

Sep 16, 2010

Aidan says:

A very interesting and original article. Coming up with a representation to each vowels is clearly a good demonstration of the creativity that you possess.

Feb 28, 2012

blogidev says:

Thank you for idea design and thank you for blog share.

Leave a Comment

Links

  1. CSS Brigit | The Vowels of Design
  2. Monday Muse: Inspiration From Those Making News #1 | Pixel Fuse

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014