Blog, WEM / WCM

5 Technical Benefits of Flat Design

“Simplicity [is] the art of maximizing the amount of work not done.” That is one of the principles from the Agile Manifesto and which also happens to be a pattern of flat design. Flat design has been a hot topic on the Internet for the past year. Let’s review some of the technical benefits of flat design and help you deduce why you should be using it for your web application. If you are more interested in general high-level benefits from flat design, refer to our article 5 Reasons to Use Flat Design for Business Success.

Smoother Animations

If you still insist on wowing your users, then you can remain to do so via Javascript or CSS3. Because flat design is lightweight, you will have more bandwidth and flexibility to do a vast array of amazing animations. This can be achieved using Javascript and its multitude of sleek libraries that won’t slow the browser down too much. You can even implement simple transitional animations with CSS3 that are also lightweight. Using these techniques will still allow your web application to load fast and the user won’t go over their data allowance, that’s always a plus.

Vector Graphics are Responsive

SVG (Scalable Vector Graphics) is an image format that is rendered in the client’s browser using stored values for all of its combined shapes. The same principle can be applied to a lot of different practices in the software industry such as drawing shapes in video games. Simply by storing the vertices (points) and the relationships between each one, the client’s browser begins a game of connect the dots, followed by adding color to the faces and edges created by the lines. Because the image is dynamically rendered every time it is used, it will be drawn to the precise size that you determine. This can allow your web application to have smooth and crisp lines on any device screen, hence being responsive.

Using Fonts as Assets

Say what? Remember the old font called Wingdings? Same concept, turn your simple UI assets into custom pictographic font characters. This allows you to place your flat, yet elegant, icons where you want them via a few simple keystrokes. These won’t automatically be responsive, but with minimal CSS, you can use different font sizes for your various supported device screens. An excellent example of this is a CSS toolkit called Font-Awesome which comes with a library of already created pictographic fonts. Welcome to the future, where we revert to using Wingdings.

Faster Conversion of Mocks

Since flat design is simpler than most design, it is much easier and quicker to convert mock-ups into fully formed CSS. To put some more icing on that cake, you can take it a step further and use Code Hints in the Brackets Text Editor to extract layers from PSD into CSS. And since it will be a simpler design, there will be fewer layers to convert resulting in reduced CSS which would also imply easier tweaking after your conversion.

Reduce Defects and Bugs

There are many ways that flat design can simplify your code and website, which is not only faster and easier development, but will also result in fewer defects showing up throughout development. According to Steve McConnell, the author of Code Complete, the density of defects increase with the size of a project. That means for every 1000 lines of code, the ratio of defects per line of code actually increases. This is a prime example of how simplicity can reduce the number of possible defects.

Conclusion

Fewer lines of CSS? Check. Fewer assets to handle? Check. Easier integration of Responsive design? Check. Improving your page performance? Check. It’s not just a trendy design style, but an incredibly well-calculated strategy that will benefit your development and design teams.

Darrin Johnson
Darrin is a Software Engineer and an Adobe CQ5 Consultant with a background in Quality Assurance. Technical language proficiency includes Java, C#, Javascript, HTML, CSS, and SQL. Additional areas of expertise include OOP, Agile Development, Android SDK, and ASP.NET. Prior to being at iCiDIGITAL, Darrin served as a Software QA Engineer.
View All Posts By This Author

Subscribe to Our Newsletter

Get the latest insights from Blue Acorn iCi

Let's build something together.