Flat is the new “Phat”
The term “flat” has for the most part, had negative connotations in the past (Aside from the positive associations with having a flat stomach). Nobody wants to drink a flat beer or get a flat tire on their car. With the web however, flat is the new “phat” and as far as user interfaces are concerned, it’s akin to having six-pack-abs.
But what’s all the fuss about really?
As with most design trends, it’s a visual cue of what is current and modern and a direct reaction against the previous design trend, skeumorphism (which is design that mimics real-world objects).
But there’s something more tangible about flat design than just the look of the User Interface, and that is the benefit that flat design provides to the user experience.
The web is now in a world of multi-devices, no longer accessed from just the desktop and no longer forced into set width and height pixels of 800X600, 1024X768 or 1280X1024…. The consequence of this is that websites need to become agile.
Think of it this way. Imagine if you owned a restaurant, but the building you were located in, would only accommodate people who are 5’10″ tall. You wouldn’t get many patrons would you? Of course not. And if you were smart, you would focus all your efforts on re-designing your restaurant to accommodate all visitors.
Like our hypothetical restaurant, the modern web in recent years has had to become adaptable to the various types of visitors that want to visit it, and it must accommodate not only the people, but the bandwidth with which they are connecting and the device mediums with which they use to connect. From smart-phones to tablets, small monitor desktops to those really fancy wide screen high density displays, everything now can browse the web quickly and efficiently and if your website is not compatible or user-friendly, then you’re essentially defeating the purpose for which you originally created that website. To attract customers, sell products, market services or disseminate information.
Now back to why “flat is the new phat”
Flat is Responsive-friendly.
In the growing need to accommodate all the various devices that have been invading the marketplace, the people who make web-browsers like Firefox, Google Chrome, Safari and Internet Explorer, have in recent years been adding support for a more modern way of styling the web so as to enable the website itself to respond to the screen size of any device that visits it. For those who don’t know about this stuff (I’m talking to you Dad), the styling technology has been around for quite some-time now and is called CSS, which stands for Cascading Style Sheets. CSS is now in its third iteration, so modern web browsers are now supporting css3. One of the really awesome features of css3 is called “media queries” or “@media” and it is the powerful tool that enables webguys (and gals) to program a modern website that can be viewed from any device and on any screen.
So what does Resonsiveness have to do with flat design?
Essentially a minimalist approach to web-design, flat design places higher importance on functionality and shuns extraneous graphics that previously had to be generated with graphic design software. In fact, it is quickly becoming a dying tradition to design a user interface with software such as Adobe Photoshop, as these designs tend to be static, fixed-width designs that aren’t compatible with all of the different views achieved with responsive design. Of course there are going to be many web designers out there that will fight against this statement, but honestly, I personally have completely stopped designing user interfaces in Photoshop and now only use the software for jpeg manipulation (illustrator for logos and vector graphics – svg’s will be a topic for another blog post, but I digress…)
The modern web designer should be proficient enough with programming CSS to be able to design while coding on the fly, incorporating the media queries into the stylesheet concurrent with writing the html code and simultaneously previewing in the browser to eventually achieve the desired end-result. The Flat design trend lends itself to this process as nicely as peanut butter lends itself to chocolate.
Flat Design looks great
If executed well, flat design not only looks great, but it is so attractive that it is fast becoming a trend on fortune 500 websites. Companies such as Microsoft, USA Today and Disney have lead the charge in executing phenomenal looking websites that are not only flat, but responsive to boot. These companies know the importance of a great looking website and have the resources at their disposal to execute them flawlessly and it’s a high complement to flat design that they have chosen this trend.
Flat Design elevates the user experience
On the web, content has always been the king and from the user’s perspective, to have an enjoyable experience viewing that content and being able to quickly and efficiently access it is simply a win-win situation. In fact, I may go so far as to say that content, displayed properly is Emperor. Proper use of white space, color theory and efficiency in layout are prevalent elements of flat design that help to elevate content and assist the visitor with accessing their information while providing an enjoyable experience. This is the holy grail of web design that the Flat user interface design promises.
Flat design is more than just the absence of textures, shadows and skeumorphistic effects, it is a user-centric focus on the content and the methodology behind displaying information in a clear and concise manner that by its very essence, is stunningly lends itself naturally to device agnosticism and when executed properly, achieves a stunning level of design sophistication that is nothing short of visually enticing.
About The Author
Jonathan Weisberg is a proud father and husband, working full-time as a Web Content Developer for a software company in Goleta, CA. Visit him online at www.weisbergweb.com or on twitter @weisbergweb
