BlogmyQuery – BMQ

Time and time again, we mistake good decoration for good design. When we are looking for inspiration, we go to the same websites and the same showcases trying to get that added push necessary to create something we love. Now this isn’t a huge deal (especially if we are looking for a creative kick), but if we aren’t careful, we can end up focusing mainly on the decoration and beautification of a web site.

Designers must keep in mind that true graphic design is less of an art and more of a theory. Graphic design is simply a means to solve problems, but once you have solved your problem, you are free to dress it any way you like. The best way to design your web sites (as well as any other thing), is to first figure out what the goal of your site is to be. For example, do you want people to come to your site to become informed about your product, or do you want them to purchase your product? And if you want them to purchase your product, how are you going to make it more important than anything else on the site–of course, without over doing it or compromising its intuitiveness?

You need to be focused on the goals of your site first and worry about the beautification last. With that being said, in no way should you completely ditch great decoration for good design. It can sometimes be hard to find a nice balance of the two but it is more than possible. Of course, for some sites, the amount of decor will contribute to the goals of your site, so it’s imperative that one sits down and figures out what it is they are trying to achieve.

Web Design Examples

Below is a list of some sites that we think have a decent balance of design and decoration. Of course we feel like there is no perfect site (or at least we haven’t seen it), but these sites are pretty close. When looking at the showcase we tried to determine whether it was clear who or what was being presented, how easy and intuitive the navigation was and the way in which everything interacts with the decoration. See how they fare:

Adham Dannaway

This is a great start to our examples. There are so many boring ways to draw attention to the fact that someone is a designer as well as a developer. Some folks just state it, but this guy has an easy to understand visual tactic that makes sense and there is a blurb about each ‘part’ of him, which takes you to work dedicated to that part. A pretty simple and smart idea.

AwesomeTees

Obviously here, they are selling shirts. The use of the green bar at the very top that lets visitors know there is a sale going on is a very simple design solution. It doesn’t stand way out which is smart; because the branding here is that of a quality line of shirts, not a bunch of cheap shirts that go on and off sale.

BellStrike

Headlines are extremely useful (though they tend to get a bit over used) in web design. Here, the name ‘Bellstrike’ tells most nothing, so the headline is used to pretty much fill in this major blank. Then right under the large headline we have the option to do one of the two things we would more than likely do anyway–find out more info or sign up.

 Cheesemonger Invitation

This website is a good example of following the ‘Google it’ rule. Let’s assume you just heard folks talking about the ‘Cheesemonger Invitational’ while you’re on the street or a friend mentioned they were going. You have no clue what it is so you Google it, and this site comes up. All of this information is above the fold with a handy video–what else could you ask for?

 Chichester Music Academy

Another great example of headlines and blurbs, but what really stood out here was the sub-navigation. With this, Chichester made it obvious that their focus is on their music lessons and have made it absolutely important that you check out the information and tuitions for the programs.

Clear Assembly

This site showcases a nice blend of decoration and design–see what happens when you scroll down or hover over a part of the illustration. In the mean time, the static sidebar is very useful, and it’s made pretty clear what this company does.

 Drupal Camp Atlanta

While not a huge fan of the side bar, it really makes sense that the ‘Get On The Waiting List’ button is so visible, and you can assume before this event was sold out, it was probably the button to purchase tickets. Everything is clear and the illustration and techniques are extremely attractive. This is a good blend.

Earth Echo

This seems to be a pretty standard layout that puts the focus on donating and signing up in the top left corner. The purpose of showcasing this site, is to show how you can decorate some standard (yet useful) layouts.

Food Sense

This is an example of a nicely put together website that decided to keep the decoration to a minimum, and it’s completely reflective of the idea behind this site–they seem to focus on cooking, mainly with veggies in their simplest form.

Hanging Up The Moon

This website isn’t necessarily clear on what you are doing, but it intuitively makes you want to click on the pictures and figure out what exactly is going on. This is an AWESOME way of presenting this kind of project (we want you to go figure out what’s going on here. It’s super neat!)

MediaParker

If we were told to make a site for ‘Hosting Solutions for Design Lovers’ it would probably look exactly like this. First, the prices and features aren’t hidden and have to be searched for (like many hosts), and it is very attractive to anyone who has a thing for design. This is also a great example of a single page website.

 Melbourne Food & Wine Festival

Much like the ‘Cheesemonger’ website, the ‘Google it’ rule is exemplified here. All the information is clearly visible and is organized very well, for the large amount that there is. This is an example of another great balance between problem solving and decoration.

One Design Company

This website took a bit of a different approach to navigating around it. Each screen there’s an arrow and intuitively, you would push the arrow keys to see if anything happened. Lo, and behold–movement! A nice added touch to a company that claims to use ‘gallant technology.’

Playtype

This is very progressive design, but it stays true to the idea of presenting folks with fonts. There is sideways navigation that allows the top portion of the site to remain static–and you always have the opportunity to browse the fonts. This makes sense.

Michael Wong (Mizko)

This is an example of good clean design and excellent coding all working well together. It’s pretty evident what he does without creating an overused headline blurb. It’s a great, progressive idea at work here.

The Manual

This is another great example of a single page website–there isn’t a ton of decoration here but the design makes sense. We know exactly what the product is, and though the product is sold out, the area where it can be purchased is visible. Information is visible and everything is right where it needs to be. Unfortunately, it’s a temporary site, but hopefully they don’t lose the structure they have.

War Child

Once again, a site that does great at mixing some excellent illustration with just as excellent design. We understand first, the purpose of this site, then we are called on to donate to the cause. It’s very clear what they are attempting to achieve.

Whiteloupe

This is another site we can use the ‘Google it’ rule for. You may have no clue what a ‘Whiteloupe’ is but it becomes more than evident once you get to the site. They’re obviously attempting to get customers, but not without showing you the work they’ve been a part of. Consider finding this site and just seeing prices first rather than seeing their portfolio–how would you feel and what would you think?

Warehouse Twenty-One

This website makes it easy for their audience to know what’s going on. Basically all the important information is given it’s own space and makes for a very clean and focused web site. The simplicity alone makes for easy decoration–everything here was achieved very well.

Tom, Dick & Harry Creative Co.

The great thing about this site is that it doesn’t use your typical text navigation bar, it uses illustrations to let you know where to go, which promotes a nice bounce rate. What is also important to take note of, is that the ‘Clients’ button is bigger than the others, which probably means they really want you to know who they have worked for, and who matters most.

StoryWorldwide

This is a very forward thinking website and while it may take a minute to actually understand the purpose of the site, you will soon notice that this agency once to put a large amount of focus on the work they have done. Not on the services they offer and who does what. This is a very attractive website that makes sense.

 Shout Digital

As some web designers still attest, what you want to do is pay attention to what you put above the fold because it’s not always guaranteed that someone will scroll down and bounce around your pages. The thing we like about this page is, aside from the wonderful illustration, there isn’t a bunch of clutter up top and that makes users tend to want to navigate.

 Quarterly Co.

Aside from great and eye-catching headlines, good diagrams can really help you get your point across to your audience. Most times after we figure out what a product or service is, we want to know (as simply and quickly as possible) how it works. This diagram is right above the fold, and once you are finished, you have the option to hide it.

Parliament

With most websites, everyone decides to put all their links at the top of the page along with everything else, and sometimes the stuff that’s important can end up getting overlooked. Here, on the right side they decided to take the most important pages and make them more attractive than any other page. Your eye may also be drawn to the ‘work’ and ‘services’ graphics before they go elsewhere.

 Dustin Wood

Another great headline here from Dustin Wood. The wonderful thing about this headline is that it’s interactive and allows you to follow the linked words. This makes sense because of course, you’re going to get attention and focus with a huge headline like this, so why not make it useful.

 Driver Club

This is an amazing showcase of single page website magic–from the graphics to the navigation everything here works well with each other. With a design like this it’s easy to get cluttered, but everything here has remained simple and clean.

 Dirty Dave

Though this is a pretty typical portfolio layout, what’s best about this site is what happens when you decide to hover over the grayed boxes–it obviously turns color. This is pretty amazing because the whole site is gray and neutral, so when you hover, you get a pop of color and a focus. It’s a clever little trick.

Cookie Sound

This is another great example of design and decoration living well together. Everything has it’s own untouched place. Also, your eye is kind of drawn to the top right where there’s a Twitter message, which probably means the owners are interested in gaining followers and engaging with their audience.

 Abita Presents: Boudin & Beer

If you ascribe to that wonderful ‘Google it’ rule, this is a stellar website. An added bonus to this site, though, is that the ticket purchasing button is sticky and is always at the bottom of the screen wherever you go. Obviously, they are focused on selling their tickets, without making it overbearing.

 BarleyPop

This is a super clean website that explains the product above the fold (top right) and continues to introduce and explain it as you look around the site. The focus is not just selling the product, but establishing the purpose and the brand.

A Little More Help

Hopefully, some of us understand this balance a bit better. The best way to try to explain it is creating a focus on what is most important and making it natural for your audience. When creating a web design, you’ve got to pretend the audience has never seen or used a website before, so you must make it as intuitive as possible. For product sites, no one wants to be forced into purchasing, and for any site in general, no one wants to be completely in the dark about what to do. On the other hand, no one wants to have to peruse a completely boring site.

It seems pretty easy to understand but it can be a pretty hard concept to grasp. Below are some tools to help you get a better understanding of design as a problem solving technique and not just a way of creating attractive sites.

Education Resources for Studying Graphic Design

45+ Free Lessons in Graphic Design Theory

The Design Funnel: A Manifesto

Thinking About Design

(rb)

Have you ever had someone flirt with you and they did nothing but demean themselves the whole time? Did that make you attracted to them? Doubtful. Yet, this is how so many individuals seem to handle their business today.

With the advent of social media, the Web has been overflooded with individuals claiming that they are experts at everything. It has become so rampant that whenever I come to see someone label themselves as an expert, I immediately believe they are trying to pull a fast one on me. Unfortunately, many times these people get business because there are people out there who really do believe that they are experts.

How many great designers do you know out there who struggle to find clients, while the world’s worst Microsoft Frontpage jockey can’t keep client offers out of his inbox? I know some of you reading this are dying to get more clients or more users to the app you created. Obviously, to get more people you need to let more people know about you and that doesn’t happen unless you say something. Once you develop a big enough reputation, you can sit back and let others talk about you, but 98% of us aren’t at that point yet so we have only ourselves to depend on.

Being An Annoyance

The problem I find is that I don’t want to be annoying like the other people I see hawking their wares. You might have this problem as well. On Twitter, the world is informed of a new article on my Drawar blog once and that is it. On the very rare occasion I will send out another tweet hours or days later if a great discussion is happening, but beyond that I don’t want to bug my audience. I know people that have no problem promoting their articles once per hour. I don’t know how it works out for them, but I know it annoys me and if something annoys me, I try to avoid doing it myself and therein lies the problem.

When you are promoting your work it is hard to look at your acts of promotion from an outsider’s perspective. When you think you are being annoying, you might not even be registering as a blip on a person’s radar. You might not be promoting enough to get the attention of the masses and yet in your mind you feel as though the masses want to kill you for your own acts of survival. What happens if I am trying to promote an article at 10 a.m.? Does every one of my followers come across that tweet and then know to retweet it if they find it worthy? Probably not.

Be Proud

I believe we do design because we are proud of our work. We believe that we deserve a chance because we can offer the client a unique value. Internally, we believe in it and so that means externally we should show that we believe in it as well.

If you write or design, you must believe in what you do. If you don’t believe you have something to express, there are plenty of other jobs out there. If you believe in what you do, and if you’re doing it for real, you must find ways to let people know about it.

There is a difference between being arrogant about yourself as a person and being confident that your work has some value. The first is unattractive, the second is healthy and natural. Some people respond to the one as if it were the other. Don’t confuse them. Marketing is not bragging, and touting one’s wares is not evil. The baker in the medieval town square must holler “fresh rolls” if he hopes to feed the townfolk.

— On Self-Promotion

Not too long ago, some fellow informed me that he was going to unfollow Drawar on Twitter due to my arrogance. I’m not sure if he meant me personally or the fact that every once in a while I like to proclaim how wonderful I believe the site is. Admittedly, it can come across as arrogant and can be a complete turn off for many people, but to me that is just the confidence I have in the work I am putting forth with Drawar.

You often see testimonials on product and service sites, but not design blogs and portfolios. Why is that? Compliments and praise might be the greatest self-promotion you could ever achieve. Keep track of it. Put it out there for everyone to see. If your clients aren’t saying great things about you then you know you are doing something wrong, but if they are then why shouldn’t your future potential clients know about them as well?

You can’t complain about your lack of business if you aren’t doing anything about it. If you are working hard to spread the word and it isn’t working then either you aren’t doing it right or your product simply isn’t up to par. Hopefully, people respect you enough to let you know when it is below average.

When I first started writing articles, I didn’t write them and send them off onto the Web hoping that someone would find them. I sent them to my friends and asked them to tweet it, while I did the same on my personal Twitter account. Although I still think my friends should be tweeting everything that I write, I only ask them to tweet about my articles from time to time. Once or twice I have sent my friends a tweet linking to my articles and they have been kind enough to tweet about them to their audience.

Image source

I have also sent emails to individuals that I felt would be interested in an article and sometimes it works — many times it doesn’t. I still don’t feel comfortable asking others to tweet my stuff, but sometimes if you don’t ask then they won’t do it. In a perfect world, everyone spreads the word when you write something wonderful, but it just doesn’t work that way. We all need a little nudge from time to time.

The point is that even though I am proud of everything I write and wish that I had the audience to not have to worry about self-promotion ever again, I am not there yet and therefore have to continue to work and spread the word. This also means that when I do something I have to make sure it is quality and worth a person’s time. When you get people to commit to checking your work out and they don’t find it at all rewarding, you are going to have a hard time getting them back.

Community Participation

Dribbble isn’t just a showcase of great design, it has become a portfolio site for many designers. A large number have gotten jobs simply because someone came across their work on the site. You might work hard to build out your own portfolio with your own URL, but if you can’t find a way to get people to it then you are stuck. Dribbble helps you reach an audience that you might not have reached before.

This also applies to other communities. Blogging can help get you in the search engines and one day someone might happen upon you and launch your career. That is how Zeldman found Jason Santa Maria:

A Google search on Illustrator and Web design led me to a post by a guy I’d never heard of. The post was enjoyably written and reflected a mature and coherent attitude not simply toward the technique it described, but to the practice of design itself. Yes, the blog itself was intriguingly and skillfully designed, and that certainly didn’t hurt. But what made me hire Jason was not the artistry of his website’s design nor the demonstration that he possessed the technical skill I sought, but the fact that he had an evolved point of view about Web design.

— One Blog Post Is Worth A Thousand Portfolio Pieces

Taking the time to share you knowledge with the community shows that you have an idea of what you are doing. When people start to understand the process you go through to design a website, it helps to build credibility in their minds. If people within the community start calling you an expert, how do you think that projects to potential clients? By no means should you attempt to write every single day (unless you really want to), but getting an article up once a month can go a long way in promoting yourself.

Image source

Another great vehicle for self-promotion is conference speaking. You might see the same people speaking at different conferences throughout the year, but that is because many times they make it aware to the conference organizers that they are available to speak. Conference organizers look at the speaking lineups of other conferences to get an idea of who their audience wants to see.

However, if they don’t know you are willing to speak then why should they take the initiative to ask? Don’t hesitate to email conferences that interest you to let them know you are interesting in speaking for them.

Sharing Is Caring

While you should stand on top of the mountain and yell about your services every once in a while, the best method of promotion is to get involved. If you have a site, share your knowledge with the world. Visit other sites in the industry and comment. Make a name for yourself by being someone that is helpful. It’s no surprise that some of the best forms of promotion are giveaways.

If you follow Smashing Magazine on Twitter, you know that their feed is 95% links to other articles and resources. They play an enabler role of feeding traffic to the sites around them and in turn more and more people follow them. The greatest promotion Reddit ever did was to link out to the Web and not keep the stories to themselves.

If you are going to claim you don’t have time for this kind of stuff, well, then either you don’t have time to grow your business or your business is already at the point of saturation so life is good for you. I hope that you are at the latter stage, but many of you are still in the former.

Image source

You must be careful when you reach a certain size though. Once your channel of sharing gets large enough there will be people out there that wish to exploit it. Maybe they want to fill it up with ads or you want to use it more for your own self-promotion. This is where the annoyance part kicks in and the reason your channel has been so effective in gaining an audience is because it was useful to them.

When you stop making it useful to them, then you lose them. That doesn’t mean you shouldn’t use it for your own gain, but learn to find the balance because once they start to view you as nothing more than a marketing shill, you will find you have a hard time gaining their trust again.

In the end you will find that if you create something valuable for others, they will take over the marketing for you. I leave you with these two quotes:

“Marketing is what you do when your product is no good.”

— Edwin Land

“Business has only two functions — marketing and innovation.”

— Milan Kundera

Related Posts

You might be interested in the following related posts:

• Web Designers, Get Out There and Make Something! by Michael Aleo
• I Want To Be A Web Designer When I Grow Up by Michael Aleo
• How To Become A Web Design Expert by Paul Boag

(vf) (il)

© Paul Scrivens for Smashing Magazine, 2011.

Typography is the art or technique of arranging type. It’s a broad medium, covering areas such as typeface selection, line length, line spacing, kerning, tracking, and of course wider design features such as color, lighting etc…

Typography is a growing phenomenon amongst graphic designers, many of whom have gone beyond the basic placement of lettering, and turned typography pieces into their own works of art. Often typography designs feature elements of photo manipulation, light effects and even 3D elements. Today we bring you a collection of highly inspiring typography designs, showing just how far the medium can be pushed. These pieces are all works of art in their own right, and we encourage you to go and check out each artist’s portfolio.

The Type

Heartbreak
Heartbreak is a clever concept, whereby the word ‘heart’ is clearly visible, whilst the ‘break’ is implied through a graphical means. The text shatter effect is the basis for this complex, detailed typographic design, and the shattering shards help add great depth to the piece as they appear to be firing out towards the viewer. The colors have been carefully selected and the transitions between blue hues and reds is smooth and attractive.

Desire
A simple, yet effective typographic design. This type appears to have been handdrawn and then colored in Photoshop. The calligraphic nature of the letters gives the text an archaic feel, whilst the painted effect used to color the letters adds a nice touch of creativity. A subtle highlight is used on the top of each letter to add a subtle bevel effect, making the letters really pop against their darker background.

Splash Some Love
Splash Some Love is another visual representation of a concept. Whilst ‘love’ is displayed through the medium of words, the ‘splash’ concept is clearly shown in a graphical medium through the exploding letters. The splash effect is really engaging, as is the hot pink on black background color palette used. The piece screams creative freedom and exploration, as the color literally breaks through the boundaries of the original type.

You in White
A wonderful example of 3D typography. This piece has been rendered using 3D software and then imported into Photoshop for further lighting, coloring and texturing. By combining various mediums in this way the final result is much richer and has plenty of depth and detail. Notice how essential the background is in the success of this piece, as the clever ‘natural’ lighting helps push the letters out from the background, and provide further depth and framing.

Surge
A cool text effect which captures electricity really well. The combination of the old school neon light effect on the text and the waves of electric current and light make this a busy, but engaging piece. The wide variety of neon colors fit well with the concept, and light is effectively used to draw the eye.

Hope Rising
A very clever visual exploration of the concept of ‘hope’. The dove, a classic epitome of hope or freedom has been used as the foundation for the lettering in this piece. The result is a typography piece with a huge amount of detail, and a kind of double layering, whereby the piece can be viewed initially as a kind of custom font creation, and the upon closer inspection a rich illustration. The way that the birds break out from the constrains of the letter shapes helps to accentuate the concept of freedom and ‘rising’.

Shake Your Body
A good example of dripping typography, a trend which has become more and more popular in the graphic design industry. Something about dripping or melting typographic gives a great sense of physicality, and this example shows this perfectly. The neon green ooze in this piece drips effortlessly between letters and words and in doing so brings the typography together into a cohesive whole.

Colors
A bright and vibrant piece based around the notion of color. The rainbow lighting effect on this typography is really eye catching, and creates a visual harmony between the visual exploration of color and the lexicon ‘colors’. The lettering is given a hand painted effect, with plenty of splashes, splatters and intricate details. Light spots are used to draw the eye to specific areas of lettering and add further depth to the piece, isolating it from it’s dark background.

Epic Six
Epic Six uses a cool glossy effect to create good-enough-to-eat typography. The font is hand drawn and then colored in Photoshop, and you can tell a lot of work has gone into the lighting and shading on each letter. The glossy effect combined with shadowing on each letter makes them feel very 3D, and the type really pops against a much darker blue background. The final piece is really fluid as each letter links smoothly into the next. This is a benefit of designing your own font, as most standard fonts wouldn’t allow for this fluidity.

Slash
A stunning typographic portrait, ‘Slash’ constructs the face of the famous guitarist using words relevant to his music and life. This piece shows how malleable type can be, as words are transformed and contorted to provide structure and depth. The hair in this piece is particularly inspiring, as words spiral and tumble downwards in ribbon like fashion.

Ansilmi
This typographic piece offers the feel of a fantasy hollywood movie poster. The archaic type selection fits perfectly with the golden texturing and lighting, and the central beam of light almost feels like a portal into another world. I love how the central light beam casts light outwards on the surrounding letters. Overall a very cohesive, impressive piece.

Crush
Crush is a very heavy-duty, solid feeling piece. The bulky metallic lettering feels powerful and immovable, and the glowing lava-like outline adds to the intense, industrial visual. This piece is a great example of how effective typography can really capture or evoke a feeling or place. For me this piece feels like the typographic representation of an iron smelt – hot, dirty and intense!

Typo Attack
This piece certainly is a visual attack, as the 3D splashes and renders zooming in from the left of the composition actually knock away letters and partially destroy the composition. Love how the splatters weave through the letters as well as destroying them, and the letters themselves begin to splatter outwards and explode. The piece has a limited color palette, yet the black, gray and blues work perfectly together.

Process:Typeface
A sweet custom typeface that simply had to be included in this compilation. Each letter feels lovingly hand crafted and contains epic amounts of detail. Love the effect of combining the multi-colored shards to create an ultimately very legible typeface. The typeface evokes sharpness and precision, definitely not one for the softies out there!

Free at Last
This piece has a very retro feel, with the large rounded lettering and colored stripes constructing the background. The text is given a 3D appearance due to the glossy overlay, lighting, and beveled effect. The lettering both stands out from and blends in with the background. When you’re reading the words they are reasonably legible, but if you start to look at the piece as a whole the letters simply become part of a colorful, geometric, abstract design.

Haeckelbet A
An incredible custom lettering project, each letter has been carefully hand drawn. This is a perfect example of each letter being it’s own work of art. The artist appears to have sketched each letter using pencil, scanned it into Photoshop and then added a sepia overlay effect and some background lighting. All this Photoshop work only really serves to highlight the artistic merits of the piece, as the wood-like weaves which form the letter show enormous talent and artistic skill.

Candy Cane Typography
A really fun typography piece, and another example of taking an object and transforming it to typographic form. The color scheme works really well and the lively pink type really pops against the rich, deep purple background. The lettering is a custom job, and weaves creatively across the canvas to create a really unique final design. The lettering is given a subtle bevel effect, and fairly strong drop shadow to add depth and impact.

Yummy Typography
A very summery typography illustration. This design uses a sunny color palette of yellows and oranges to create a lively, warm mood. The type itself has been given a subtle 3D render effect, which is accentuated by floating shapes and objects intertwining with the letters.

This is Me
A great typographic illustration, this self portrait actually constructs the artist using a collection of words all highly personal to herself. The portrait is especially impressive as words have been positioned to be relevant (e.g.: near the ear are words relevant to the artist’s music taste, and near the ear drum ‘bass’ etc…). The dark watercolor style background perfectly frames the face, which is harshly lit to provide plenty of impact. The depth is incredible in this piece, as the letters are strongly lit from the profile.

Type Fluid Experiment
A really unique typographic experiment that used 3D render software to create a fluid effect. The team behind this project have crafted every letter of the alphabet, which aside from the staggering amounts of RAM required is a testament to their artistic abilities. The collapsing fluid gives each letter plenty of energy, and you can really get a sense of the rapid movement being captured in freeze frame.

Try Your Own Typographic Piece

We hope that this collection has inspired you to go and try your own typographic piece. However, if you’re a little unsure of how to create such awesome text effects then the following tutorials should help you:

Create an Atmospheric Under-Water Text Effect

Dramatic Text on Fire Effect in Photoshop

Transparent Glass Lettering in Photoshop

Designing a Typographic Concept Poster

Awesome Milk Typography Effect

The New Way to Create 3D Text

(rb)

Editor’s Note: Last Friday, we published an article on the Do’s And Don’ts Of Infographic Design written by Amy Balliett which raised quite a discussion within the design community. Some readers agreed, some readers found examples contradictory, and some readers felt that there were some problems with the article which should be addressed in more detail in a further article. Nathan Yau was kind enough to write a counter piece arguing about the practices and examples presented within the original article. This article is his response to Amy’s article published a week ago.

Smashing Magazine offered advice on the “Dos And Don’ts Of Infographic Design“, but they forgot to include the former. It’s as if I wrote a fake post and someone mistook it for a serious guide. Written by Amy Balliett, it seems to me that the post is basically about a couple of tips on how to create linkbait that doesn’t work. Or at least I hope it doesn’t. Many of the dos are actually dont’s, and judging by some of the comments that the article had received, it’s worth pointing out what’s what.

Data Makes Infographics Unique

Let’s take it from the top.

“Infographics are visual representations of information, or “data viz” as the cool kids call it these days. The term “data viz” comes from “data visualization,” which implies that sets of data will be displayed in a unique way that can be seen, rather than read.”

I’m not going to get into the semantics. That’s for people who are smarter (and cooler) than me, but the obsession with a visually unique result is overdone. Sure, you want your graphic to be compelling, but that comes from the data or the information. You’re just trying to make bad design look like good design if you do it any other way: it looks good from far away, but as soon as you take a taste, you realize that there is something fishy going on.

It’s tempting to approach infographics from purely a design and aesthetics perspective, but that’s only one half of the equation. Data is the other (and more important) half. Data is the foundation of every infographic, so when you have a dataset on hand, take the time to learn what it’s about, where it’s from, the methodology behind the estimates and what makes it interesting and unique.

Representing Data

Next up, which refers to the graphic above:

“What’s wrong with this infographic? It breaks the first rule right out of the gate. When you have an opportunity to display information visually, take it. Here, the tweets per second could have at least been shown in a bar graph.”

What? We all know the first rule of infographic design is to not talk about infographic design. I guess that’s implied. After that though, the first thing wrong is that there are numbers? What about that gauge on the left without any labels? What does it mean?

Most run-of-the-mill infographics take a few data points and make it look like a lot with big things. This is both a reflection of the data on hand and the creator’s data comprehension.

It gets worse.

Two alternatives to the above are offered. Do you choose the very boring, generic graph A or the very cool and round graph B?

Making a choice between accurate and “regular” or inaccurate and “unique.”

I hope you didn’t answer graph A. If so, you’re wrong.

“If you answered Graph B, you’re catching on. Of course, not all data lends itself to creative and unique graphs. Graph A might work very well if the rest of the infographic shared a similar aesthetic. Sometimes you just have to bite the bullet and produce a traditional bar graph or pie chart; nevertheless, always consider ways to dress it up [...]“

It’s that obsession with unique again. The problem isn’t the bar chart. It’s that there’s only five data points occupying a lot of screen space. Plus, the speedometer makes variance for the tweet rates look way more than it actually is, because the method uses arc length as its visual cue. The accuracy in representation, and thus a compromise in the story being told, is sacrificed to look different.

A more useful graphic would provide more context to the events that these numbers describe. What made the Women’s World Cup Final so much more exciting than Super Bowl 2011? Which final was it? Was it really more exciting? When were these measurements taken? Are they the peaks of each event or is it a mix? Were there more tweets because there were more Twitter users at the time? Was it because the time of the day each thing happened? Tell people something — anything — more about the data.

Applying General Design To Infographics

The second half of Balliett’s post covers mostly general design tips such as color and focus, so it’s less rough, but the examples aren’t any better. They simply try too hard to look “visually compelling.”

Remember that design isn’t just about making things pretty. It’s about making things work, and in the case of infographics, that means representing data accurately and clearly. It means letting the data speak and not putting extraneous icons all over the place to obscure what’s important.

I’m not saying strip your infographics down to barebones wireframes. But do think about what you’re showing and what you really want to focus on.

Once you’ve got that covered, you can bring in design elements that can evoke an emotion or portray an important image.

For example, here’s a map that shows where major airlines flew in the United States during February 2011.

Designing with the data in mind to highlight more frequent flights

More frequent flights are shown more prominently with a brighter shade of white and some blue, whereas less common flights aren’t as visually dominant. Also, a darker map helps with context but doesn’t get in the way. Let data do the talking, and you can use design to tell that story more clearly.

Wrapping Up

Bottom line: when it comes to information graphics, it should always be data and information first, and then you design around that. For that to happen, you have to learn more about data — how to work with it, where it comes from, and what it represents in the real world. Data can be beautiful when you realize the latter, and when you do, you won’t have to work so hard to catch the eyes of readers, because the story behind the numbers and spreadsheets will shine through.

A couple of years ago, big infographics with little substance were able to draw in lots of visitors because they were something new to look at. However, now these sort of infographics draw backlash. You have to put in the time to think about the story you want to tell and show some actual insight.

Using my suggestion box as an indicator, I can tell you readers used to send in these sort of infographics all the time. I even posted some for their novelty. Today readers demand more, and the only people who send me novelty linkbait now are “SEO experts” and “content managers.” Those emails are deleted right away.

When designing infographics, do analyze and understand the data. Don’t sacrifice accuracy, clarity and ultimately, an interesting story just to make something look unique.

What Do You Think?

(vf) (il)

© Nathan Yau for Smashing Magazine, 2011.

Editor’s Note: Last Friday, we published an article on the Do’s And Don’ts Of Infographic Design written by Amy Balliett which raised quite a discussion within the design community. Some readers agreed, some readers found examples contradictory, and some readers felt that there were some problems with the article which should be addressed in a further article. Nathan Yau was kind enough to write a counter piece arguing about the practices and examples presented within the original article. This article is his response to Amy’s article published a week ago. Please notice that the main point of this article is to show a different perspective at the points mentioned in the original article; it isn’t supposed to be a “corrected” guide to infographic design.

Smashing Magazine offered advice on the “Dos And Don’ts Of Infographic Design“, but they forgot to include the former. It’s as if I wrote a fake post and someone mistook it for a serious guide. Written by Amy Balliett, it seems to me that the post is basically about a couple of tips on how to create linkbait that doesn’t work. Or at least I hope it doesn’t. Many of the dos are actually dont’s, and judging by some of the comments that the article had received, it’s worth pointing out what’s what.

Data Makes Infographics Unique

Let’s take it from the top.

“Infographics are visual representations of information, or “data viz” as the cool kids call it these days. The term “data viz” comes from “data visualization,” which implies that sets of data will be displayed in a unique way that can be seen, rather than read.”

I’m not going to get into the semantics. That’s for people who are smarter (and cooler) than me, but the obsession with a visually unique result is overdone. Sure, you want your graphic to be compelling, but that comes from the data or the information. You’re just trying to make bad design look like good design if you do it any other way: it looks good from far away, but as soon as you take a taste, you realize that there is something fishy going on.

It’s tempting to approach infographics from purely a design and aesthetics perspective, but that’s only one half of the equation. Data is the other (and more important) half. Data is the foundation of every infographic, so when you have a dataset on hand, take the time to learn what it’s about, where it’s from, the methodology behind the estimates and what makes it interesting and unique.

Representing Data

Next up, which refers to the graphic above:

“What’s wrong with this infographic? It breaks the first rule right out of the gate. When you have an opportunity to display information visually, take it. Here, the tweets per second could have at least been shown in a bar graph.”

What? We all know the first rule of infographic design is to not talk about infographic design. I guess that’s implied. After that though, the first thing wrong is that there are numbers? What about that gauge on the left without any labels? What does it mean?

Most run-of-the-mill infographics take a few data points and make it look like a lot with big things. This is both a reflection of the data on hand and the creator’s data comprehension.

It gets worse.

Two alternatives to the above are offered. Do you choose the very boring, generic graph A or the very cool and round graph B?

Making a choice between accurate and “regular” or inaccurate and “unique.”

I hope you didn’t answer graph A. If so, you’re wrong.

“If you answered Graph B, you’re catching on. Of course, not all data lends itself to creative and unique graphs. Graph A might work very well if the rest of the infographic shared a similar aesthetic. Sometimes you just have to bite the bullet and produce a traditional bar graph or pie chart; nevertheless, always consider ways to dress it up [...]“

It’s that obsession with unique again. The problem isn’t the bar chart. It’s that there’s only five data points occupying a lot of screen space. Plus, the speedometer makes variance for the tweet rates look way more than it actually is, because the method uses arc length as its visual cue. The accuracy in representation, and thus a compromise in the story being told, is sacrificed to look different.

A more useful graphic would provide more context to the events that these numbers describe. What made the Women’s World Cup Final so much more exciting than Super Bowl 2011? Which final was it? Was it really more exciting? When were these measurements taken? Are they the peaks of each event or is it a mix? Were there more tweets because there were more Twitter users at the time? Was it because the time of the day each thing happened? Tell people something — anything — more about the data.

Applying General Design To Infographics

The second half of Balliett’s post covers mostly general design tips such as color and focus, so it’s less rough, but the examples aren’t any better. They simply try too hard to look “visually compelling.”

Remember that design isn’t just about making things pretty. It’s about making things work, and in the case of infographics, that means representing data accurately and clearly. It means letting the data speak and not putting extraneous icons all over the place to obscure what’s important.

I’m not saying strip your infographics down to barebones wireframes. But do think about what you’re showing and what you really want to focus on.

Once you’ve got that covered, you can bring in design elements that can evoke an emotion or portray an important image.

For example, here’s a map that shows where major airlines flew in the United States during February 2011.

Designing with the data in mind to highlight more frequent flights

More frequent flights are shown more prominently with a brighter shade of white and some blue, whereas less common flights aren’t as visually dominant. Also, a darker map helps with context but doesn’t get in the way. Let data do the talking, and you can use design to tell that story more clearly.

Wrapping Up

Bottom line: when it comes to information graphics, it should always be data and information first, and then you design around that. For that to happen, you have to learn more about data — how to work with it, where it comes from, and what it represents in the real world. Data can be beautiful when you realize the latter, and when you do, you won’t have to work so hard to catch the eyes of readers, because the story behind the numbers and spreadsheets will shine through.

A couple of years ago, big infographics with little substance were able to draw in lots of visitors because they were something new to look at. However, now these sort of infographics draw backlash. You have to put in the time to think about the story you want to tell and show some actual insight.

Using my suggestion box as an indicator, I can tell you readers used to send in these sort of infographics all the time. I even posted some for their novelty. Today readers demand more, and the only people who send me novelty linkbait now are “SEO experts” and “content managers.” Those emails are deleted right away.

When designing infographics, do analyze and understand the data. Don’t sacrifice accuracy, clarity and ultimately, an interesting story just to make something look unique.

What Do You Think?

(vf) (il)

© Nathan Yau for Smashing Magazine, 2011.