: Does flat design typically have gradients? I have a poster I'm working on and would you say that this poster resembles flat design a little bit? I would think that it kind of does because

@Michele215

Flat design tipically is... flat.

But flat design is a thrend, not a science, not a law.

There are some variations on the thrend. These come to my mind.

I. A flat projected shadow. This gives dimentionality, like a floating layer. www.google.com/search?q=flat+shadow+flat+design
II. Half shadowed (and some highlights). You can see this on a lot of avatars, where half the face has a darker color: www.google.com.mx/search?q=flat+design+avatar www.google.com.mx/search?q=ice+cream+flat+illustration
Your examples has a shadow on the hair. The blocks on the second image too.



Depends:

III. Adding gradients. This is relative. For example Google's Material design, which can be considered flat design, adds shadows that almost always is a gradient.

Some of the previous examples had a gradient on the shadow to simulate how it fades.

Probably a parameter can be: Linear monochromatic gradients are permited. Circular or gradients between 2 colors no. n_n

The knees on your image has a gradient that simulates a round object. That is not flat design. A gradient should be very subtile.



This next two could be not really flat design, just faking it:

IV. Adding noise. I can not find a good example.

V. Triangulating everything. It is not a flat design, but an effort to flat an image in flat solid color triangles: www.google.com/search?q=triangulate+images


Adding gradients and noise can compromise a flat design for example when making an animated gif. A purley flat design will make a good flat animation on an animated gif, but gradients and texture could need the usage of error difusion textures on the gif, blowing up the file size.

Vote Up Vote Down

@Michele215

Flat Designs typically have no directional lighting (directional lighting refers to the sun and any other artificial source of light like a flashlight).

The torso of the LEGO minifigure in the first image makes a good use of gradients to indicate the curvature of the model.


I also don't know how to determine if the cast shadow on an element
should be straight up and down or diagonal? As you can tell the cast
shadow is going "down" on the circles on the background and I have the
cast shadow going "diagonally" on the blocks.


The minifigure appears to be lit evenly from the viewers point of view whilst the bricks appear to be lit from a light source on the top-left of the poster, which is inconsistent with the general lighting of the composition.

Using the same techniques as used on the torso, you can shade the small bevels between the bricks and the studs on the brick to match the geometry.



P.S. The studs in the background don't align with the bricks.

Vote Up Vote Down

@Sarah814

This resembles some flat designs, but is not flat. Shades and gradients represent something 3D. Is the work intended to be flat - that should be known, if one wants to decide have you succeeded in keeping it flat. How well you have succeeded in your design, that is different than how flat this is.

If the purpose was to show that LEGOs are fun, then use perspective, gradients, shadows, highlights as you like and the customer, too.

If I imagine myself to be the customer or employer, I could politely say that "maybe all things should have 3D tricks equivalently, because I didn't order 3D Charlie in flat world - just for the balance!" But it's as possible to get "Nice work! I was afraid that I must pay licence fees to Lego Co. It's a big relief to find that you found this approach." I should know, what is the original goal to conclude whatlike comments are probable.

Flat design is a couterattack against all kind of smaller and larger details that try to make an illusion of three dimensionality for decorative reasons. Flat design supporters believe that presenting everything as flat


more easily quides the focus to the content, not the appearance
is more easily adaptable into different screen sizes and user interfaces
is artistically as demanding and valuable as 3D imitating designs


Flat design is an approach to represent things. It is: Representing the current space of observables choises and the messages without 3D imitations.

A Flat Design work should be based to a decision to be flat and the originally wanted content should be limited to those that can be represented as flat.

Flat cannot hold objects which need 3D imitations to be instantly seen, what they are. Considering this: LEGOs, clothes and hair cannot effectively be represented in flat if the idea is to show their 3D forms. Some other aspects can well be represented as flat, for ex. there is a big bushy brown hair, the boy has fun with his bricks and there are plenty of them, even the wall is a big brick.

Thus, if you're going to keep it flat, remove


gradients
shadows
perspective
all those compositional tricks that can be interpreted as "something is further and something is nearer".
the intent to keep 3D forms instantly visible


All presented should be possible to be clipped of coloured papers that are piled onto the table - maybe overlapping, but definitely not the narrow side downwards.

Gradients can be acceptable, if they are not making an illusion of depth. Unfortunately in objects from the real world that is in watcher's eye, so avoid gradients on clothes, hair, toys etc..

Conclusion: Have all the 3D tricks that you like, if nobody wants you to keep it flat. The final impression should be the one that was the purpose. The limitations of the final output media should be taken into the account, too because you may be considered to be the expert on this.

Vote Up Vote Down

@Murray976

I think this article from Designmodo lays out the principles of flat design clearly:


Flat design gets its name from the shapes used. Flat design employs a
distinct two-dimensional style that is simply flat.

The concept works without embellishment – drop shadows, bevels,
embossing, gradients or other tools that add depth. Every element or
box, from image frames to buttons to navigational tools, is crisp and
lacks feathered edges or shadows.


This is not to say your poster design can't use gradients, unless, of course, it specifically needs to be executed in the "flat design" style (i.e; project requirement requested from a client or professor). Hope this helps!

Vote Up Vote Down