8 Dos and Don’ts for Creating Effective Infographics


Data is everywhere around us, and yet, it is generally difficult for us to comprehend and remember isolated numbers.

When put into a story, however, data becomes much more relatable. (The human brain can process images 60,000 times faster than words.) For this reason, infographics have become increasingly popular among marketers around the world. But with this surge in usage, it’s important to make sure your infographic does the job it’s supposed to do: drive traffic, build awareness, and generate leads for your business.

Below we’ve compiled some of the best tips for creating effective infographics to help your brand devise a strategy that resonates with your audience.

The Dos and Don’ts of Infographic Creation

1) DO: Keep it simple and to the point.

Try to break down your message into one, strong sentence. From here, you can use data to support what you’re trying to say. But remember: Less is more.


This simple chart tells a big story. Thanks to the contrasting colors, it easy for the reader to immediately understand just how scarce fresh water is. This is an approach you’ll want to make note of if you want your readers to focus on a specific data point.

2) DON’T: Try to say too much with one chart.

Poorly formatted, unorganized data won’t get you very far. To create more effective charts, stay focused on categories that help you make your point. Arrange the data from those categories in a way that is easy to grasp to avoid something that looks like this:


3) DO: Surprise the reader with an unexpected twist.

Have some unusual information on your hands? Use surprise as a means of increasing alertness and focus.

If you can make the reader question their previous beliefs, open their minds to new ideas, and then fill the gap with your information, you’ll find that it’s much easier to hold their attention. Check out the chart below for an example of how to present uncommon knowledge that may surprise the reader.


4) DON’T: Use boring titles that tell everything in the first sentence.

In the image below, the headline leaves nothing to the imagination. The main argument of this chart is known to most people. That said, why would they want to read more?


Instead, focus on creating an enticing headline that leads with the promise of new, valuable information.


5) DO: Use concrete visual metaphors. 

Show data to support your point. Detailed, data-driven arguments convince the reader faster and are much more likely to be remembered, recognised, and shared.

The chart below visualizes the most popular pets in the US in a very clear way: Dogs make up 37%. Cats make up 31%, and so on. Thanks to the use of the animal icons and shading, it’s easy to understand this sequence with just a quick glance.


6) DON’T: Use weird formatting to visualize data. 

Be careful with funky data visualization formats, as they’re not as easy to read as traditional formats.

While the following chart is certainly creative, we’d argue that a simple bar chart would convey the information in a way that makes more sense to everyone.


7) DO: Make your message believable.

Make your message believable by using customer quotes, testimonials, expert support, and of course, good data. The following quotes from happy customers serve as a great example of how social proof lends credibility to the infographic.


8) DON’T: Show dry numbers without context.

As we’ve mentioned before, good stories are emotional. In fact, it almost doesn’t matter what emotion your message arouses, as long as it makes them feel something.

Data can be used to start conversations and incite curiosity, when used correctly. However, the data in the following chart lacks both emotion and context. This leaves the reader wondering if the sales figures shown should be perceived in a positive or negative light.


An effective use of charts and infographics can dramatically improve the performance of your marketing content, as well as the persuasive character of your business presentations.


Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

8 Effective Web Design Principles You Should Know


The design of your website is more important for conversions than you think. You can implement any conversion boosting tactic in the world, but if it looks like crap, it won’t do you much good.

Design is not just something designers do. Design is marketing. Design is your product and how it works. The more I’ve learned about design, the better results I’ve gotten.

Here are 8 effective web design principles you should know and follow.

Effective Web Design Principle #1: Visual Hierarchy

Squeaky wheels get the grease and prominent visuals get the attention. Visual hierarchy is one of the most important principles behind good web design. It’s the order in which the human eye perceives what it sees.

Exercise. Please rank the circles in the order of importance:

Without knowing ANYTHING about these circles, you were easily able to rank them. That’s visual hierarchy.

Certain parts of your website are more important than others (forms, calls to action, value proposition etc), and you want those to get more attention than the less important parts. If you website menu has 10 items, are all of them equally important? Where do you want the user to click? Make important links more prominent.

Hierarchy does not only come from size. Amazon makes the ‘Add to cart’ call to action button more prominent by using color:

Start with the business objective

You should rank elements on your website based on your business objective. If you don’t have a specific goal, you can’t know what to prioritize.

Here’s an example, it’s a screenshot of the Williams Sonoma website. They want to sell outdoor cookware.

The biggest eye catcher is the huge piece of meat (make me want it), followed by the headline (say what it is) and call to action button (get it!). Fourth place goes to  a paragraph of text under the headline, fifth is the free shipping banner and the top navigation is last. This is visual hierarchy well done.

Exercise. Surf the web and consciously rank the elements in the visual hierarchy. Then go look at your own site. Is there something important (key information points that visitors are likely seeking) that is not high enough in the hierarchy? Change that.

Effective Web Design Principle #2: Divine Proportions

The golden ratio is a magical number 1.618 that makes all things proportioned to it aesthetically pleasing (or so it is believed).

Then there is also the Fibonacci sequence where each term is defined as the sum of the two previous terms: 0, 1, 1, 2, 3, 5, 8, 13, 21 and so on. The interesting thing is that we have two seemingly unrelated topics producing the same exact number.

Here’s what the golden ratio looks like:

Many artists and architects have proportioned their works to approximate the golden ratio. A famous example is Pantheon built in Ancient Greece:

Can it be used for web design? You betcha. Here’s Twitter:

Here’s a comment by Twitter’s creative director:

To anyone curious about #NewTwitter proportions, know that we didn’t leave those ratios to chance.

This, of course, only applies to the narrowest version of the UI. If your browser window is wider, your details pane will expand to provide greater utility, throwing off these proportions. But the narrowest width shows where we started, ratio-wise.

So, if your layout width is 960px, divide it by 1.618 (=593px). Now you know that the content area should be 593px and sidebar 367px. If the website height is 760px tall, you can split it into 470px and 290px chunks (760/1.618=~470).

Effective Web Design Principle #3: Hick’s Law

Hick’s law says that with every additional choice increases the time required to take a decision.

You’ve experienced this countless times at restaurants. Menus with huge options make it difficult to choose your dinner. If it just offered 2 options, taking a decision would take much less time. This is similar to Paradox of Choice – the more choice you give people, the easier it is to choose nothing.

The more options a user has when using your website, the more difficult it will be to use (or won’t be used at all). So in order to provide a more enjoyable experience, we need to eliminate choices. To make a better web design, the process of eliminating distracting options has to be continous throughout the design process.

In the era of infinite choice, people need better filters! If you sell a huge amount of products, add better filters for easier decision making.

Effective Web Design Principle #4: Fitt’s Law

Fitt’s Law stipulates that the time required to move to a target area (e.g. click a button) is a function of the distance to the target and the size of the target. In other words, the bigger an object and the closer it is to us, the easier it is to use it.

Spotify makes it easier to hit ‘Play’ than other buttons:

They also place it (on the fullscreen Desktop app) in the bottom left corner, which is considered the most valuable real estate since the corners are technically the most accessible. This does not, however, apply to web design (due to scrolling and the way operating systems are).

It doesn’t mean that bigger is always better. A button that takes up half the screen is not a good idea, and we don’t need a mathematical study to know this. Even so, Fitts’ law is a binary logarithm. This means that the predicted results of the usability of an object runs along a curve, not a straight line.

A tiny button will become much easier to click when given a 20% size increase, while a very large object will not share the same benefits in usability when given the same 20% boost in size.

This is similar to rule of target size.

The size of a button should be proportional to its expected frequency of use. You can check your stats for which buttons people use the most, and make popular buttons bigger (easier to hit).

Let’s imagine there’s a form you want people to fill. At the end of the form, there are two buttons: “Submit” and “Reset” (clear fields).

99.9999% want to hit ‘submit’. Hence the button should be much bigger than ‘reset’.

Effective Web Design Principle #5: Rule of Thirds

It’s a good idea to use images in your design. A visual communicates your ideas much faster than any text.

The best images follow the rule of thirds: an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections.

Using beautiful, big images contributes to design as it is (not withstanding the growth of Pinterest), following this rule will make them more interesting and thus your website more appealing.

Effective Web Design Principle #6: Gestalt Design Laws

Gestalt psychology is a theory of mind and brain. Its principle is that the human eye sees objects in their entirety before perceiving their individual parts.

Here’s what I mean:

Notice how you could see the dog without focusing on each black spot that the dog consists of?

The key takeaway here is that people see the whole before they see the parts. People always see the whole of your website first, before they distinguish the header, menu, footer and so on. As one of the founders of gestaltism Kurt Koffka said: the whole exists independently from the parts.

There are 8 so-called gestalt design laws that allow us to predict how people will perceive something. Here they are:

1. Law of Proximity 

People group things together that are close together in space. They become a single perceived object.

With effective web design, you need to make sure things that do NOT go together, are not perceived as one. Similarly, you want to group certain design elements together (navigation menu, footer etc) to communicate that they form a whole.

Craigslist uses this law to make it easy to understand which sub-categories fall under “for sale”:

2. Law of Similarity

We group similar things together. This similarity can occur in the form of shape, colour, shading or other qualities.

Here we group black dots into one group and whites into another one, because – well, the black dots look kind of similar to each other.

3. Law of Closure

We seek completeness. With shapes that aren’t closed, when parts of a whole picture are missing, our perception fills in the visual gap. We see two squares overlaid on four circles even though none of these shapes actually exist in the graphic.

Without the law of closure we would just see different lines with different lengths, but with the law of closure, we combine the lines into whole shapes.

Using the law of closure can make logos or design elemets more interesting. A good example of this is the World Wide Fund For Nature designed by Sir Peter Scott in 1961:

4. Law of Symmetry

The mind perceives objects as being symmetrical and forming around a center point. It is perceptually pleasing to be able to divide objects into an even number of symmetrical parts.

When we see two symmetrical elements that are unconnected, the mind perceptually connects them to form a coherent shape.

When we look at the image above, we tend to observe three pairs of symmetrical brackets rather than six individual brackets.

5. Law of Common Fate

We tend to perceive objects as lines that move along a path. We group together of objects that have the same trend of motion and are therefore on the same path.

People mentally group together sticks or raised hands pointing somewhere, because they all point in the same direction. You can use this to guide the user’s attention to something (e.g. a signup form, value proposition etc).

For example, if there is an array of dots and half the dots are moving upward while the other half are moving downward, we would perceive the upward moving dots and the downward moving dots as two distinct units.

6. Law of Continuity

People have a tendency to perceive a line as continuing its established direction. In cases where there is an intersection between objects (e.g. lines), we tend to perceive the two lines as two single uninterrupted entities. Stimuli remains distinct even with overlap.

Effective Web Design Principle #7: White space and clean design

White space (also called ‘negative space’) is the portion of a page left “empty”. It’s the space between graphics, margins, gutters, space between columns, space between lines of type or visuals.

It should not be considered merely ‘blank’ space — it is an important element of design. It enables the objects in it to exist at all. White space is all about the use of hierarchy. The hierarchy of information, be it type, colour or images.

A page without white space, crammed full of text or graphics, runs the risk of appearing busy, cluttered, and is typically difficult to read (people won’t even bother). This is why simple websites are scientifically better.

Enough white space makes a website look ‘clean’. While clean design is crucial to communicating a clear message, it doesn’t just mean less content. Clean design means a design that makes the best use of the space it is in. To make a clean design, you have to know how to communicate clearly by using white space wisely.

Made.com does white space well:

The fine use of white space makes it easy to focus on the main message and visuals, and the body copy easy to read.

White spaces promotes elegance and sophistication, improves legibility and drives focus.

Effective Web Design Principle #8: Occam’s Razor

Occam’s razor is a principle urging one to select among competing hypotheses that which makes the fewest assumptions and thereby offers the simplest explanation of the effect. To put it in the design context, Occam’s Razor states that the simplest solution is usually best.

In a post about their Angelpad experience, Pipedrive guys say the following:

The Angelpad team and mentors challenged us in many ways. “You have too many things on your home page” was something we didn’t agree with at first, but we’re happy to test. And it turned out we had been wrong indeed. We removed 80% of the content, and left one sign-up button and one Learn More link on the home page. Conversion to sign up increased by 300%.

It’s not just about the looks, but also about ‘how it works’. Some companies – like 37Signals – have turned ‘simple’ into a business model.

Simple, minimal design does not automatically mean the design works, or is effective. But in my experience simple is always better than the opposite – and hence we should strive to simplify.


Effective web design and art are not the same.

You should design for the user and by having a business objective in mind. Using these web design principles you can get to aesthetically and financially rewarding results.

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website