Advantages of flat design from a developers perspective

The advantages and disadvantages of “flat design” have been discussed in thourough detail over recent months, but mostly from designers perspectives. I don’t want to flog a dead horse here and summarize once again why flat design looks awesome or horrible, instead I want to highlight some particularly nice advantages of a minimal design style from a front end developers perspective.

PSDs or Sketch files are much easier to “read”

Since flat design often includes dramatically fewer effects like shadows, gradients and other filters, there is simply less you have to take care of when transforming a design straight from Photoshop, Sketch or any other graphic design software into HTML/CSS layouts. Personally, when I design something in a minimal style I’m also using less “help layers” - layers that don’t really have a semantic sense, but are required to achieve a special effect because they are overlaying or masking other layers in some way.

Having a well organized design file without a wide variety of layer masks, layer styles and colour filters is pure gold. It dramatically speeds up the workflow of exporting assets and transforming layer styles into CSS.

Less assets in general

Since flat design is focused on the content, heavily depends on great typography and often uses a broader colour palette to increase contrast between different areas and interactive elements, we have to deal less with image assets such as background textures. Pretty much anything can be replicated with simple CSS or…

SVG assets and icon fonts

Due to simpler and minimal illustrations, we can make heavy usage of scalable vector graphics and icon fonts instead of jpg or png image sprites. This leads to real resolution independence and eliminates the need for multiple image sprites in different resolutions (usually normal resolution and doubled resolution for retina displays).

In addition, SVGs as well as icon fonts can be manipulated by simple CSS or JS, which allows us to create some really great looking animations (without the need of additional assets except some lines of code) and reuse the same asset in different environments simply by restyling it.

In most cases, using this technique leads to less required assets as well as smaller file sizes in general, which can drastically reduce performance and page load time.

Easier theming of interfaces

Let’s say your web application or website needs to support different themes a user can choose from. If you’ve ever created different themes for a skeumorphic design, you will already know that this can be an extremely time consuming task - exporting a whole new set of graphics and creating new CSS files to apply alternate or new effects requires a serious amount of additional work. With a flat design these problems are almost completely gone - in most cases you would just need to change some colour values (which becomes even easier when you are using a CSS preprocessor like LESS, SASS or stylus that supports CSS variables). Amazing!

Less hassle with older browsers

It's probably not worth mentioning, but in some cases we might still have to support old browsers that cannot handle stuff like CSS gradients and box-shadows. Since such visual effects do not appear very often in minimal designs, we don’t have to add so many fixes to make our sites look good on older browsers. Anyways, old problems might disappear but you can be sure to find new ones, for example scalable vector graphics do not work outside the box in Internet Explorer 8 and lower.

Conclusion

Overall, I think flat design can really speed up a developers workflow and make life easier. Despite this, a minimal design might sometimes not be the best option and there are other options to consider when it comes to designing and developing a modern web-site/app.