You know that the human brain is visually wired, and that we process visual information 60,000 times faster than we process text. You’ve read everything about the persuasiveness of graphics, and you most certainly know all the reasons why our brains crave infographics. Now when you think you are fully prepared to infographically convey every bit of content that was ever created, you see the real challenges.

A whole lot more goes into creating an infographic than just placing colorful and decorative components together. It works a lot like writing – you need a narrative, a structure, great presentation, and may be, an atypical perspective. Though there’s a ton of information about creating infographics, we decided to put together a short list of things you should avoid.

Not having a story
You may have reams and reams of data, but not having a story simply defeats the purpose of an infographic. Research and come up with a narrative that looks at the data in a way that it has never been perceived before. Set a mood and a theme to complete the story. It also goes without saying that the data you use must be accurate. Presenting the right data in a compelling fashion is what you should be aiming for.

Throwing in too many colors
As #TheDress goes, colors are everything.  However, too many colors, and the debate that ‘breaks’ the Internet will die before it even gets started. Stay with a neutral palette, picking two or three colors that suit the tone you want to set. There’s extensive research about the psychology of colors, at hand.
Try Adobe Color to create and save color themes of your choice.

Using mismatched fonts
Every font has a personality. Fonts have attributes that evoke an era, channel the masculine or the feminine, or create a certain mood. It’s best to use fonts with complementary moods and ones that belong to similar eras. You can also dabble with font sizes to highlight key words in a title. The key is to use typography as art, without creating a sense of dissonance.
Try Adobe TypeKit for some typographic inspiration.

Letting inconsistency creep in
Inconsistency can sometimes creep in without you noticing it. This is especially true of infographics that use complex data to tell an intricate story. Pay attention to any irregularities in the size and color of components that are related to each other; unless it’s a conscious attempt to have something stand out. The eye can effortlessly trace a path through your infographic when every element is created with a coherent style.

Cluttering and over-complicating
Simplicity goes a long way. A non-fussy infographic really works when you don’t want ‘the look’ to overpower the crux of the matter. Avoid including unnecessary details. If you have multiple interconnected stories to tell, clearly mark out your sections. Take special care with interactive infographics. Too many levels of complexity and you lose your reader. You want to counter infobesity, not feed it.

Flouting branding guidelines
The need for creativity notwithstanding, there’s not much leeway when it comes to branding. For all official communication, be vigilant when using colors, fonts, and logos. If you do have the opportunity to take an unofficial approach, take a starkly different approach and avoid a middle-of-the road design.

Using humor that doesn’t have a universal appeal
While Chuck Norris slams revolving doors, Rajnikanth scores 12 runs off a single ball. In other words, there could be a whole world out there that doesn’t get the joke, or worse, misinterprets your message. There’s a fine balance to be struck between a strong narrative and whimsical art. When in doubt, give out the facts, straight and simple. Or try some meta humor.
And if we were to be infographically speaking, here’s what you must avoid:

What not to do when creating infographics

Infographics seem to work because they engage both your left brain and right brain; increasing cognition. Balancing visual and textual input then becomes key. There are, of course, the outliers that break every rule and still do the job. Those pieces are works of art that manage to be appealing without being overwhelming. For the rest of us, there are the lists of do’s and don’ts.
Needless to say, this is not a definitive list. If you think that you can add to this list, let us know.

For more information, watch:

• Make an engaging infographic
• Infographic design – identifying the good the bad and the ugly

Illustrations by Rakesh Baidya

We managed to catch your attention with that headline, right? For a change, unlike most such headings, this one is true.

Adobe Creative Cloud makes creating interactive content navigation of the visual kind truly a breeze. All you need is some working knowledge of an included image editing application—Illustrator or Photoshop; take your pick—and Dreamweaver. You won’t be writing even a single line of code in the process; only copy-pasting it.

Seeing is believing, you say. Well, let’s get you started.

Beforehand…

Before you go any further with the steps described in the rest of this post, ensure that the authoring/publishing environment where you’ll eventually use the visual navigation aid supports raw HTML content. Also, figure out the maximum image width that the environment allows. If necessary, check with an admin. For example, the authoring environment that we’ll use for illustrative purposes in this blog post allows a maximum image width of 550 px.

Just in case you haven’t completely understood what we mean by “interactive content navigation”, you can see an example in action at Photoshop Help | A first look at the Photoshop workspace. Clicking a highlighted area on the screenshot opens up a learning content page offering more information about the relevant area of the Photoshop workspace.

There aren’t any additional prerequisites. You’ll simply start with a screenshot or an image whose areas you want to hyperlink to the appropriate content resources.

Here’s the end result that we will work towards; go ahead, click the labeled areas on the image:

Prepare the image in Illustrator or Photoshop

The Illustrator/Photoshop part of this workflow is fairly basic. All you need to do is define some highlight areas on the image that users will want to click. Notice the red transparent boxes in the screenshot? We added those boxes in Illustrator using the Rectangle tool, keeping the borders red—strokes weighing 3 pt and colored f20f0f—and the fills transparent.

That’s all there is to preparing the image. You could create those boxes using Photoshop if that seems easier to you.

Once you’ve added the image highlights, use the Save For Web command in Illustrator or Photoshop to save your image as a high-quality JPEG or PNG graphic. We saved the screenshot as Ps_CC_workspace.png.

Host the image

Before you begin working on the image in Dreamweaver, host it at a location where your readers can access it. If you’ll be adding the visual navigation aid to a live page eventually, you may want to have a public URL for it. We simply uploaded our screenshot to the Files area of this blog: http://blogs.adobe.com/contentcorner/files/2014/12/Ps_CC_workspace.png.

Create the image map in Dreamweaver

Now, we’re ready to add interactivity to the image. We’ll use a Dreamweaver feature called Image Maps to do so. Follow these steps in Dreamweaver CC:

1. Select File > New > HTML. Now, in the New Document dialog, select <none> in the Layout column and then click Create.
2. Switch to the Design view. Select View > Design.
3. In the Design view, select Insert > Image > Image. Navigate to a local copy of the image you created in Illustrator/Photoshop and click Open. If you’re prompted that you need to save the document first, ignore the prompt for now and click OK. Dreamweaver places the image in the Design view.
4. Switch to the Code view—select View > Code—and then look for the <img.../> tag in the HTML code.
5. Change the value of the src attribute of the <img> tag to the hosted URL for the image.
6. Set the width attribute of the <img> tag to the maximum width that your authoring environment allows. Set the height attribute proportionately.
7. Enter a text value for the alt attribute of the <img> tag. Your final <img.../> tag should look something like the following line of HTML:
   <img src="https://blogsimages.adobe.com/contentcorner/files/2014/12/Ps_CC_workspace.png" alt="A first look at the Photoshop workspace" width="550" height="300"/>
8. Switch back to the Design view (View > Design).
9. Select the image and then bring up its Properties (Window > Properties).
10. If you can’t see the Map area in the Properties panel, click the Expand arrow in the far bottom-right corner of the Properties panel.
    
    
    Alternatively, double-click right beneath the ID field in the Properties panel.
    
    
11. Select the Rectangle Hotspot tool.
    
12. Draw a rectangular hotspot on the image, closely aligning it with the corresponding image highlight you created earlier in Illustrator/Photoshop.
13. In the Properties panel, enter the target URL for the hotspot in the Link box. If you want the target page to open in a new browser window, select _blank from the Target pop-up menu. You can choose one of the other Target options if necessary. Here’s what they do.
    
14. Draw more hotspots. Once you’ve created all hotspots, switch back to the Code view (View > Code).
15. Copy the raw HTML code and paste it to your content page in the right location. And you’re done!

An on-page navigation example

Just as you used this workflow to create an interactive navigation aid linking to external pages, you can use it to simplify navigation within a page. In Step 13 of the procedure above, enter the relative location of the target anchor in the Link box—for example, #Mar_2015—and then select _parent from the Target pop up menu.

See Adobe Story Help | New Features Summary for an example of a primitive timeline implemented using this approach.

Don’t forget localization

If your content serves multiple locales, your organization’s localization teams might have to translate the image. Once they’ve translated the image, they’ll need pointers to recreate the hotspots for the translated versions. In most cases, it should suffice to change the value of the src attribute in Step 5 of the procedure above to the hosted location of a translated image.

While communicating with the localization teams, share the Illustrator/Photoshop source of your image and feel free to point them to this blog post for more information.

And that’s not all…

This blog post discusses two simple ways of implementing interactive content navigation. If you have ideas using this concept that could make content experiences richer, make good use of the Comments section below. We’re all ears!

Designer and illustrator Timothy Goodman uses Adobe Shape CC to capture and convert his drawings to vectors, saves them to his Creative Cloud Libraries, and then perfects them in Illustrator CC. You can too. Let’s help you get started.

What’s so great about vector
Unlike raster images, vector images are scalable. You can resize and transform them without any loss of quality.

Vector images look good even when they are made smaller or bigger

Get the apps you need
First things first. Get the apps you need. If you don’t already have Illustrator CC, check out the Creative Cloud plan that works for you and buy what you want – a single app or the complete toolset for creatives.

Adobe Shape CC is a free mobile app, currently available for your iPhone and iPad in English. Download Shape from iTunes App Store.

How Shape and other Adobe apps work together
Simply put, Shape helps you capture any shape as a vector and enhance them in Illustrator (or in Adobe Draw, Adobe Comp, and Photoshop).

You can store the shapes in your Creative Cloud library and share them with your coworkers. You now have a seamlessly connected workflow that will make you a lot more productive.

Let’s try some examples
Capture a shape that you like, enhance and use in your design

You often come across interesting motifs and shapes in the world around you – in Nature, in everyday artifacts. Stop and capture these motifs and shapes using Shape and save them as vector shapes in your Creative Cloud library. When you sit down to create with Illustrator or Photoshop, you can open these shapes from the library and use them in your design. Whether you are creating a design for a T-shirt, a mug, or a greeting card, these shapes will come handy. You will be able to scale, rotate, color, add intricacy, and more with these vector shapes and Adobe apps.

Watch Get started with Shape

Draw on paper, make it vector and enhance
 

When you get an idea about a poster, a book cover, or a greeting card, let’s say you are really quick with pen and paper. Go ahead and sketch out your idea on paper. With Shape on your iPhone or iPad, you can now capture the drawing and make it vector in one single step. What’s more, you can open the shape you have created in a powerful vector editing app like Illustrator and do wonders with the toolset in Illustrator.

Watch From sketch to poster

With Adobe Shape, everything around you can become something that you can use in your design. Play with Shape, make Creative Cloud and its many apps and services central to your creative process.

Learn more
Where ideas take shape
Common questions about Adobe Shape
Illustrator tool galleries
Use Shape tools in Illustrator

The ADIM Conference
Russell Brown has been hosting the ADIM Conference for many years. In previous years, I taught and assisted with lessons. But this year I went as an attendee to literally walk in the shoes of Adobe’s customers as they learn to use Creative Cloud apps. I manage a team of UX designers at Adobe who create many of the tutorials our customers use to learn our apps. As User Experience Designers, we need to regularly remind ourselves of what our customers face everyday when trying to use Adobe products.

Each year the conference has a different theme. This year’s theme was Shakespeare and the attendees worked on two projects: a Renaissance self-portrait and a book. For the portraits, Russell invited a fabulous photographer, Joel Grimes, to shoot using lighting similar to that in many Renaissance era paintings. Most everyone brought a costume to wear for their portrait. Russell brought three – Caveman Shakespeare, Renaissance Shakespeare, and Futureman Shakespeare.

The Costume
I started with some beautiful Indian sari silk that I had purchased in Bangalore, India while on a business trip. After doing some research on 16^th century clothing, I made a sketch of my idea. I decided to create a man’s costume based on the cross-dressing character Viola in Twelfth Night. It took me many weekend hours to create because I was mostly designing as I constructed. As you can imagine, I had to rip out many stitches and start over several times.

The Painting
Let me just say right now that I hate having my photo taken. I much prefer to be the one behind the camera instead of in front of it. I posed for the portrait photo along with everyone else and I really disliked almost all of mine. The only ones I liked were the ones where Russell photobombed the shot (dressed as “Caveman Shakespeare”). I returned later that evening and had the portrait reshot—this time wearing a stunning dragon mask created by costume-maker Robert LaMarche.

Once I had the photo, I started to play with it in Photoshop. We were taught several techniques on how to make your photo look like a painting. I discovered the Impression filters for Photoshop from TopazLabs and really liked them. I ended up experimenting for hours to create really cool painterly effects. Once my file was ready, it was printed onto textured, stretched canvas. I picked a gold frame, attached it, and voilá!—a framed Renaissance self-portrait made with Photoshop.

The Book
The book project had two parts. The cover was to be designed using Illustrator and because it was made of wood, it was laser cut by a Universal Laser machine. I LOVE using these laser cutters! It is so fun to design something in Illustrator and then output a three-dimensional object with incredible precision. Once the cover was finished, I started on the contents of the book.

For the inside of my book, I created a set of digital paintings with Photoshop that I printed onto heavy watercolor paper. I had created these paintings by using many of the portrait photos that Joel Grimes shot of the attendees. I chose to focus on the hands – as if it were a close-up view of a larger painting. These reminded me very much of my art history classes where the professors would show magnified views of different paintings and sculpture to discuss creation techniques and details.

The Renaissance – yet again
In 1987 I designed the first Adobe Illustrator packaging using Botticelli’s Venus as the base of the imagery. I did that because I felt that Adobe was part of a 20^th Century Renaissance with the advent of digital publishing and digital art. That was almost 30 years ago and it feels like another Renaissance is happening in the 21st century as well. Artists have so many digital and mobile tools and output options at their disposal that it’s a bit overwhelming. But at the same time, I find it a very, very exciting time to be an artist.

About the author
Luanne Seymour is a designer, author, and teacher who started working for Adobe in 1986, and has written several books for Adobe Press. She’s a nerdy designer who loves to solve crossword puzzles, sketch ideas on whiteboards, and take pictures with her iphone. She looks forward to the day when she has her very own Google self-driving car. She thinks that Lego instructions are absolutely brilliant graphic design.

Instagram: https://instagram.com/luanne.seymour/
Behance: https://www.behance.net/LuanneSeymour
Blog: https://luanneseymour.wordpress.com/