Jul 12

Living in Flatland: How to Create Website Themes Using Flat Design

Fri, 07/12/2013 - 21:00 — julie

flatdesignheader

As design trends change, it’s important to adapt our products to the new styles. Right now it’s obvious we’ve officially landed in Flatland. Everywhere you look there is an explosion of flat design styles.

With the release of iOS 7, we now have every major mobile operating system using a flat interface style. Apple was the last of the big three to make the shift, possibly hoping if they waited long enough the Microsoft-inspired “Metro” look wouldn’t catch on. It did.

This is the first installment in our ‘Trend Spotting’ series, where we highlight a trend in the Envato Marketplaces. Andy Wilkerson (Parallelus) is an Elite author on ThemeForest. Check out his latest item, Moxie – Responsive Theme for WordPress.

Follow the trend, or forecast the future?

It’s important for products to change with the trends, but we can’t forget to look ahead and remember, this new style won’t last forever. When you’re making updates to your designs, apps and themes, try to get a head start on the next phase of the trend to stay ahead of the curve.

It’s hard to forecast the future. As a designer, all you can do is find something that you like and works for your purpose, then apply it. Be prepared for criticism, because it’s a subjective industry, and know that you’re always going to be making updates to keep with the “now” because design never stops.

Apple themselves have recently received criticism. While normally the trend-setters, they’re currently behind the curve, having to follow the trend. Not everyone loves the new look, and Apple have already said the icons will be updated for the final release. I suspect Apple’s designers might have been trying too hard in an attempt to define the next phase of the trend.

ios7home

Where are the trends heading?

If I were trying to “evolve” the flat style, I would stick with bold, vibrant colors based on the direction things are going right now, minus the gradients. If this isn’t where the flat style is going, what is the next phase?

One possibility is the emerging 3D effects created with solid colors. The effect created by applying flat solids with polygon shapes is getting very popular, and might be something to pay attention to. There are some excellent abstract backgrounds being made with this effect.

I think a well-known use would be what Adobe did for their product splash screens in CS5, and evolved even more with CS6. The concept and style seems to be catching on. As the number of tutorials for creating these effects increases, I think we will see more products on graphics, themes and apps on the marketplaces using these styles.

cs6-splash

Updating your own items

What should you do to update your own products? I recommend you look around for inspiration, and see how others have innovated while still maintaining a look that is in line with the current trend. Use your judgment when deciding how much you should follow the trend or build on top of it.

The 100% flat and square style is at risk of a short life cycle, because it is easy to mimic. The challenge with something this simple is achieving elegance through typography, spacing, balance, weight and color. Those are the Jedi skills you need to do it well.

An overuse of this style could quickly feel “generic”. I’m hesitant to do something that exactly matches a current trend or style because it’s already outdated by the time you finish. That’s one of the great challenges of being a designer: A concept can never truly be finished because design is always changing.

Resources you can use when updating your items

If you’re adding a flat design style to your own items, there are plenty of resources around Envato that can help. Here’s a list put together by the Envato Notes team. Check them out!

Marketplace resources:

Tuts+ tutorials:

Further reading:

Copyright 2009. E-mail Me
Auto Spare Parts