Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Flat-design trend vs. shadows

Wednesday, September 18th, 2013 by Servage

Today most web designers prefer flat designs in their projects, along with long shadows for injecting fun and considerable impressions in the user experience. In this post, I discuss some aspects of long shadow designing, in brief.

Recently, Apple released iOS 7 and its main feature is flat design. Therefore, we can say flat design trends are gaining ground in web designing as well. To define flat design, we say that the design is without any embellishments like drop shadows, bevel, embossing, gradients and other depth adding elements.


There are certain advantages of flat designs. They generally have a distinct look and feel, where additions to the design are missing. Thus, flat design consists of simple elements, with a sense of minimalism that permits a user to interact freely with mouse or fingers in responsive web designing. Typography is also simple and matches with the flatness of the background; while colors, can be manipulated to be more 3D skeuomorphic via design, in order to achieve more alluring and vibrant effects.

Unfortunately, not all web design projects are suitable for totally flat design and instead need some hybrid approaches to make things work. Therefore, the web designer community has recently started using long shadows in their flat design projects. As a result, we can say that long shadows are current trends in modern designing.

Designing Long Shadow

We should have some clear concepts in mind to make effective long shadow designs. First, all long shadows rest at 45 degree angles and mirror an object. Consequently, it creates an impression in the design that puts emphasis on the objects via drawn-out shadows. In graphic design software, we can create a long shadow with tints of colors without any fading or gradients.

When designing long shadows, we should realize certain facts; such as, you can’t use different shadow angles in a single UI or a web page. This means if one element is showing a shadow at a right angle, then other elements can’t show a shadow at a left angle. The concept of shadow in design comes from photography, where a light source exists at a specific place and shades light from a single angle, so its shadow is resting only in a single and consistent opposing direction.

Unlike 3D designs, flat designs with long shadow are applied only to a limited number of elements to create a cumulative environment within a project. Therefore, in the field, you will find long shadows on icons and buttons and never extending outside the frame. Since long shadow design borrows from the flat design, it has all the elements we described above for flat designs, like simple shapes, clean design, lots of vibrant colors and minimalism in elements.

Another important thing in designing long shadows is the use of shadow colors, which basically show darker shades and hues that mirror the original colors of the shapes, but not the black or gray. Thus, mirroring flat designs gets more interesting with long shadows. Today most social media icons, such as Facebook, Twitter, Google+, Pinterest, LinkedIn, etc. come with flat designs using long shadows. Other popular web elements like instant messengers Skype, Gtalk, Safari icons, etc. are designed flat with long shadows.

Most long shadow generators are graphic designing software, like Photoshop, Illustrator, Fireworks, etc., but with CSS3 we can create long shadow effects on the texts and other elements.

To summarize, long shadow designing is nothing but an evolution of flat design trends. It allows many designers to hold a middle ground between creating eye candy and user friendly web designs.

References & More Reading

Design Trend: Long Shadows
Principles of Flat Design

Flat-design trend vs. shadows, 3.5 out of 5 based on 2 ratings
Categories: Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.