Archive | Digital RSS feed for this section

World’s First Real Time Facebook Cover Image

13 Sep

Zaraguza are claiming to have created the world’s first real time Facebook cover image, which updates at what looks like every minute or so, by posting a new image into a Facebook album which is sucked into the Cover image automatically, and is refreshed when new people hit the page or click the refresh button. Kinda cool, I suspect this will start trending. What do you think?

Read more>


Minimalist Web Design: How Minimal is Too Minimal?

9 Feb

Minimalism, interestingly enough, is usually born out of excess. In all arts, in all ways of life, we start out by taking and adding whatever we can.

When we start to realize that more is not necessarily better, and that we can get by with less stuff, we try to simplify by removing unnecessary elements so we can focus on what’s truly important.


What is Minimalism?

Minimalism, in its purest form, is the reduction of something to its bare essentials.

Think of a car. It only needs a few critical components — engine, wheels, gas, and so on — for it to run. As long as it has these parts, you can take out many non-essential elements such as its audio system, heated leather seats and cup holders, and the car will still get you to where you’re going.

In web design, minimalism translates to producing a site from the basics. Instead of including everything but the kitchen sink and then paring it down to only the necessary features, a better approach would be to start with a blank slate and only include the essentials.

Minimalism is an exercise in restraint, with the eventual goal being a design that helps the user focus and accomplish their tasks as quickly as possible.

When designing minimalist websites, you should keep three things in mind:

  • Subject: What’s the most important thing on the web page? Is it effectively keeping the user engaged and focused?
  • Usability: What things burden the user experience? What missing elements can enhance user-friendliness?
  • Balance: Does the web page have the appropriate visual hierarchy and do components have appropriate visual weights?

These three elements are actually the most important elements in all styles of web design, but whereas other visual styles may beg for additional aesthetic layers, minimalism does not.

Why Use Minimalism?

This minimalist thinking is the basis of modern web design — we begin with content, perhaps a brand, but nothing else. By adding in only what’s necessary, we create a website that caters specifically and solely to its mission.

There are many benefits to designing a minimalist website.

First is the obvious: Minimalist web designs usually end up with fewer code and site assets. A minimalist site will often have fewer CSS rules, HTML elements, images, JavaScript, and so on. This ultimately means increased front-end web performance and, in turn, enhanced usability and a better user experience.

This doesn’t mean the design stage is any easier — minimalism takes just as much thought, planning and production as any other type of website. And perhaps even more, if my theory about our innate desire for “more stuff” is correct.

Zen Habits’s archive page shows how easy it can be to build a minimalist website once the concept is there.

It’s also harder to mess up minimalism, in my opinion. By proactively leaving out superfluous elements, your design becomes more open and free. When there’s less to see, there will be fewer distractions. As long as you give ample consideration to balance, typography and white space, your design will look pretty good. This is much easier than wrangling with a PSD template with dozens of layers.

And for those who have little artistic skill or proficiency in Photoshop, minimalism is a perfect way to create a site using only a strong understanding of typography, white space, and balance.

While not the most minimalist of examples in this article, Julien Lavallée’s site (featured below) demonstrates how interesting and visually appealing simple websites can be.

However, the most important reason to design minimally is that, without extraneous design elements, the site’s content is emphasized. By adding more white space, the various sections of a website are given breathing room.

On Daniel Gray’s site, notice how enough white space is given around each content section so that readers can quickly focus on the content without being distracted by much else.

The one problem with the site is that the reader’s eye focuses on the content in an odd order. My eyes go from the navigation bar, to the image of the unicorn, then to “Daniel Gray”, and then finally to the “Hello, I’m a designer and writer based in York.” tagline. But because there aren’t a whole lot of visual elements to distract the reader, this order doesn’t matter so much. In a visually busier site, some of this content would get lost, but here, although I see things in a different order than what’s probably optimal, I still consider each content element in turn.

Don’t Sacrifice Usability for Minimalism

As we’ve all heard by now, “content is king”, and although there are some that might disagree with that, there are very few who would say content is not important at all. Every line of code you write is to serve the page’s content in some way.

Just as important as content is how accessible that content is — without adequate consideration of usability, content can be difficult to find and read.

Now that we have new web standards and technologies like CSS3 and HTML5 at our disposal, we must deeply consider what is necessary so that we avoid the overuse of these things. (I wrote something about this before.)

My suspicion is that as web technology grows tantalizingly better and more complex, minimalists are going to have a harder time paring down their designs to the essentials, especially as certain superfluous design patterns have become almost expected, like using CSS transitions to make links hover a little softer.

But always in the back of your mind should be considerations of usability. Chances are — unless you’re a big, established and well-recognized company like Apple, Starbucks or Nike — you should probably include the name of your company with your logo. And don’t think you can reduce your navigation menu to a set of enigmatic icons; even if it doesn’t confuse most readers, it will confuse some.

Don’t Worry, You Can Still Be Pretty

Designing minimally doesn’t always have to mean a reduction to the barest essentials. To the contrary, many minimalist sites include subtle design elements that manifest themselves beautifully and more remarkably because of fewer competing, distractive elements.

Chance Graham’s site, for example, has great use of color, iconography and subtle visual effects (like the box shadow on the navigation items at the top-left of the web page layout) that add enough nuances to intrigue the user without them being a disturbance.

Are You Designing Minimally for a Good Reason?

Minimalism on the Web could be thought of not as an aesthetic, but as the lack of one. If you “go minimal” just for its looks without understanding the purpose of minimalism, you will be lost, and your designs will turn out less than stellar.

Just as any other art genre or design style, minimalism must be well understood in order to be well executed — don’t let simple-looking web designs fool you; there is more going on with them than what can be seen on the surface.

In addition, minimalism shouldn’t be arbitrarily confusing or enigmatic. Many people see minimalist websites as a way to make their brand seem more mysterious, but this isn’t the goal, and there are much more effective ways to build a mythos around your brand than designing it inappropriately.

When any design is confusing, or enigmatic in its structure, or uncomfortable in its balance, it throws the viewer off. The last thing you want is a confused user, unable to find what they’re looking for.

In general, you should avoid ambiguity and confusion when designing in any style. Minimalism is no exception. In fact, minimalism is the design style where ambiguity must be avoided like the plague, and usability embraced, analyzed and perfected to the point where no user could possibly be confused in any instance when visiting your site.

Most importantly, make sure you clearly understand the goal of minimalist design before you plunge right in. Without proper direction, your creations could end up something like the piece below, which is great for many things except for conveying information in a clear and effective way.

James Turrell’s Space That Sees demonstrates the difference between minimalist art and minimalist design.

The goal that you should strive for, when employing minimalism in your designs, is to enhance readability, improve navigation and usability, and, as always, create the most pleasant user experience possible.

Is Your Design Too Minimal?

Your design might be too minimal if:

  • You’re using minimalism for the wrong reason
  • If you’re sacrificing usability in any way

These problems are easy to fix as long as you understand the goal of visual design in general: To clearly and effectively convey information. Constantly consider how your design decisions affect your users.

At the core of every design is minimalist thinking: the idea that few things are actually necessary and critical.



The History of Online Shopping [Infographic]

29 Nov

full size :



Design With Dissonance

17 Oct

You might consider yourself knowledgeable, but you’ve probably never heard of this powerful communication and design technique that I’m about to share. I’m sure you’ve seen it in practice but never knew it was working on you — that’s how good it is. I’m here to shed light on this technique so that you can use it as an approach to your design or writing.

See what I did there? I introduced you to dissonance by using the technique itself. If used correctly, it can enhance your approach to design and copywriting in certain projects. Welcome to designing with dissonance!

What Is Dissonance?

To understand dissonance, knowing first what consonance is would help. Consonance is when you feel comfortable with your beliefs; a certain harmony exists in how you’re feeling right now. You feel good. Dissonance occurs when something disrupts your consonance. It challenges your beliefs and makes you feel uncomfortable. You feel bad, or you think to yourself, “What the heck is going on?”

So, why should you know about dissonance and consonance? How are they relevant to design and writing? They are relevant because they are the key ingredients in cognitive dissonance, one of my favorite theories of Leon Festinger.

Festinger’s basic hypotheses for cognitive dissonance are as follows:

  1. The presence of dissonance, of being psychologically uncomfortable, will motivate the person to try to reduce the dissonance and achieve consonance.
  2. In addition to trying to reduce dissonance when it is present, the person will actively avoid situations and information that would likely increase it.

Why Should You Use Dissonance?

We are going to focus on the first hypothesis as a new way to design and write. Put simply, it stipulates that we always want to reach consonance when we experience dissonance. May the persuasive madness begin!

We often try to convince people to use our solutions through our writing and design. In your attempt to persuade them, design with dissonance as a way to challenge their beliefs, and then introduce your service as a way to help them achieve consonance.

Writing With Dissonance

My introduction to this article uses dissonance. I suggested you were knowledgeable but that you haven’t heard of this technique. If you felt uncomfortable about not knowing this technique, then perhaps you chose to read on in order to learn it and feel comfortable again. And because I’m also a detective (well, not really) and possess mad deductive-reasoning skills, I can infer from the fact that you’ve read this far into my article that the dissonance may have worked on you! Aside from my attempt in the introduction, some amazing articles in our industry use dissonance beautifully.

An Essay by Paul Scrivens

A good example is Paul Scrivens’ essay, “You Are Not A Designer And I Am Not A Musician.” I love this essay, and many designers have shared it with their peers. Here’s an excerpt, in which he begins to use dissonance:

No, you are not a designer. You are someone that can piece together some stuff in Photoshop or add the right pieces of code in XHTML/CSS. You aren’t the person that creates experiences. You aren’t the translator of ideas that people never thought could be produced visually. You aren’t the person that can toss their own style to the curb and come up with something even greater because of it.…

We live in a world of hobbyists and the majority of our peers are hobbyists parading as professionals. They are not designers.

But you could be. Maybe. Just take the time to study like the greats before you. Push your limits. Test your boundaries. Designers like to work within their comfort zone because they know what they will like. Make something ugly to help you come up with some ideas on how to make something beautiful. When you need inspiration create your own.

Scrivens has disrupted your consonance here, which created dissonance. He challenged your beliefs. He blatantly told you that you are not a designer. But in the midst of your dissonance, Scrivens offers solutions: he suggests that you study like the great designers before you, and he makes recommendations on how you can find your own inspiration to become a designer. These are solutions you could follow to bring you back to consonance. Cognitive dissonance at its finest. Yes, you could have simply dismissed Scrivens’ attempt at dissonance, but then the theory would have worked even then; you wanted to maintain your beliefs and feel comfortable.

An Article by Whitney Hess

In her article “You’re Not a User Experience Designer If…,” Whitney Hess demonstrates wonderful writing with dissonance. She could have taken the easy way out and written it as the “Top 10 Ways to Be a Better User Experience Designer,” but I doubt it would have had the same impact as the real article had on that glorious day when user experience designers shared it with their peers to defend their work.

Dissonance was possibly created when designers read the title of the article. I’m sure many designers must have thought, “How dare she say what I am and am not. I must read on to refute this nonsense!” But as they read the article, they would have found Hess offering a list of things that do not make them user experience designers. The list might have made them psychologically uncomfortable (dissonant), but they may have decided to act on the list items to make themselves feel more comfortable and to bring back consonance. The article challenged beliefs and fostered great discussions.

A Project Built On Dissonance

You can base an entire project on dissonance. McKinney made an amazing online game about surviving poverty and homelessness, called Spent. Visitors are challenged to live on $1000 a month. Most people think that it’s easy to make a living and act like no one has an excuse. They accept the challenge because it seems easy enough. In the end, they walk in the shoes of someone less fortunate and begin to understand their hardships.

We see dissonance right away on the main page, “But you’d never need help, right?”

Spent Intro

We feel psychologically uncomfortable and try to correct it by accepting the challenge. We are then presented with the following narrative:

Over 14 million Americans are unemployed.

Now imagine you’re one of them.

Your savings are gone.

You’ve lost your house.

You’re a single parent.

And you’re down to your last $1,000.

Then we are asked whether we can make it through the next month or would like to “Find a job.” If we choose the latter, we are presented with current job openings: restaurant server, warehouse worker or temp.

When we make our choice (in this case, warehouse worker), a description of the job is shown and we continue:

Spent Health Insurance

We continue to face more choices that make us uncomfortable, such as whether to opt in for health insurance. If we opt in, we see the impact on our finances, which helps us understand something meaningful about low-income workers.

Spent Result

We then need to choose where to live relative to our place of work. Living closer means higher rent, while living further away means higher transportation costs. You are then asked to pay your rent and transportation costs.

Spent Find Home

And then we are presented with even more uncomfortable situations that create yet greater dissonance!

Spent Small Apartment

When we finally reach our tipping point and want to correct the dissonance, we can get out at any time. A small link in the corner reads, “I can’t do this.” And then we are asked to take action and help by getting involved:

Spent Final

As you can see, the website creates an intense experience of dissonance. And it offers a way to help us reach consonance by donating, sharing and getting involved with Spent.

More Dissonance In The Wild

As mentioned, dissonance is already being used, and you might not have even noticed its power. Let’s look at some attempts at cognitive dissonance, where businesses challenge our beliefs and then suggest their services as a solution.


If you’re a PHP developer, Adobe will definitely disrupt your consonance by asking, “Who needs PHP?” The ad leads to Business Catalyst, where Adobe explains how you can build database-driven applications without writing code!

A Book Apart

HTML5 - A Book Apart

The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice.

HTML5 is the longest HTML specification ever written. It is also the most powerful, and in some ways, the most confusing. What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5 in today’s browsers?

In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm.

The introduction to HTML5 for Web Designers creates dissonance by suggesting that we don’t have the time or energy to get through the HTML5 spec. It recommends that we use this book to learn the important parts of the spec, which will bring us back to consonance.


Projects Manage Themselves with Basecamp. Millions of people use Basecamp, the leading online project collaboration tool.

The subheading for 37signals’ Basecamp is powerful. Knowing that millions of people are using Basecamp to get stuff done and that you’re not one of them might challenge your thinking. Are you missing out? Are those people more efficient than your team? You might consider using this product to gain efficiency.


Send Invoices. Accept Cards. Tired of PayPal? Signup for Blinksale with Blinkpay. Just $24/month for both.

For those of us who use PayPal, Blinksale attempts to create dissonance through its ad on The Deck by asking whether we are tired of our current service. Some of us feel that PayPal is a good enough service, but Blinksale claims to be the easiest way to send invoices online. With our beliefs challenged this way, we might decide to look further into what Blinksale has to offer in order to resolve our dissonance.

Where To Start?

If you’d like to apply cognitive dissonance, I suggest starting simple so that you can A/B test and gather feedback more easily. Then, you could incorporate more of it as you become comfortable with applying the theory. For now, start by using dissonance in a few of the headlines on your website to convince people to do business with you. Take the boilerplate headline that we see on most freelancers’ websites:

Hello. My name is Tad Fry, a Web developer and designer who makes websites.

Apply some dissonance:

Your competitor’s website is better than yours. Let’s work together to change that.

This might be blunt, but we want to challenge beliefs. If someone feels that their website is better than their competitors’ but then is challenged by your headline, they might be inclined to call you to resolve their dissonance. If you want to appear less provocative, you could phrase it as a question.

Is your competitor’s website better than yours? Let’s work together to change that.

Even though we are phrasing it as a question and the potential customer might agree (consonance), we are still creating dissonance because they might not have even considered that their competitor’s website might be better. We’ve now made it less direct and perhaps less insulting. Getting the right balance between dissonance and a respectful tone is sometimes difficult, but as with most of our work, gathering feedback and making changes based on it is important. This brings up another part of the theory.

In his book A Theory of Cognitive Dissonance (see pages 3 to 18), Leon Festinger writes (18):

The strength of the pressures to reduce the dissonance is a function of the magnitude of the dissonance.

We might prefer to be more direct, because that will create greater dissonance, which would put more pressure on the audience to reduce it. Again, it comes down to how much dissonance you want to create without insulting the visitor or completely missing the target. After all, the visitor could achieve consonance simply by choosing not to listen to you at all — which is why testing your work is so important.

Now Go Forth And Challenge Beliefs!

Hopefully I’ve whetted your appetite for this approach. I encourage you to look more into the theory, which is more involved than this introduction. And that’s the beauty of it. The various degrees of dissonance offer new approaches to your next design. Try adding dissonance to just a headline or page element at first. Be careful not to insult; you simply want to challenge beliefs and offer your product as a solution.



Why Persuasive Design Should Be Your Next Skill Set

17 Oct

The UX discipline has been busy. In the last two decades, it has formalized the practices of information architecture, experience design, content strategy, and interaction design. Thanks to the insatiable drive of UX practitioners to improve and define the field, it will continue to grow, and persuasive design is the next practice it will supercharge and embrace, folding its techniques into interaction design.

A Framework for Changing Behavior

Persuasive design is the process of creating persuasive technology, or “technology that is designed to change attitudes or behaviors of the users through persuasion and social influence, but not through coercion.” – Wikipedia / BJ Fogg

In other words, it is the use of psychology in design to influence behavior.

There are a few main tenets of the discipline:

  • Behaviors can be classified based on whether they are positive or negative, and how long they will be sustained. (See the behavior grid)
  • A person’s motivation and ability determine whether they will perform a behavior or not. (See this illustration)
  • Insights from psychology can be used to change someone’s motivation or ability, thus influencing the likelihood of a behavior.
  • Triggers are single design elements that change motivation or ability.
  • Triggers have a strong element of timing; they are most effective when presented when someone’s motivation or ability are already at peak levels.

From a practical perspective, persuasive design is strongly aligned with both business and user goals. It is a powerful way to influence the “desirable” part of the holy trinity of good design (useful, usable, desirable). It focuses on the context that behavior happens in, especially the motivation and ability required to prompt action.

Think of persuasive design as focused more strongly on affecting whether people do something, and interaction design dealing with how they accomplish it if they’ve decided to.

In the Wild

One need not look far to see examples of good persuasive design; they get talked about because they’re exciting. I’ve created a thread on Quora where examples of persuasive technology are continually being added. Here are some highlights:

Manicare Stop That
Manicare Stop That is a nail polish with a bitter taste, helping people break the habit of biting their nails.

Vitamin R interface
Vitamin R helps you stay on task by giving audio reminders that you’re working on something.

Ford Fusion dashboard display
Ford’s fusion dashboard with eco leaves creates a feedback loop on your driving, encouraging more eco-friendly driving.

ReadyForZero stickers
ReadyForZero is giving away stickers that go on your credit card, reminding you not to spend.

Facebook like widget
The Facebook Like feature is lightweight, in-context exchange of social capital that creates motivation, value, and engagement for multiple people with a single click.

A Steady Trend

Before looking forward, let’s take a quick look back to see how this new discipline fits into a simplified history of user experience:

  • Human-computer interaction is about paying attention to people and their relationship with computing.
  • Information architecture is about making things findable.
  • Interaction design is about making things usable.
  • Content strategy is about making things meaningful.
  • Experience design is about making things seamless.
  • Persuasive design is about making things influential.

The trend goes towards deeper meanings and bigger impacts.

Chart of relationship of user research, interaction design, and persuasive design along an impact continuum

As the design discipline gets better at the basics of understanding and enabling behavior, it moves towards creating meaningful impacts by influencing behavior. But this influence must be built on top of successes in the more basic elements of UX such as good research and seamless usability.

People Are Already Practicing Persuasive Design, but UX Lags Behind

People have created persuasive technologies since the dawn of invention. Advertisements in every shape and context persuade people to buy things. Credit cards make it trivially easy for people to take loans. Weight Watchers turns calories into simple points that can be used to track and manage a diet.

However, the UX field is only beginning to fully embrace persuasive design. This industry is far behind industries such as advertising and marketing, which have studied, tested, and honed the art of influencing people’s behavior for decades. UX practitioners are designing persuasive technologies every day, but are only beginning to formalize the education, ethics, and metrics behind creating them.

Without such structure, we will continue to see cargo cults that inappropriately use techniques, such as gamification. Foursquare, Gowalla, and other services popularized the use of game mechanics to drive user engagement. Unfortunately, many companies have strictly copied the obvious game elements, such as badges and leveling-up, without understanding the deeper psychology at work. These services have seen the power of persuasive design, but lack a true understanding of how to properly apply psychology in UX design.

Why Persuasive Technology Will Change Everything, and Already Is

With a focus on psychology, UX designers can build services that directly help people improve their lives. It’s not new; AA and Weight Watchers were around before the Internet, and they help people through difficult and long-term behavior change. Still, there are big advances to be made. Web services are starting to blur the edges between online and offline interactions. Nike+ and Fitbit track and provide insight into your exercise. ReadyForZero helps people change their behavior and get out of credit card debt. HealthMonth creates competitive / supportive groups of people who improve at the same time.

This is grander than enabling behavior—it is changing behavior. It is also only just beginning. As the practice delves deeper into embedding psychology in design, new approaches will emerge. Researchers at Stanford, for example, have begun to develop the technique of persuasion profiling. This technique builds a profile of which psychological triggers work best for a given person, and uses these triggers to drive new behaviors in the future. In other words, beyond focusing on what content someone might prefer—say, a relevant movie on Netflix or a product on Amazon—this approach determines the how to deliver it most effectively. Where the principle of social proof may persuade one person to buy a product, the principle of competition may work better for someone else.

With Power Comes Responsibility

The ethical questions that arise when designing for behavior change cannot be understated. The UX community has searched for a common ethical framework for some time now, and the need only grows greater.

However, the evil stuff is already happening. Cigarette companies, soda companies, fast food franchises, the fashion industry, marketing agencies, and many other entities have been practicing persuasive design for decades. Often, they design for business goals at the expense of the customer’s money, health, or happiness. It appears that the evil side of the market is far more saturated than the good side. If this holds true, there is hope. Practitioners at smaller companies and non-profits will have much to gain from a greater understanding of persuasive design, whereas mega-corporations have already taken it to the limit.

Furthermore, it’s much easier to talk about the ethics of using psychology in design when everyone shares a common understanding of what that means.

What’s Next?

There’s plenty to do. Fortunately, the design community is active and motivated in defining the practice.

Flesh out the frameworks

Flesh out the frameworks The existing frameworks are great beginnings. BJ Fogg’s Behavior Grid has paved the way. They provide the structure around which people understand and discuss persuasive design. Once the community uses frameworks regularly, they will certainly undergo some refinement, and new ones may arise.

Learn and educate

UX practitioners should learn all they can about this kind of design. What are the psychological principles at play? How do you understand them? How do you test them? As they improve on their understanding and discover new methods of using psychology in design, they should continue to share these advances with the community.

Develop more pattern libraries

Pattern libraries full of examples provide a fast education. They give many examples of what has already worked in various situations. Inevitably they get a bad reputation when they are overused, but this shouldn’t outweigh their usefulness as a learning tool. Stephen Anderson’s Mental Notes cards provide a fantastic set of behaviors to reference, and the Design With Intent toolkit is another useful guide.

In Summary

Persuasive design is the next step in using design to create a positive impact in the world. While it is already being practiced in many industries, the UX community has yet to fully embrace this type of design. Doing so will be the next big step in pushing the UX field forward.



The Do’s And Don’ts Of Infographic Design

17 Oct

Since the dawn of the Internet, the demand for good design has continued to skyrocket. From Web 1.0 to Web 2.0 and beyond, designers have remained on their toes as they define the trends and expectations of our online universe. The Internet is a great designer’s playground, and online businesses are growing more and more appreciative of what can be gained from a bit of well-executed eye candy. Over the past two years, this fact has become the backbone of a growing trend in online marketing: the infographic.

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. This visualization should not be left up to interpretation, it should instead be designed in a way that provides a universal conclusion for all viewers. In the simplest terms, infographics are not too different than the charts and graphs that programs like Excel have been spitting out for years.

Of course, just as Web 2.0 changed 1.0, today’s infographics are far more eye-catching than simple pie charts and bar graphs. Today, infographics compile many different data visualizations into one cohesive piece of “eye candy.” They have evolved with design trends, received some creative facelifts, and the Internet is now getting filled with interesting information delivered in enthralling ways.

While some design trends come and go, infographics are here to stay. With brands like USA Today, The New York Times and Google and even President Obama getting behind them, infographics are becoming a powerful tool for disseminating huge amounts of information to the masses. Companies large and small are using infographics to build their brands, educate their audience and optimize their search engine ranking through link-building. This is why learning how to design a good infographic is a must, and avoiding the common pitfalls of infographic design could mean the difference between landing a big client and losing them entirely.

Wrapping Your Mind Around Data Viz

Designing an infographic is not the same as designing a website, flier, brochure, etc. Even some of the best designers, with portfolios that would make you drool, cannot execute an effective infographic design. Creating infographics is a challenge and requires a mindset that does not come naturally to everyone. But that mindset can be gained through practice and by sticking to certain standards, the most important of which is to respect and understand data viz. Here are some simple rules to follow when wrapping your mind around proper data viz.

Show, Don’t Tell

A rule of cinema is to show, don’t tell. The same holds true for infographic design. The foundation of any good infographic is data viz. As an infographic designer, you may or may not determine the concept and compile all of the research for the final design, but either way you are responsible for turning that information into a visually stimulating, cohesive design that tells a story and that doesn’t miss a single opportunity to visualize data. Take this portion of an infographic about Twitter by ViralMS as an example:

twitter infographic
This Twitter infographic writes out the data, rather than visualizing it.

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. This would enable someone to quickly look at this section and see what’s going on; by seeing the various heights of the bars, the eye could have quickly gauged the differences in tweets per second per event without having to read anything.

If you’re having trouble adhering to this rule, try keeping all of your text on one layer of your AI file (excluding text inside charts and graphs). Every once in a while, turn off the text layer and see whether the infographic still makes sense. If there isn’t any data viz, or if a bunch of pictures are missing context, then you are doing too much telling and not enough showing.

If the Client Wanted an Excel Chart, They Wouldn’t Need You

It might sound harsh, but it’s true. If infographics were as simple as laying out a bunch of standard charts and graphs on a page, then clients would not need to search out great designers. Many tools are online that can create colorful pie charts, line graphs and bar graphs, so you have to take things to the next level for your design to stand out. Taking the data from above, which of the two graphs below do you think would make a client happier?

unique data viz
Two ways to visualize the data from the Twitter example above.

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, as in the examples below:

infographic examples
Ways to dress up simple graphs for an infographic.

Typography Should Not Be a Crutch

Typography can make or break a design, but it should not be the solution to a data viz problem. More often than not, designers begin an infographic with a great deal of energy and excitement, but they lose steam fast as they continue down the page. This often leads to quick decisions and poor solutions, like using typography to show off a big number instead of visualizing it in some way. Here’s an example:

Too much dependence on typography
TravelMatch’s infographic highlights too much.

Whenever I see this, I’m reminded of the “Where’s the beef?” ad campaign, and I think, “Where’s the data viz?” Although Sketch Rockwell is one of my all-time favorite fonts, this is a perfect example of relying too much on typography.

Any time a research number is provided to you for an infographic, ask yourself how it can be visualized. Percentages can always be visualized with creative pie charts; numerical values in a set can usually be turned into a unique bar graph; and when numbers don’t fit on a consistent scale, you might be able to visualize them in a diagram. Here is another way the above data could have been visualized:

data visualization
An example of how to visualize the TravelMatch data, rather than relying on typography.

Typography Has Its Place

All that being said, typography does have its uses, which should not be ignored when creating an infographic. Most of the time, you will want to focus your creative typographical energies on titles and headings. The title of the infographic is a perfect opportunity to use a fun and eye-catching font and to give it a treatment that fits the theme or topic. Just make sure the title isn’t so distracting that it takes away from the reason we are looking at the infographic in the first place. The truth of the matter is that some infographic topics are boring, but the right title design can engage people enough to scroll through.

Similarly, headings help to break up an infographic and make the data easier to take in, giving you another chance to let your font-nerd flag fly.

The title of an infographic is your chance to draw attention to the design.

Organization And Storyline

Organizing an infographic in a way that makes sense and that keeps the viewer interested is not always easy, but it’s part of the job for most infographic designers. Usually, you will be given a lot of data and will need to create a visual story out of it. This can be challenging at first, but you can follow some general rules to make things easier.

Wireframe the Infographic

Wireframing an infographic enables you to work out a storyboard and layout for the design. You may have an idea of the story you want to tell, but as you start laying things out, you might hit a wall and have to start over. Having to reorganize after having already done a lot of the design is incredibly frustrating. Avoid this by setting up your storyline at the start to determine what data to show and how. Set aside an hour to sketch things out and make sure it all makes sense. This will also help to ensure that the color palette you will choose drives attention to the important points and keeps the eye flowing down the page.

Think Outside the Box

As you wireframe the infographic, you will identify section breaks that help to tell the story. Most infographics online have a vertical flow, in which each section has a heading to distinguish it from the last. This gets boring fast. Organizing the data and sectioning off information without relying entirely on headings and color breaks is a good way to break the monotony.

For instance, rather than going for a typical one-column layout, you could use two columns in certain parts. You could also break up sections with borders, with backgrounds of different shapes or give the entire design a road or path theme. Here’s some outside the box layouts to get your creative juices flowing:

unique infographic layouts
There are many unique ways to lay out an infographic that will keep the viewer engaged.

Tell a Story

All good stories have a beginning, middle and end. Infographics deserve the same treatment. At the beginning of the infographic, introduce the problem or thesis. From there, back it up with data. Finally, end the infographic with a conclusion.

Visualize the Hook

Every good infographic has a hook or primary take-away that makes the viewer say “A-ha!” As a designer, you should make this hook the focal point of the design if at all possible. Placing the hook at either the center or very end of the infographic is usually best, so that it grabs more attention. Give the most important information the most visual weight, so that viewers know what to take away. Here are some examples of well visualized hooks:

hooks in infographics
Hooks should either be in the center, beginning, or end of the infographic and need the greatest visual emphasis.

Cleaning Things Up With Color

The difference a color palette can make is amazing, especially in the world of infographics. The right palette can help organize an infographic, evangelize the brand, reinforce the topic and more. The wrong palette can turn a great topic into an eyesore, harm the brand’s image and convey the wrong message. Here are some tips to consider when choosing colors for your infographic.

Make It Universal

In Web design, it’s always important to choose a palette that fits the theme of the website and that is neutral enough for a diverse group of visitors. Because infographics are primarily shared online, picking the right palette for an array of visitors is equally important. You must also consider what looks good online.

For instance, dominant dark colors and neons typically do not translate well on infographics; neon on black can be hard to read, and if there is a lot of data, taking it all in will be a challenge. Also, avoid white as a background whenever possible. Infographics are often shared on multiple websites and blogs, most of which have white backgrounds. If your infographic’s background is also white, then deciphering where it begins and ends will be difficult.

A Three-Color Palette Is Easy on the Eyes

With all of the data that goes into an infographic, make sure that the reader’s eye easily flows down the page; the wrong color palette can be a big barrier to this. Choose a palette that doesn’t attack the senses. And consider doing this before you start designing, because it will help you determine how to visualize the various elements.

If picking a color palette is hard for you, stick to the rule of three. Choose three primary colors. Of the three, one should be the background color (usually the lightest of the three), and the other two should break up the sections. If you need to add other colors, use shades of the three main colors. This will keep the palette cohesive and calming, rather than jarring.

Use the Tools at Your Disposal

When picking colors, you don’t have to reinvent the wheel. A number of great websites out there will help you choose the right palette for your infographic. Adobe’s Kuler offers fresh themes and a searchable database, as well as an easy tool to adjust the palette that you’re interested in. One issue with Kuler is that all of the palettes have five colors, and the colors are sometimes from completely different families, rather than shades of a few primary colors, so finding the right palette can be like searching for a needle in a haystack.

Another color-picking tool is COLOURlovers. This database is easier to search through: it breaks palettes into different themes and can be sorted by favorites. While most of the palettes also consist of five colors, the colors are not always given equal weight; instead, the tool suggests which should be dominant. Here are some good and bad palettes for infographics:

infographic color palettes

Final Thoughts

While these standards are important to consider for most infographic designs, sometimes an infographic comes along that breaks all of these rules and still succeeds immensely. In the end, clients like “eye candy” and designs that “pop!” While such terms are subjective (and annoying to most designers), we all know a great infographic design when we see one, and your clients do, too. Use these rules to guide you into the infographic realm, but create your own techniques and standards after you’ve gained some experience.



Smashing Magazine’s October Desktop Calenders

30 Sep

See it here :

Sweet Monster

“Happy sweet monster special for Smashingmagazine readers.” Designed by Ryumina Elena from Russia.

Free Desktop Wallpaper - October 2011

Design Is Life

“Design is Life with all its Patches & Shades in it. Design is so closely attached to everybodys life with Nature, lifestyle, fashion, trends and so many things around.” Designed by Lucky from India.

Free Desktop Wallpaper - October 2011

Colours Of Dream

“October for ComoYoDsg is a month of changes. Just this month my web is changing colours and shapes. I want to share it with you with these wallpapers that form a part of my new design. Just enjoy it!” Designed by Comoyodsg By Dovi Vausk from Spain.

Free Desktop Wallpaper - October 2011