10 Websites with Data Visualization Driving User Experience

0 Comments

As an instrument for enriching user experience in website design, infographics have come into our life pretty much recently.

But that’s not the first time that developers used stats in personal portfolios or corporate websites to win over visitors with numbers. Take a look at Vintage Agency.

Along with impressive portfolio works, the team did not miss an opportunity to show off agency figures. Here, stats are skillfully incorporated, contributing to experience as well as perfectly matching the general aesthetics.

Data visualization

Data visualization is a tool to impress not only in an informative sense but also in a visual one, as part of the storytelling. For example, Corning Glass Class. It tells about the many properties of glass with a graphical approach. That’s what the first stages of data visualization in websites looked like in 2012.

The first steps of using data visualization

In comparison to Brand Love Score, it may look primitive. However, it was cool at that time.

The approach has improved by leaps and bounds. Consider Brussels Airport in Numbers. It is an online infographic where modern trends set the tone for everything. Subtle outlined iconography, smooth typography, vertical lettering, vertical lines and gorgeous photography take stats to the next level.

Online infographic where modern trends

As mentioned earlier, Brand Love Score is another representative example. It is an apotheosis of modern techniques brought of data visualization.

Modern techniques brought into data visualization

The project visualizes the content (such as insights and sentiments) taken from social media during Black Friday weekend. You are welcome to toy with it and explore tweets in a unique manner.

Impress your audience with animated websites and web presentations.

With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.

Create a Website

Not all contemporary uses of data visualization are as sophisticated and advanced as Brand Love Score. Consider The Software House and Campaign Monitor. These are representative “year in review” projects.

Not advanced contemporary usages of data visualization

The first uses a cosmic theme that is realized with the help of primitive graphics, huge lettering and dynamic effects. The team converts a summary into an engaging narration infused with figures.

Not advanced contemporary usages of data visualization

The second uses clean, simple aesthetics with a subtle high-tech vibe. It features traditional data visualization elements like charts and bars with clever, yet unobtrusive, animations.

These examples give us several hints as to how to incorporate data visualization into a website design and not ruin the experience.

  • Make numbers bigger
  • Use short sentences
  • Choose a clean or seamless background
  • Adopt a one- or two-tone palette
  • Use white space well
  • Split your screen into two imaginary parts, one graphical and the other informative
  • Ditch boring designs and go for an artistic approach; use beautiful iconography, elegant typography or fancy illustrations
  • Add dynamic effects; they make a difference these days

Basic Elements

The traditional instruments for graphical representation of data are charts, bars, lines and graphs. We have already plenty of these examples. Let’s explore maps and globes. They can be static or dynamic. Feel free to explore some impressive examples: Okela, ClarityFedex Soundtrack and Game of Canada.

Clarity relies on a live 3D globe visualization to make its point clear, to say nothing about the producing a powerful general impression. The globe looks outstanding.

The live 3D globe visualization

Okela reinvents a radial chart, giving it a fantastic makeover. Not only does it ideally blend in the clean and elegant aesthetics, but it also serves as some kind of a “conductor” to the portfolio pieces.

Radial chart as a basic element

If you are hankering for intriguing symbiosis between old and new, take a look at FedEx Soundtrack. It features a classic map vigilantly infused with modern techniques. Also, note the color scheme that is just gorgeous; it perfectly reflects the mood.

Map as a basic element

Charts can work in any environment when you put your heart and soul into it. Game of Canada is a perfect example.

The team has adopted almost the same approach as in the previous example. The map is an integral part of the experience; however, this time it is placed in a flat graphical entourage. Hit the pointers to explore the project that re-imagines Game of Thrones locations in Canadian settings.

Map as a basic element

Speaking of which, the next example is also for fans of George R. R. Martin’s fantasy novels. It is called Wind and Words. It is dedicated to the first six seasons of the popular HBO series. It collected data from the subtitles to vividly showcase interactions of each character.

Basic Elements

Other Ways of Using Data Visualization

How about a non-traditional way of using data visualization? Consider Red Bull Racing + Citrix. It feels top-notch and ultra-modern thanks to futuristic neon-like illustrations, a predominantly dark palette and fancy dynamic effects. Here, numbers are merely informative details.

Non-traditional way of using data visualization

Also, pay attention to Your Worst Short Haircut Story. It doesn’t look like a data visualization at first, but it represents a bad experience smartly. The design is just like it should be when you need to give the idea a central place. I use only three words instead of five allowed describing this project: funny, simple, ingenious.

Non-traditional way of using data visualization

Conclusion

The traditional tools of data visualization have evolved into solid instruments to entertain and enrich experiences. Of course, a creative attitude can’t take all the credit for this metamorphosis. There are several other important things.

First, graphical representation has improved. Charts look more like illustrations than dull mathematical sketches. Second, animations and dynamic effects change the situation. Third, WebGL, integration with social media and other advanced tools greatly enhance the approach. Finally, trends have impacted this type of design. As a result, we have replenished our toolkit with a sophisticated and matured solution.

What do you think about such projects? Do you use data visualizations?

Nataly Birch

Nataly is a web developer from Sevastopol, Ukraine with a passion for WordPress and IT writing. She runs her own Land-of-Web where she shares helpful stuff, articles and tutorials.

Posts by Nataly Birch
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree