‘Almost Flat’ design is officially all the rage. But how close to flat do your UI elements have to stay to be considered ‘Almost Flat’?

About 2-8% away from flat.

I’m not going to go into the benefits of Almost Flat, but rather show my preferred method to creating almost flat assets.

Start with a flat shape of your desired color and create a duplicate shape on top. Set the duplicate shape color to white, the blend mode to multiply, and then add a gradient overlay in the blend options. Adjust the opacity to between 2 and 8 percent, and voila! Behold your gorgeous subtle gradient.

Another element that can be included is a subtle shadow. Shadows are used to reduce confusion when you have overlapping elements or want to create an ever-so-subtle ‘pop’ on a specific element.

Remember, it’s an ‘Almost’ shadow. Turn that opacity way down, try %20 to start. Check out the difference in shadow blur: with 2px offset, no blur produces a sharp look and a 6px blur adds subtle depth to your design.

Boom shakalaka. That flat shape is now ‘Almost Flat’. Pat yourself on the back for joining the movement.

Download the PSD used in these screenshots here!

Don’t forget to follow me on Twitter, Dribbble & Hunie!