: What are the basic rules of "flat design"? I'm not a designer nor a graphics artis. But I wonder, are there any basic rules that can be applied to make for example diagrams or small illustrations

@Frith110

'Flat design' is just a trend really, and so the general rules of graphic design apply, including colour, proximity, contrast, form, balance, hierarchy etc. The thing that differentiates flat design is pretty much just using stark blocks of colour without any texture or depth. Maybe a subtle gradient, that's it.

IMO, your first example is nicer to look at. Though it gets a bit heavy on the gradients/shading on the arrow.

With your second one, the main points are the borders are inconsistent and much too thick for the text, and the arrow/tube around the arrow/'actor' box are really hard to tell apart (this could just be my monitor though). I think the aesthetics is about all I can crit because I don't know what an event-driven thread is.

By the way, don't take the above harshly. It's designed well enough in that it's easily readable and not overly cluttered. If I was wanting to know how an event-driven thread works, this would be well suitable.

Vote Up Vote Down

@Radia289

Adding to Surajck's answer, the issue with your example (as far as being "flat") is about shadows, borders, and also shapes.

Flat is not only about color, it's also about clean lines, and elements that look simple.

I modified your example a little, to show how I would make it flatter (this is a quick attempt, just to show some options):



I removed the round corners, simplified the mailbox shape and used only solid colors, no gradients. I also aligned the shapes. The result is a flatter, albeit a little dull, design.

Vote Up Vote Down

@Kaufman565

Many good 'flat designs' generally use color contrast (and only color contrast) to differentiate between various elements. That is the stand out feature.

Simple shapes will do the trick; no fancy shadows, depth, bezels, lights etc. Borders are not very aesthetic, like you can see in your image.

Stick to different shades of the same color for a theme. Use colors for objects that seem to convey their purpose, like green for GOOD and red for BAD.

Grays provide a good base color to paint static objects with, and color for dynamic elements.

A preferably thin sans serif font to go with the design.

Vote Up Vote Down