Editor’s note: TThis is a contributed post by designer Roman Po who has done projects for Disney and ABC. He is a writer at DesignCrowd.com, where he obsesses over innovations in mobile GUI, UX and web design. You can find his latest blog posts over at Techolo.com and OneDesignPH.com

Flat design has been a trend in user interface design for a few years now. It is basically simplifying the interface by retaining the essentials and removing unimportant elements such as gloss, bevels and textures. Flat design can be described as being true to its digital medium without the need for any graphical parallelism to real world objects.

The most popular operating systems in the world, Windows, iOS and Android, have slowly been shifting their design language to a more minimalistic and cleaner look that is characterised by presenting data in grids, larger title headers, extensive use of white space, adoption of solid color palettes and condensed flatter font-types.

Recommended Reading: Ultimate Guide To Flat Website Design

Let’s take a look at how these 3 companies approach and implement flat design on their own OS and related services.

Microsoft: It’s hip to be square

Microsoft first introduced their “authentically digital” interface with the launch of Windows 8 and their Modern UI. Windows Media Center and the now defunct Zune brand ushered in this new era of design for Microsoft but it was Windows 8′s radical departure from the sea of icons — which most desktop OS used ever since — that changed the game.

The new Windows 8 Start screen is now powered by Live Tiles (animated, notification-like widget) sorted in grids with a horizontal scrolling layout that takes advantage of common landscape displays.

Windows 8′s Metro Modern UI is based heavily on the Bauhaus movement, founded by architect Walter Gropius, including proponents of the school’s philosophy Ludwig Mies van der Rohe, Le Corbusier and modernist painter Piet Mondrian. It was also inspired by metro transit signs in terms of icons and typography.

Microsoft’s Swiss-inspired interface eschews non-essential elements like shadows, gloss, textures and puts content first before Google’s Chrome browser. Grid alignment, typography and negative space make up the whole, giving a full-screen experience engaging and immersive for users, especially those on touchscreen devices.

Google: Holding The Cards

Google started defining clear design guidelines for Android with the launch of Android 4.0, code named Ice Cream Sandwich (Android 4.4 is now called KitKat!) Google created a distinct design style of its own and dubbed it Holo, playing with a TRON theme at first but eventually maturing into a minimalistic card-type interface that is now prevalent on most of its products and services.

Google’s card-based design can be seen most notably on Google Now. The use of white spaces and condensed Roboto typeface make the overall layout very clean and easy to digest. The design, while considered flat, still uses subtle gradients and shadows as elements to aid highlighted, stacked cards.

Textual information is organized per size and color and in order of importance. Title headers are usually larger and dark while descriptive copies are grayed and sometimes italicized. Google’s use of flat-toned vector illustrations and icons also echoes the company’s dedication to clean and modern design.

Apple: In with the Neue

Apple just redesigned the look and feel of its new mobile version, iOS7, to have flatter and solid color tones compared to its old interface. iOS7 has taken some cues from Microsoft and Google using simpler icons, fresh type treatment and an overall flatter environment in this recent iphone redesign.

It can be said that critics of Apple’s hyper-skeuomorphic (or obsessive design realism) approach on its platform, notably native apps like Game Center with its felt background and Calendar’s leather textures, prompted the change.

With iOS7, Apple introduced the use of blurred translucency to provide a sense of context and place for the onscreen elements. The new version also introduced a thinner, modern-looking typeface in the form of Helvetica Neue Light. This fits the overall new user interface with a lighter and breathable layout especially in the Mail and Calendar app.

Subtle improvements like the parallax effect add depth and motion to the launcher screen. Granted not everyone loves Apple’s drastic switch to the new iphone design, with designers are creating iphone design alternatives but we can expect to see more of it as the new iPhone 5S roll out soon.

Different Ideals

These 3 tech companies have different directions on their new user interfaces. Microsoft focused on delivering a colorful, purely flat and utilitarian interface with its Modern UI. Google, on the other hand, is more comfortable presenting useful and timely data on white, card-like containers, quite similar to how the Google home page looks.

Apple meanwhile takes on Microsoft’s colorfulness (on software and hardware) while also adding cool digital tricks like iOS7′s home screen’s parallax effect. Most of these new interfaces are also similar in a way that they are now also designed to be responsive and flexible since they run on multiple devices from small form-factor phones to large-screen tablets and desktops.

The Microsoft Effect

While Microsoft didn’t start the flat design trend (as much as Google started web search), I believe they were the ones who’ve made a big impact by virtue of the development and marketing of Windows 8 which has mandated every PC on the planet and its user to become accustomed to this new and unique interface.

If you’ve ever watch Microsoft’s Vision of the Future, you’ll realize that the Modern UI we have right now is just the beginning of a new breed of natural user interfaces combining touch, voice and sensors. Microsoft’s properties like Xbox+Kinect, Windows Phone and even Bing is already implementing Microsoft’s "3-screens and a cloud” vision of a unified platform (PC, television and mobile) so the future presented may not be too far at all.

Moving Forward

It’s clear that Apple, Google and Microsoft are now moving to more streamlined, minimalistic and cleaner designs for each of their operating systems. Form over function or function over form, as the famous modermist aphorism dictates, users will eventually have to decide which of these 3 approach they’d prefer.

It’s probably safe to say though that flat design trend has already made a mark and will be here for quite some time. Flat is just the beginning as we move to a more genuine and honest design future.

When giving advice to new bloggers as to what kind of content grabs the most readers, the most comments, and the most shares on social media, most elder statesmen of the blogging community will say that controversy sells.

While this is true for the most part, many of them leave it at that. If they had carried the thoughtful advice to its fruition, it would definitely be good advice, but leaving the new blogger with just “controversy sells” is an open invitation to trouble.

Controversy does sell, however, if not approached correctly, controversial subjects poorly handled will drive traffic away from the blog and bring about the wrong kind of attention.

Recommended Reading: Freelancers: 5 Ways To Lose Your Clients

Walking the Controversy Tightrope

There is controversy, and then there is controversy. Determining between the two can be a delicate dance between common sense, the desire to draw attention, and just plain foolishness. Very often, the lines are invisible. To use an extreme example, one would not bring up 9-11, the infamous and terribly sad attack upon innocent Americans, in anything but a delicate and extremely sympathetic light for its victims or an outrage at the horrible terrorists that carried it out.

To do anything else would be controversial at best. For all of you new to the blogging game, here are a couple of important tips that you may want to heed. These tips expound upon the “controversy sells” advice, taking it to its logical and extremely delicate conclusion.

Readers Love Controversy

People, as a general rule, thrive upon controversy. In today’s world, where life is a struggle on an everyday basis for the majority of the population, it is always ‘good’ to read about someone else’s trouble.

However, controversy sells depending upon the controversial subject. There are topics that are more shocking in nature that must be handled in a delicate or removed from the content altogether, but if handled correctly, they can lead to good things such as an increased following and links from other blogs.

Read Also: 7 Splendid Techniques To Encourage Comments On Your Blog

1. Third Person Editorial Blogging (With Facts)

The best style with which to tackle a controversial subject is editorial. The majority of editorial is straight reporting in the third person and must include facts. If you are blogging about a controversial subject, it should be factual to a fault. Controversy offends so never as if the views expressed are yours.

But if you must, pick and choose your topics extremely carefully. Remember, you want readers… not enemies. Negative comments are still comments but when you actually offend people, those could be the last comments they post as they will not return, regardless of what you post about in the future.

2. Play Devil’s Advocate with Integrity

There is a huge difference between controversy and Devil’s Advocate, even though playing Devil’s Advocate can be controversial. Playing the Devil’s Advocate means that you take the unpopular side of a controversial topic and show an argument for it.

If you decide to play devil’s advocate, you must be 100% sure of your facts, and approach the topics that offend in a straightforward manner that reflects integrity in writing. Any Devil’s Advocate post that comes across as a rant about your beliefs and not what facts can actually prove will lose more readers than it gains.

3. Beware: One Side May Be the Suicide

There are some topics that can be blogged about but only on the side or righteous indignation against it. Choose controversial subjects that have a clear, dominating majority against, like spousal or child abuse (to which you are obviously outraged). Topics like abuse, crimes against minors, and other obviously controversial and heinous subjects only have one good side.

The other side is blogger suicide. It could also be means for losing your blogging rights on the search engines so tread lightly and watch your step when it comes to these. Only straight reporting and utter disgust for many controversial topics will carry any weight.

4. Leave the Back Door Open

Leave yourself an out on any controversial topic in which you cannot seem to refrain from injecting an opinion that runs against popular consensus. Your closing paragraph is the perfect place to indicate that either your opinions are a reflection of a side of the topic that is not often seen, or just points that you felt should be brought to light during the course of the post.

It takes a lot of skillful writing to apologize without apologizing for any offense that is unintentional or in topics in which anything you say anything outside of the facts could be misconstrued by the majority of readers.

5. Deal With the Blowback Responsibly

Those that comment negatively will return if you politely defend your position and thank the reader as long as you remember not to engage in an argument in the comments. Posting and engaging in an argumentative series of comments will only definitively divide your readership and many will not return.

Never single a comment out for a vindictive rebuttal.

Lastly, unless you are willing to back up what you say at the cost of your readership, steer clear of taking sides in politics, religion, and personal problems.

Be a Blogging Professional

In the end, a carefully constructed blog post about a controversial topic can be a big boost for your blog as long as you are prepared to receive and answer to the comments that will undoubtedly come pouring in. Always handle them with a polite return, thanking the abusive commenter for reading and participating.

Never allow comments through to publication that use offensive language or those to which others might take offense, especially those that accuse racism or other foolishness. The intelligent comments that go against what you were trying to say should be allowed if only to prove that you are willing to receive them and defend your position in a polite manner.

Good user experience brings a website to a whole new level. It reduces bounce rate, increase pageviews, boost sales, conversion rates as well as customer satisfaction.

If you dabble in web design and need help in this department, Dr David Travis, a psychologist, consultant, and expert with over 20 years experience in the fields of user experience, usability and human factors can probably lend a hand.

Learn how to create better, innovative and effective customer experiences for your visitors from the best. And what better way to learn about UX optimization than by a video course?

What’s In This Deal?

This Ultimate Guide to User Experience course contains more than 50 lectures amounting to 7.5 hours of step-by-step video tutorials. Don’t worry about notes. The transcript of each lecture will be provided to you in a Word document.

In the course:

• You can get hands-on practice with personas, card sorting, contextual inquiry, and heuristic evaluation
• Learn to develop cheap, throwaway prototypes for user feedback
• Learn about design framework and usability metrics
• Get your questions answered on the discussion boards

Upon completion, students will get a certificate of completion and can be eligible for free refresher training via email. This deal is available at 70% off at $59 (original price: $199).

• Get it now.

If you follow Google’s development close enough, you probably know about this but if you don’t, the giant search engine company has recently launched a new tool call the Google Web Designer. In short – this is Google’s version of Adobe Flash. Only that the output is in HTML5 and CSS3, and it’s currently limited to creating ad banners.

As stated by Sean Kranzberg, Google Engineering Manager, in the announcement for the tool:

"We think that Google Web Designer will be the key to making HTML5 accessible to people throughout the industry, getting us closer to the goal of “build once, run anywhere".

Recommended Reading: HTML5 Website Showcase: 48 Potential Flash-Killing Demos

Google Web Designer is available for Mac and Windows. Let’s see what this beta version of Google’s latest product has to offer.

Getting Started

We can create a new blank file for HTML, CSS, JavaScript, XML, and Google Ads, which provide a set of pre-defined ad size that is also the standard of the Google AdSense ad format. New file creation requires us to specify the document title, the name, saved location.

Animation Mode

This is something that we might not find in other web page creator applications – the Animation Mode.

There are two options in Animation Mode: Quick, which gives us simplified toolbar for creating basic animation, and Advanced, which will give us the advanced toolbar for arranging more complex animation. We can also opt between these modes when the file has been created.

Adding New Element

Google Web Designer provides a set of standard User Interface, which is easy to get accustomed to. The left toolbar lets you select tool sto add new element.s The default element generated would be the div element. But, you can have it changed.

1. Select the Tag Tool.
2. Go to the top toolbar, and select the Custom Element.
3. Specify the element you want to add.

On the toolbar to the right, you can modify the element’s property such as the padding, margin, dimension, border, as well as see all the CSS rules that are applied on the element.

Furthermore, Google has created an overview of the UI in the following video. Watch it to get further insight.

Animation

This is where we build animation with HTML5 and CSS3. This feature is better explained with a live demo, and Google has one for that, which so much easier to digest than. Enjoy:

Conclusion

In spite of its name, Google Web Designer is aimed at advertisers rather than web designers in general.

In fact, the official announcement is posted on the Adwords Agency blog. But, despite of the name and Beta status, Google Web Designer is quite functional for creating web animation

I’m definitely looking forward to the improvements in the next version.

More:

• Getting Started with Google Web Designer – Google Support
• Google Web Designer Channel – Youtube
• Google Web Designer Official Google+ Page