Servage Magazine

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

Common problems with flat design and their solutions

Sunday, December 28th, 2014 by Servage

flat-designWith flat design more and more websites look similar and it is hard to establish a brand differentiation. Moreover, keeping audiences exited and engaged with flat design is a tough job. Therefore adding spice in form of interactivity and animations using modern technologies like HTML5, CSS3, and some scripts may be a wise step to take.

Flat designs have been around since the early eras of the web, but their primitive form was often not acceptable. Flashy, highlighting and embossing designs were in demand, but their era is ending. We have now entered flat designing again, seeing it clearly with the new design releases in latest technologies and tools. In fact many claim iOS has triggered the recent flat designing craze. Recently even Google has caught the concept and leveraged it at a more advanced stage by introducing the Material Design concept for web and mobile UI. Under the hood of Material Design, Google has bolstered pen and paper concepts further onto the digital canvas.

Flat design is great

Flat design is great for the modern responsive web development community as it is eliminating the needs of Flash-like technologies for animations which are are cumbersome to create and load. Also heavy duty graphics with effects in Photoshop or Illustrator are obsolete. Now everything is possible in the pure web code using the latest HTML5 tags and CSS3 styling. Moreover, vector graphics or SVG images are paving ways to infinite scalability in graphics.

Problems with flat design

Every coin has two sides, and flat design also has challenges. For instance:

  • Uniqueness: Flat design makes everything similar or alike. You have reduced chances to differentiate your website’s look from the other websites or of your competitors’ websites even though you have customized them regarding features and functionality.
  • User experiences: Since all the elements on the screen are flat and look dead in one sense, building great and intuitive user experiences with them is hard.
  • Contexts: Due to the similar look, it is hard to illustrate different importance or state using flat design. You can choose differentiating colors, but old clearly different indicators like pressed/unpressed buttons tend to get more vague in flat design.

Animations may be your solution

Animation can bring life to the flat design without disturbing its core ideas or purposes. Animations are capable of adding spice in the aesthetics of the flat design website if done in smart ways. Looking at real world examples how animations can change the tough scenario of flat design and bring fresh life into modern responsive websites then Colin Garven’s submit button is a good example of a live UI element. This submit button is once pressed changing shape and converts into a circle that depicts the process going on, eg. loading. When loading is finished, there is a tick mark seen on the original button instead of text suggesting the successful completion of the submission process. This keeps users engaged and assured that something is going on the website so they keep patient.

In order to bring life into boring static flat designs, your don’t necessarily have to jump right to advanced UI elements and animation. Making use of modern CSS can already do a great job of improving your design. Rounded corners, gradients and maybe transitions will help you.

References & more reading


Common problems with flat design and their solutions, 3.0 out of 5 based on 5 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.