Alternatives To Typical Technical Illustrations And Data Visualisations
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Click here to kickstart your project for free in a matter of minutes.
Check the frontend report!
Take a break with a 3D game built on Netlify!Good technical illustrations and data visualisations allow users and clients to, in a manner of speaking, take time out, ponder and look at the information in a really accessible and engaging way. It can obviously also help you communicate certain categories of information and data.
The aim of the article is to inspire and show you how, by using different technical illustrations and data visualisations, you can really engage and communicate with your users and do much more good for the surrounding content.
Below are interesting and not commonly seen examples of technical illustration and data visualisation, that show data and information. As you know, more commonly seen examples are bar graphs and pie charts, but there is so much more than that!
So, keep reading and looking at the following examples, and I will show you some really cool stuff.
Technology
Typically, technical illustration and data visualisations were done using paper, pens, pencils, compasses, and rulers. But now everything is possible — you can do analog and digital. Since the mainstream introduction of the internet, around 1997, data (text, numerical, symbol) has flourished, and it has become the current day gold currency. It is easy for anyone to learn who has the software or knows the coding language. And it is much easier to do technical illustrations and data visualisation than in previous years. But that does not always mean that what is done today is better than what was done before.
What Makes Data And Information Good
- It must be aesthetically pleasing, interesting, and stimulating to look at.
- It must be of value and worth the effort to read and digest the information.
- It must be easy to understand and logical.
- To convey ideas effectively, both aesthetic form and functionality need to go hand in hand, as Vitaly Friedman in his article “Data Visualization and Infographics” has pointed out.
- It must be legible and have well-named and easy-to-understand axes and labels.
- It should help explain and show data and information in a more interesting way than if it were presented in tabular form.
- It should help explain or unpack what is written in any surrounding text and make it come to life in an unusual and useful way.
- It must be easy to compare and contrast the data against the other data.
The Importance Of Knowing About Different Audiences
There are some common categories of audiences:
- Expert,
- Intermediate,
- Beginner,
- Member of the public,
- Child,
- Teenager,
- Middle-aged,
- Ageing,
- Has some prior knowledge,
- Does not have any prior knowledge,
- Person with some kind of disability (vision, physical, hearing, mobility).
Sara Dholakia in her article “A Guide To Getting Data Visualization Right” points out the following considerations:
- The audience’s familiarity with the subject matter of your data;
- How much context they already have versus what you should provide;
- Their familiarity with various methods of data visualisation.
Just look at what we are more often than not presented with.
So, let us dive into some cool examples that you can understand and start using today that will also give your work and content a really cool edge and help it stand out and communicate better.
3D Flow Diagram
It provides a great way to show relationships and connections between items and different components, and the 3D style adds a lot to the diagram.
Card Diagram
It’s an effective way to highlight and select information or data in relation to its surrounding data and information.
Pyramid Graph
Being great at showing two categories of information and comparing them horizontally, they are an alternative to typical horizontal or vertical bar graphs.
3D Examples Of Common Graphs
They are an excellent way to enliven overused 2D pie and bar graphs. 3D examples of common graphs give a real sense of quality and depth whilst enhancing the data and information much more than 2D versions.
Sankey Flow Diagram
This diagram is a good way to show the progression and the journey of information and data and how they are connected in relation to their data value. It’s not often seen, but it’s really cool.
Stream Graph
A stream graph is a great way to show the data and how it relates to the other data — much more interesting than just using lines as is typically seen.
3D Map
It provides an excellent way to show a map in a different and more interesting form than the typically seen 2D version. It really gives the map a sense of environment, depth, and atmosphere.
Tree Map
It’s a great way to show the data spatially and how the data value relates, in terms of size, to the rest of the data.
Waterfall Chart
A waterfall chart is helpful in showing the data and how it relates in a vertical manner to the range of data values.
Doughnut Chart
It shows the data against the other data segments and also as a value within a range of data.
Lollipop Chart
A lollipop chart is an excellent method to demonstrate percentage values in a horizontal manner that also integrates the label and data value well.
Bubble Chart
It’s an effective way to illustrate data values in terms of size and sub-classification in relation to the surrounding data.
How To Start Doing Technical Illustration And Data Visualisation
There are many options available, including specialized software like Flourish, Tableau, and Klipfolio; familiar tools like Microsoft Word, Excel, or PowerPoint (with redrawing in software like Adobe Illustrator, Affinity Designer, or CorelDRAW); or learning coding languages such as D3, Three.js, P5.js, WebGL, or the Web Audio API, as Frederick O’Brien discusses in his article “Web Design Done Well: Delightful Data Visualization Examples.”
But there is one essential ingredient that you will always need, and that is a mind and vision for technical illustration and data visualisation.
Worthwhile Practitioners And Links To Look At
(yk)
