RUS / ENG

Flat design guide

byMADRABBIT

«IN FLAT» is an e-tutorial written by a practicing Illustrator designer for those who want to learn
how to draw actual commercial graphics
for web and animation.

In this guide I will tell you about the flat design in such a way that people who are far cry from design and illustration could learn the information easily, and people
who are live and breathe the design could get to know a lot of new things.

I will provide you with examples that will cover a topic better than any words.

Especially for beginners, the guide contains integrated video lessons with a detailed analysis
of the working process. Even if you are not familiar with the Adobe Illustrator interface,
that won’t be a problem.

06. Working with the color scheme

4/10

01
Working with the color scheme

This is over the odds: too many colors,

a lot of shades, all flashy.
The icon looks garish.
The number
of colors
should be reduced.

02
Working with the color scheme

Here we fill the most contrasting areas

of the shadow with the outline color.
We get rid
of two dark blue and dark red colors at a time.

03
Working with the color scheme

The number of blue spots in the composition
is reduced. The result looks much nicer
to the eye than
the original version.

04
Working with the color scheme

Get rid of blue, green and red.
Now there are three pure colors
in the color scheme:
yellow, red and blue.

05
Working with the color scheme

The gray color is removed.
The volume
is stylized by using
the points of the contour color.
Now the icon has recognizable elements and colors.

A lot of examples

Learning from your own mistakes is important, but it’s even more important to save time and learn from the mistakes of others.

The idea of the guide is built around examples of what is good,

what is bad, and what is more —
how you can handle the task


in a different way.

Usable format

Webinars are terribly inconvenient format of training: there are 10 units of student’s time per 1 unit


of the meaning.

The guide is deprived of this drawback: the information
is given briefly, concisely and there is an easy navigation through


the sections.

Updated content

I am against the classical model


of online studying when you pay, download lessons, turn in the task and then take the next step.

The content of the guide is constantly updated,

so that
my students could

remain
highly-demanded on the market.

In terms of stylized design the same
illustration can be made in different ways:

original, not very creative or frankly failed.

Let’s consider it by the example of the composition
of the phone
in the isometric projection.

Styling illustrations
You can do it, as the word is, «head on»: that is to have no issue with the volume and shape. In this case
the phone will look more like a brick.
That would be the lowest cost solution.
Styling illustrations
Or you can make the phone a little more volumetric
by adding a chamfer with a gradient. Looks cool.
For 2016 indeed.
Styling illustrations
It is better to stylize the volume by getting rid
of additional color elements as well as shades
for chamfer, eigenshadows and drop shadows.
The illustration will become more stylish.
Styling illustrations
But you shouldn’t forget about contrast while we work with the color scheme. Classic green on green background with a touch of lime is not the best solution.
Styling illustrations
However, if you get rid of the character’s head
on the plate

and leave facial features only, the situation changes dramatically.
The dark green color makes
a good contrast

to the lime background.
Styling illustrations
You can reach even more contrast if you use only
one color.

But there is no point to be bent on working with color


only as there are other graphic techniques in our range.

Styling illustrations
This is a simple and elegant solution. The visual weight
of the bulky drop shadow spot is reduced by the use
of formation.
The facet of the phone is stylized by shifting the white fill

just to the left of the contour.
Styling illustrations
It is possible to reach an interesting effect as in the above example by combining noises, textures and gradients which were considered as the legacy of the outdated skeuomorphism.

Despite its deceptive simplicity, the working process consists of a huge number of ins and outs
that may not seem obvious.

But the work is built on these very nuances.
And the guide is dedicated to them.

Topics covered:

Style

Stylistic techniques, trends,

forms simplification, development of the unique visual language,
objects
and characters design

Style

Volume styling

Working with light and shade,
volume simplification, design ways
of depth transfer, texture

Volume styling

Composition

Balance, visual weight,
working
with metaphors,
isometry, perspective

Composition

Color

Toning, colors mixing,
color schemes creation

Color

Student’s work

Stream 10, April 2018
Olga Olazhko
Olga Olazhko
Stream 7, January 2018
Evgeny Kaplin
Evgeny Kaplin
Stream 17, November 2018
Vladimir Mamontov
Vladimir Mamontov
Stream 6, December 2017
Denis Kuzhelny
Denis Kuzhelny
Stream 1, July 2017
Sergey Bayukov
Sergey Bayukov
Stream 18, December 2018
Alisa Schurova
Alisa Schurova
IN FLAT Гайд по плоской графике IN FLAT Гайд по плоской графике IN FLAT Гайд по плоской графике IN FLAT Гайд по плоской графике

Feedback

Olga Olazhko

July 30, 2018

Olga Olazhko / freelancer

I’ve heard about the guide in the blog on Medium. At the same time
I thought that I didn’t need a guide and classes because

I’m already a decent designer. In a while, I’ve decided to purchase
the guide + group classes after all, thanks to the advertising

techniques of Nikita.

That proved to be a useful and interesting experience. Illustrations are verified, information is systematized, texts are exact and there
is no superfluous information
(although I would like to read more about the character).

Kirill Semushin

September 2, 2018

Kirill Semushin / Flatro

This is a juicy takeaway of useful information with cool explanatory illustrations. Jokes aside, this manual is number one for all those involved in the illustration. And it doesn’t matter what your skill is, you will definitely learn something «fresh».
There are no analogues
of this in Russian and I don’t think
they will appear. Rabbit knows what
he does. Respect!

Valentin Kitchensky

December 13, 2017

Valentin Kitchensky / Monetizr

After the course I can confidently answer the question


«Is Mad Rabbit a knock-out?» Yes, he is! Alpha plus.

The information is a squeeze of all the most useful.

The presentation is excellent and everything is on point.
By personal example I was convinced how fast the investment
in self education pays off.

Fees and study options

IN FLAT
Guide

Self-tuition

Today:

100 USD

Pre-order price

THE PRICE INCLUDES:

unlimited access to the guide and video lessons;

access to the private Telegram channel with additional content

and analysis of students’ works;

access to the support chat.

MAD RABBIT

AUTHOR

MAD RABBIT

Designer, Illustrator, creator of the MAD RABBIT blog and Telegram channel. He likes rabbits and anonymity.

Clients: Megafon, Mail.ru, Youla.ru, Pyaterochka, X5 Retail Group, Kaspersky.