Feb 15, 2016

Flat Design for Presentations - Are you Missing the Trend?

What is flat design and how you can visually improve your slides using it?

Flat design is extremely popular among UI/UX designers who work on mobile apps and websites. Many of the popular apps you use are made using flat designs and colors. This post is a primer on flat designs and colors and how to use them in your presentations. 

Welcome to Flat Design for Presentations 101.

What is flat design?

Flat design is 'flat', which means it does not have any shadow, bevel, emboss and gradient (color becoming lighter / darker). No special effects - effects which were very popular few years back with designers. Flat design looks simple, minimalistic and it is the contemporary way of design. If your presentation is going to be viewed on mobile devices, flat design will do an even better job for you. More than anything else, it is about being in touch with the times.

Flat design is characterised by 3 main things
  1. Flat colors without any gradient and shadows
  2. Flat fonts: Big and bold sans-serif fonts
  3. Lots of empty space on the slide (to make the design come alive)  

What are flat colours?

To start using flat design in your presentations (for shapes, backgrounds, top bar and everything else), visit flatuicolors.com or flatuicolorpicker.comHere are a few simple samples of flat design for presentations. The difference between flat and not flat is not stark, but subtle. For the audience, the overall feel becomes lighter, contemporary, professional and hence likable. This slide is a normal slide made using colors from MS PowerPoint.

Below is the same slide done in flat colors. The difference is subtle. A light gray background has been added to make it easier on the eye. The orange has been replaced by a more softer and professional looking Alizarin (RGB code: 231, 76, 60). The black has given way to Midnight Blue (RGB code: 44, 62, 80).



How to use flat colors?

Instead of picking colors from MS PowerPoint (Shape Fill), visit the above website and choose a flat color. Note down the RGB code of the color and generate that color in PowerPoint. RGB stands for Red, Green and Blue. By mixing these three colors we can create any color. Here's how we can do it quickly:

Let us work with an example. Say you want to choose a flat color for a shape. Click on the box. Go to Format -- Shape Fill. Choose More Colors -- Custom. enter the code in RGB format and you are done. You have your first flat color in a presentation!



Flat colors are bright. The popular styles are Retro and Monotone. In monotone, we use different tones and shades of the same color.


I have taken this example from designmodo.com. It is an excellent place to read more about flat design. You can check out this this and this article for a lot of inspiration. To get the best look from a flat slide design - leave a lot of empty space. Use bold and big text.

What is a flat font?

Not all fonts go very well with flat designs. There are tons of fonts which you can use but to start your journey you may choose MOHAVE or ALLER for headers and CABIN for body. When you choose to go for a flat design for your presentation, write very few words per slide. Make the fonts big and leave a lot of empty space around the fonts.


That's all for now. I will continue to write more about flat designs and share more and more examples. If you have any question about flat design, just ask it below.