An infographic is an informative illustration, a graphical representation of information in the form of graphs, diagrams, or other illustrations. This document serves as support in designing infographics for Bebat.
It contains some examples categorised under different types of infographics. In addition, there are a number of guidelines that must be followed when designing new infographics.
Type of infographics
Bebat’s infographics can be divided into different types. Below is a list with accompanying examples.
A statistical infographic is the best choice to present survey results, data, or arguments.
The statistical infographic emphasises data. The layout and visuals help to tell the story behind the data. The visual support can take the form of graphs, icons, images, or eye-catching fonts.
An informative infographic is the best infographic for clearly communicating a new concept or giving an overview of a subject. Usually, an informative infographic is divided into sections with descriptive titles.
By numbering the sections, you guide people through the infographic. Illustrations can be added as visual support for the different sections.
A timeline is used to visualise history, to mark important data, or to display an overview of events.
Visual aids such as lines, icons, photos, and labels all help to mark and explain points in time.
Step-by-step plan & process
While a timeline infographic marks points in time, a process infographic is the best infographic for a summary or overview of the steps in a process.
Most process infographics follow a simple flow from top to bottom or from left to right. When it concerns a cycle, the information is placed in a circle to make it clear that it is a recurring process. By numbering the steps, your process can be easily followed. This is not mandatory, but it ensures clearer communication.
Comparisons are used to substantiate certain information in relation to each other. Depending on the amount of data, this may be displayed differently. Icons or illustrations help to show the context of the comparison.
Graphs can be used to display large pieces of data visually. These can be different types of graphs such as a pie chart, bar chart, etc., depending on the information you want to convey.
The intention is for the infographics to translate Bebat’s style well. For this purpose, a number of guidelines have been drawn up that will help us to do this translation as well as possible.
The infographics primarily use the main colours. If the main colours are not sufficient, the infographics and graphs can be supplemented with hues derived from the main colours.
Use the brand colours if the graph tells you something about the brand. If more colours are needed, use hues at farther points along the spectrum of the brand colour for sufficient contrast. This is mainly the case for charts in corporate applications.
Use the brand colours in combination with context colours if there are not enough hues or if multiple colours are desired. The different colours allows us to obtain a greater contrast. This can be the case with charts for students/schools to make these a bit more playful and pleasant for this target group.
- RGB rgb(162,147,135)
- HSL hsl(26.67,0.13,0.58)
- HEX #a29387
- CMYK 34-35-40-16
- Pantone Warm Grey 7 C
- RGB rgb(175,202,11)
- HSL hsl(68.48,0.9,0.42)
- HEX #afca0b
- CMYK 40-0-100-0
- Pantone 390 C
- RGB rgb(0,154,68)
- HSL hsl(146.49,1,0.3)
- HEX #009a44
- CMYK 94-2-95-0
- Pantone 347 C
- RGB rgb(143,173,21)
- HSL hsl(71.84,0.78,0.38)
- HEX #8fad15
- RGB rgb(196,214,0)
- HSL hsl(65.05,1,0.42)
- HEX #c4d600
- CMYK 33-0-100-0
- Pantone 382 C
- RGB rgb(99,89,78)
- HSL hsl(31.43,0.12,0.35)
- HEX #63594e
- RGB rgb(198,195,193)
- HSL hsl(24,0.04,0.77)
- HEX #c6c3c1
- RGB rgb(241,241,239)
- HSL hsl(60,0.07,0.94)
- HEX #f1f1ef
Titles and numbers are always placed in PF Beau Sans, the primary Bebat font. The remaining text depends from graphic to graphic. If the text is short, it can also be written in PF Beau Sans.
Roboto is recommended for better legibility of longer texts.