The Flat Design Trend

The design trend predictions for 2013 have played out nicely and responsive web design has championed many a debate on the current state of play in web design. Amongst those forecasts were larger typography, full screen photographic backgrounds, parallax scrolling and CSS3 animations to name a few. More recently, the flat design trend has climbed the ladder of popularity.

Love it or hate it, flat UI design is the current cool kid on the block and will be for some time to come. Since Apple unveiled the latest on iOS7 and their new operating system Mavericks, blogs, social media and forums have been quick to declare their thoughts on the subject. Some are in favour of the aesthetic design principles that lies at the heart of flat design, while others see it as a design fad and a step backwards in user interface development.

Apple arguably set the design trend these days but it was in fact Microsoft who brought it to the forefront with Windows 8 and Surface. With the use of their Metro UI with the ill fated Zune, Microsoft soon made the design transition to the XBox then later Windows. A focus more on typography and less graphics, Metro UI laid some of the foundations for direction in which flat design is taking.

Other development teams such are getting on the bandwagon. One such migration to both the world of frameworks and UI design for the masses is Yahoo! They recently launched Pure - a CSS framework that embraces flat design. No bevel edged buttons to press, just simplicity as it would appear on the screen. It even incorporates functioning into the ever popular Twitter Bootstrap.

Flat Design Principles
Flat design currently limits the use of gradients. Background gradients and buttons are on the decline in favour of keeping things slick. This mostly ties in with responsive design as a whole - each field complementing each other in some way to make sites run faster, efficiently and still maintain a similar design aesthetic across the board.

As gradients and shadows add definition to page elements, a decent colour palette needs to be chosen. The trend at the moment tends to be big, bold and bright colours to differentiate between each other. This can work in many cases but acknowledging basic colour theory of complementary, compounds, triads, etc… is just as important. It cannot be overlooked just because things are being made simpler.

Simplicity and Minimalism
While flat design insinuates simplicity, it can be quite complex at times. It can get very cluttered and confusing if colour or typography are not configured correctly. As texture is not as apparent in flat design, its important to keep an eye on distinguishing between the elements on the web page.

Is flat design minimalistic? Yes and no. Yes in the sense that it strips down to the fundamentals - removing all the gradients, shadows and complexities that may stray away from the required function. Focus is on content and/or the function of the design - be it a button or a contact form.

By removing styles does not necessarily make a site minimalistic however. Some designers can get very carried away and miss the point of why they needed to implement flat design in the first place.

Its quite common to see designers experimenting with tiles upon tiles of images and/or buttons and fill the screen. Whether this design decision is to go for a minimalist approach is debatable. White space, font choice and layout still apply to flat design.

The Alternative to Flat Design
This is probably a good time to mention skeuomorphism. Skeuomorphism is the representation of real life objects in virtual form. That is, the buttons on your flat touch screen emulates that of a button in the real world. It has a bevel, shadow or even glass like finish and functions once you click it to confirm an action has taken place.

An example of skeuomorphism is Apple’s bookstore - how it mimics an actual bookshelf with a wood effect. The same could be said for apps on a smartphone such as a media app that plays music. It is most likely to have a play/pause, stop button that are raised to indicate a click function. Perhaps it even has a volume knob/slider and equaliser slider that would not look out of place on a stereo or docking station.

With flat design principles, there is the risk of content being misinterpreted or overlooked due to the element ‘blending’ into the general design. Skeuomorphism on the other hand places emphasis on buttons that need to be pressed, implying importance. There are occasions when one particular design style would be better suited than the other.