Interactive Infographics

Let’s be honest, nobody wants to stare at their computer screen forever reading facts, information, charts or what have you in order to understand a point. It’s monotonous, taxing, and just plain boring to try to digest information this way.

Cue interactive infographics!  

An infographic is exactly what it sounds like—information displayed in more interesting, graphic terms. It can be an illustration, photograph, animation, or other visual way to represent a topic. Infographics not only make facts and information easier to digest and comprehend, but they also add a level of entertainment for the user. Interactive infographics are a balance of visual (graphic) and kinetic (interactive) learning that encourage engagement in order to make sense of the information at hand.

This blog on Creative Bloq lists some additional resources and tips to keep in mind while creating interactive infographics in order to maintain the reader’s interest and make the information as easy to understand as possible. Some of the tips are as follows:

  1. Understand the psychology: it helps to have a clear idea in your head of the purpose of your infographic before you start designing. Why and how would an infographic be the best way to display the data?
  2. Add spice with scrolling effects: if scrolling is required, make it fun for the user! Add transitions, animations and other subtle effects that draw the users into the story you are trying to tell and make them want to stick with it to the end.
  3. Make multiple pages for easy digestion: if the information has more distinct sections, it would be beneficial to create a multipage interactive infographic. This allows users to move through one section of information at a time to comprehend gradually, or simply skip to a specific area of interest.
  4. Let users highlight certain areas: this is helpful when there is a large amount of information so the viewer can focus in on what they want to see. This feature is helpful to minimize confusion for a user who is easily overwhelmed or distracted by a ton of information.
  5. Make clicks and rollovers reveal further detail: Instead of looking at an extensive chart or graph, users can hover over certain areas to reveal the specific information they need.
  6. Encourage user participation: some infographics encourage the user to input their own information to display personalized facts or data. It’s compelling for a user to see a more individualized and unique display of information when they know they had some sort of influence in it.

For example, Arnold Clark’s infographic uses simplistic graphics to deliver the information at hand in a relatable way. It’s a good example of using scrolling effects to add interest and keep a constant flow of information. If the user needs to stop the animation at all, they can do so with the scroll bar and arrows and even scroll at their own pace. There is also a link in the lower right hand corner that is always visible and available for the user to click to get more facts about the challenge in a static format.

Arnold Clark Savings Challenge

Another solid example of an interactive infographic is the Evolution of Insight, which is an interactive timeline. It not only displays the information in a more pleasing way, but it also portrays the setting of the era in the background, which is an additional visual element to help comprehend the overall feeling of the time period. The viewer can use the arrows to move along the timeline to gain information sequentially, or they can skip ahead to a certain era by clicking on the timeline below. Even if they skip ahead, the background still displays the setting shifts throughout the years, so the scene flows and they can be sure not to miss anything important.

Evolution of Insight

As we see a shift from static infographics to interactive infographics, will be plenty of great examples out there to find inspiration. Interactivity makes information more easily understandable, relatable, and exciting for the audience.

Advertisements

E-Cards

E-cards are digital versions of cards that are sent online. They often involve some sort of movement or animation to add an extra element of interest for the viewer. E-cards can be used for solicitation purposes, holiday wishes, general greetings, or sending other information.

Solicitation

E-cards are a good source for solicitation because they can provide a variety of information in an interesting, fluid way and they often lighten the mood to make the ask for something such as a donation.

Like many other colleges and universities, Columbus School of Law sends out solicitation e-cards to alumni around the holiday season asking for gifts. This one from 2013 is a successful example of how a solicitation e-card should be. The text is legible, easy to read, displays long enough and is worded in an appropriate manner for the message to get across without being too obtrusive. The e-card is consistent in its design throughout the animation and the audio compliments the tone. It also has links available to make a gift, visit the alumni page, and connect with them on social media, as well as the option to replay the video at the end. All of these elements combine to send a clear and effective message.

Solicitation

Thank You’s

JibJab is a great resource for e-cards. They have multiple different categories to choose from for holidays, celebrations and just regular greetings. The element that makes their cards fun and successful is the fact that you can personalize them. Many of the templates allow you to upload your own pictures so that your face, or the face of someone you choose, is featured in the animation. That is why their thank you cards especially are so strong. Allowing the receiver to see your personal touches makes the message more individualized and meaningful.

JibJab        Thank You

Emotions

Just like paper cards, e-cards are successful at fostering different emotions depending on the occasion. Some of the tones that e-cards can convey include:

Humor

Who wouldn’t want to receive a birthday card with dogs barking and singing the happy birthday song? The imagery, audio and overall concept of this birthday card makes it happy, playful and funny.

Humor

Inspiration

Sometimes people need a little motivation to keep them going. This e-card is a fun way to send a little inspiration someone’s way to cheer them up. The combination of the audio shift, the typography and the turtle’s actions provide a sense of motivation and perseverance.

Inspiring

Empathy

Sometimes fun, playful, humorous cards are not appropriate for the situation. With the proper audio and text, e-cards can take on a more serious tone and be used for more sentimental purposes, like sympathy or empathy.

Empathy

As you can see, e-cards can be used for a variety of purposes, from solicitation to greetings to sharing information. There are many online resources you can use to choose, personalize and send your own e-cards for whatever purpose you see fit. Or you can always try your own hand at creating a one-of-a-kind e-card from scratch!

Web Banner Advertisements

It’s hard to go on the internet at this day in age and not see some sort of banner advertisement on your screen. However, we’re moving past those days of tacky, annoying and intrusive banners that get in your face and ruin your browsing experience and you wish would just disappear. Web banners are improving and renewing their purpose. When designed well, they provide a great opportunity to showcase creativity, catch people’s attention and get them to interact positively with the message.

This helpful post on Bannerflow explains “Display advertising itself has evolved from mere static images to one of the biggest branches of online marketing that incorporates a whole spectrum of technology from video to rich media ads and more.” This method of advertisement can be exciting, playful, humorous and interactive. This blog on MonsterPost has tons of examples of successful banner advertisements to show how this field of media is changing and developing positively.

Web banners can be appear in all different sizes, as shown in the JMCA Media Ads chart below.

banner size chart

If you’re looking to create your own web banner advertisement, here are some basic things to keep in mind:

Keep it simple: Too much information can become overwhelming and hard to grasp. Many good designs are clean, simplistic and straightforward to get the point across.

Limit duration: Any animations or movements should be limited to 15–30 seconds maximum. Your viewers won’t want to sit there much longer than that, and you’ll lost their attention before you get to your final point.

Consider readability: Don’t include too much text and consider the font size as well, make sure nothing is too small to easily read. If you have moving text, make sure it displays long enough so it can be read through twice in order for the reader to grasp the information.

Separate yourself: Your banner should have defined edges so that it doesn’t blend into the content of the webpage. Find the balance to help it stand out on its own, but not be too intrusive and tacky that the viewer wishes it would go away.

And please please please don’t forget basic design principles to avoid creating something like this…

ugly banner

Check out a helpful presentation on Slideshare for more in depth tips with visual examples to help you create a successful web banner.

Inquiries about jQuery

jquery

Keep hearing about jQuery and have no idea what it is? I’m here to help. jQuery is a the most popular JavaScript Library, meaning that it is a collection of functions of JavaScript. JavaScript is a language that tell things in a code how to function, and with jQuery, JavaScript is used to select, a.k.a. “query,” elements and then tell them what to do. jQuery is advantageous to use because it is free, open source, easy, and there is a lot to choose from within the library. There is a large jQuery community that provides tutorials, explanations, and support. I know this can all be a little confusing, but just stick with me.

It makes sense to use jQuery if your platform for your project already includes it, like on WordPress or Drupal. It is also useful if you want to use plugins relevant to what you are trying to accomplish on your website, since jQuery is so available and easy to use. jQuery can also be used to create compatibility between JavaScript and Internet Explorer. Sometimes JavaScript is not supported on this browser, so jQuery can step in and make sure it works. It also makes JavaScript shorter and easier to read and understand.

To use jQuery, you have to download the file of the version you want to use. The file encompasses the code that you need. You would then have to point to your file, either by embedding the code directly in your html, or linking to it externally. The mark up to reference the jQuery is typically located either in the head of the document or at the end of the body. The end of the document before the closing body tag is typically preferred. Then you would write your own scripts to tell it specifically what you want it to do.

There are multiple resources out there that recommend useful jQuery plugins. One such helpful site is creativebloq.com, which lists multiple different plugins and their uses. One plugin from this resource that I find really interesting is Tubular, which lets you set a YouTube video as your page background that keeps playing. This would be a visually dynamic way to capture that attention of your audience.

Many plugins can be found directly on the jQuery library website,  jQuery.com. Two useful ones are Colorbox and Magnific Popup. Colorbox is a lightbox plugin that supports pictures and slideshows. What’s nice about it is that it doesn’t require changes in the HTML and can be styled through CSS. Magnific Popup is another lightbox-type plugin for images, videos, galleries, etc. It’s usefulness comes in its small size and compatibility, making it fast and efficient. It’s also responsive and mobile friendly, which is a great feature for web design nowadays.

Another resource with great jQuery plugins is npmjs.com, which had jQuery packages and plugins. It has anything from Cascading Dropdown menus, where one dropdown is dependent on the value of the previous dropdown, to AnimateTimeline, which you guessed it…allows you to animate a timeline. Imagine that! This could be really interesting and useful when trying to communicate a series of events.

Start exploring and see how jQuery can enhance your website!

“Visibility is a Trap”

Social media theorist, Nathan Jurgenson, came to speak at Stevenson University last night as our Artist-in-Residence for the spring semester. Let me just say first and foremost that his talk was not quite what I had expected. Our previous Artist-in-Residence’s that I have attended have been by illustrators, photographers, graphic designers, and the like. They usually talk to us about their projects, inspiration, creative thinking, and their design processes.

Now we have this sociologist who researches for Snapchat come into the mix, and he talks to us about social media. But he didn’t necessarily talk about the design of it in terms of layout and typography and what have you. He spoke in more indirect terms, by means of the theory behind it all. I ended up leaving the banquet room slightly mind blown.

The main point of his talk was “on the trappings of social media visibility.” We put our lives out on social media, and this makes us more visible to the world today in different ways than we have ever been before.

He informed us about a circular style prison, called the panopticon. The structure of this consists of a circle of cells all facing inward, and then a guard’s tower in the middle. This puts all of the inmates on display all the time, and they will behave differently whether a guard is there or not because of the notion that someone might be watching. It operates on the idea that people act differently when they know they’re being watched. The point of all this was that Nathan Jurgenson sees social media as panoptic—the few are watching the many, and because of this people are going to behave differently.

He went on to say that the panopticon is not the only way to understand the trappings of your online visibility. Social media can trap our identity. Social media sites such as Facebook and Twitter were created around listing our identity in a stable profile. We post something, share something, list our interests and it all remains there. Posts build up and soon our past is trapped there on our social media profile. He sees storing the information of our past as limiting to who we can become in the future.

I found the points about the panopticon and our identity along with the couple others that he mentioned really interesting because I had never really considered social media as trapping before. But it’s true. All of our information is out there for people to see. We define ourselves by our followers, our likes, our favorites, etc., and this limits us in the long run. We live our lives looking for what will make a good post or a popular tweet. We “see the present as a potential future past” and want to freeze moments on our profile for everyone else to see. But it doesn’t have to be like that, and it shouldn’t. Visibility is not necessarily the trap, it’s what we do with it that defines it.

Designing for Social Media

Social media is a growing component of the web and our everyday lives. Rarely do you meet a person nowadays who does not utilize at least one type of social media site to connect with other people or follow interesting topics. The growth of social media creates the perfect opportunity for companies to reach a large number of consumers. If utilized to its full potential, social media can become an essential marketing tool for a company, organization, group or individual. A big part of this lays in the success of the design.

Trends change often and are big influences in social media and their design. Some upcoming design trends to look out for on social media profiles include:

  • larger scale higher quality images. These are eye catching and often display as banners or backgrounds on company profiles. Notice how JetBlue uses one to showcase their airlines on Twitter.

jetblue twitter

  • the expansion of simple line drawings and flat design, often in the form of infographics. Simplicity is where it’s at. It makes things seem more clean and straight forward. Oreo utilizes flat design on their social media.

oreo twitter

  • improved typography, including bold fonts, unique typefaces and established hierarchy to create stronger statements, like on Eat24’s Twitter.

eat24 twitter

Check out more creative trends that are predicted to impact the design world on HubSpot Blogs.

Social media is pointless for a company unless they acquire followers and develop a fan-base. A few ways to gain followers are:

  • post often and mix it up with images, videos, links, and text. Make sure you take time to respond to your followers as well. People like when a company is engaged in social media and create a conversation with them, like Nature Box did with me and my friend on Twitter!

nature box convo

  • use incentives to get them to follow. Create hidden elements that are only visible to followers to make them want to unlock everything you have to say or offer certain deals only to followers. Wendy’s did this a couple years ago through Twitter, asking for follows and participation to unlock special prizes and they found success!

Wendy's twitter campaign

Learn more about obtaining followers on HubSpot Blogs.

Once you have a solid following, you need to constantly engage consumers to keep them interested in what you have to say and what is going on. A couple strategies that have been successful in keeping followers engaged include:

  • using pictures in your posts. According to Social Caffeine, photo posts get 53% more likes, 104% more comments, and overall 120% more engagement. Starbucks often posts pictures of their products, gaining thousands of likes, favorites, retweets, and shares.

starbucks twitter

  • launch campaigns via social media. All your followers will see it, share it, comment on it, and spread the word…especially if you specifically ask for their participation and a response. Everyone remember the ALS Ice Bucket Challenge?

ALS Ice Bucket Challenge

Read up on more strategies for engaging your followers at Social Media Examiner.

When all of these elements are designed to work together, a company can make a huge impact through social media. Pizza Hut and Sharpie are examples of companies that have found success through well-designed social media accounts that have been utilized to their full potential. They each have millions of likes on Facebook and hundreds of thousands of followers on Twitter. Pizza Hut uses consistent high quality imagery and similar messages across both platforms, reinforcing the brand image. They use humor and play off of trends and hashtags to relate to their fans. Sharpie creates a different feel for each site, but still has consistent elements, like to logo, to make it all relate. They utilize a mixture of videos, images, and fan interaction to engage consumers. Check out their sites below:

Pizza Hut Facebook and Twitter

pizza hut facebook

pizza hut twitter

Sharpie Facebook and Twitter

Screen Shot 2015-02-28 at 3.02.13 PM

sharpie twitter

Good design can go a long way, even on social media.

What is a CMS?

CMS stands for Content Management System. Lynda.com describes a CMS as “server-side software that is designed to simplify the creation and maintenance of sites.” Basically, this type of system is built internally and allows for easy content management and modification as well as user uploads without extensive technical know-how. This makes a CMS perfect for sites that require regular edits, updates, and posts.

If the project calls for CMS management, there will most likely need to be a training process to teach the client the ins and outs of the workflow. This is the case for many freelance designers creating complex sites for clients who then need to hand over the management. A CMS is not always the answer to everything. Every project should be evaluated to see if this would really be the right fit or not.

As with any type of design software or framework, there are certain benefits and drawbacks that come with. The benefits of using a CMS have been stated before. They are easy to install, easy to modify content, and simpler in terms of technical skills (one does not need to know HTML and CSS to manage). That means you can update them yourself and don’t have to way on your design team to send out posts! Most of them have the ability to add tags, which allows for good search engine optimization.

On the down side, the systems need to be managed and updated regularly in order to stay secure. Again, you should evaluate your need for a CMS, otherwise your whole experience with it could turn into one big negative. Sullivan and Wolf Design offers some good insight into different aspects of a CMS and how they could be either pros or cons, depending on your situation.

There are three major web content management systems available today—Drupal, Joomla!, and WordPress.

Drupal, Joomla, WordPress logos

WordPress is currently the largest CMS, powering over 25 million sites. It’s designed with a blogging format and is easy to use. It uses categories and tags to organize content, and this also increases search engine optimization—a feature that is prominent in each of these systems.

Drupal on the other hand isn’t designed with any assumptions in mind. This allows for more flexibility, but requires more technical skills to manage.

Joomla! can handle complex sights and manage the heavy traffic that large sites can bring. However, it’s not as flexible as Drupal.

Each of these systems has a solid community behind them. You can learn more about the features Drupal, Joomla!, and WordPress here in order to make comparisons for what you are looking for.

I will soon be trying my hand at creating a CMS website through WordPress. One thing that I learned that drew me to WordPress was the availability of their themes. You can pick from tons of free themes that act as templates for you to adjust and customize as you see fit. I’ll let you know how it goes!