Learn how to use visual design to communicate your research effectively to all kind of people.
This guide is driven by the idea that information should be accessible to as many people as possible with the least amount of effort needed to consume it.
It is centred around accessibility and simplicity.
You will learn about the following:
Before you design anything, it's important to take a step back and think about the project's complexity.
What are your goals? Who are you talking to? And, how do you want the audience to feel when they look at your design?
It's helpful to write down these insights and use them as a reference to evaluate your design along the way.
After defining the key objectives of your project, it's time to gather all assets like text, images, or graphics.
Do you have everything you need? Do you need to search for additional assets, or can you create them yourself?
Next, prepare your text by structuring, condensing, and rewriting it to include only the most essential parts needed to convey your key message.
Once text and images are defined, you can explore different ways to arrange them by sketching on a piece of paper.
It's beneficial to use just basic shapes and focus on the rough arrangement of elements. This helps you decide on one layout that you can then refine in detail.
There are people out there with different abilities, and we want to ensure we reduce friction for them to experience our design.
Present your content in a way that people of all abilities can understand with the least amount of effort needed.
To achieve this, make your content and design as simple as possible. Show what's needed, when it's needed. This helps everyone to consume your content with ease.
Focus on your key messages and remove anything that distracts from it, using plain language and a streamlined layout.
It's rare for something to be perfect the first time, and this is especially true for design. Always start with a first idea, then create variations to see if you can improve upon it.
Explore different designs and pick one that aligns best with your goals. Share it with the audience for early feedback.
The principle of arranging elements to show their order of importance.
Use size and position to create different levels of importance in your design.
When there is no visual hierarchy it is difficult for the viewer to understand what you want to communicate.
The area between design elements.
Use empty space in your design to give room for each element.
When there is no space between elements the layout feels dense and is harder to understand.
Most of your design will be written word, so it is important to make sure this is done properly.
In this chapter you will learn about the basic properties of typography and best practices on how to use them.
A typeface (or font family) is the design of letters, numbers and other symbols.
Using just one or two typefaces makes your design clean and harmoneous.
Using too many and inappropriate typefaces makes your design feel unbalanced.
A collection of text sizes and weights that are used in a design.
Having a small set of mathematically related text styles (for example a ratio of 1.2) helps you create visual hierarchy.
When there are many different text styles it is hard for the reader to distinguish between them.
The font weight sets the weight (or boldness) of a font.
Use bold font weights to highlight important elements and regular weights for body text.
When there is no clear hierarchy it is hard to scan the text. Also bold copy text is hard to read.
The size of characters in a piece of text.
Make sure your text is large enough for everyone to read.
When text is to small people have a hard time understanding what you want to communicate.
The way text is aligned to itself.
Using left aligned text reduces friction to read it compared to all other types of alignment.
Having centred or right aligned text makes it difficult for the eye to stay within a line.
The space between two lines of text.
Using narrow line heights for headings and wide line heights for body text.
When line heights are too wide on headings and too narrow on body text it is hard to read.
The number of characters in one line of text.
Having an appropriate text length that is not too wide or too narrow makes it easier to read.
When the line length is to narrow or too long it is difficult for the eye to find the new line.
The way you place elements in your design can have a huge effect on how people can consume it.
This chapter gives you a basic introduction on layout techniques and how to work with them.
The arrangement of elements in a straight line relative to each other.
This creates balance and guides the viewer through your design.
Having all elements positioned somewhere without relation creates a sense of unbalance.
A way of creating guides that help to align elements in a design.
A grid helps you to align elements properly and creates structure in your design.
Without a grid it is harder to align elements, which tends to create an unstructured layout.
The way you define the space you leave between elements.
With a spacing system you define the spacings that are allowed to use in you design.
Without a spacing system you might use different spacings which leads to an unbalanced layout.
Elements being placed near each other are perceived as belonging together.
Using the law of proximity helps users identify related pieces of information.
When related elements are placed anywhere, it is hard for people to find necessary information.
Elements that look similar are perceived as belonging together.
When related elements look similar, it helps people to understand your design.
It is hard for people to understand that elements are related, when they look different.
Elements that share a surface are perceived as belonging together.
When related elements share a surface it helps people to make sense of the design.
When elements are used without a purpose it can increase the effort it takes to understand a design.
Color is a powerful tool to create a certain mood and highlight important elements.
This chapter gives you a basic introduction on how to use color in your design.
A curated set of colors used within a design.
With a well chosen and reduced color palette your design will communicate one theme.
With too many colors, your text becomes hard to read and your design feels unbalanced.
The use of color to direct attention to specific elements in a design.
When elements are highlighted with color it helps people to identify the desired action.
When elements have color without a purpose it distracts people from their tasks.
The placement of text on images.
When placing text on images make sure that it is easy to read.
When there is text on complex images it is hard for people to read.
The contrast of the text and the background it is placed on.
When there is enough contrast on text, people can read it.
When contrast on text is too low, people can find it difficult to read.
Contribute
IndexEvery contribution, whether it's a suggestion, feedback, or code, helps refine this project. We value and appreciate your support.
View Project and Contribute