When the iPhone and later the iPad came out, it would be fair to say that their design styling had a rather large impact on the shape of the web in general. One of the things that these two Apple products got very right was the way in which they handled their design – and the way in which they made everything look premium, curvy and glossy so that you knew you were holding a smart piece of kit.
At the same time though this design was also intuitive to use, simple to understand and very well suited to a touchscreen interface. The web sat up and took notice and suddenly every website had more curved edges, light blue icons and ‘buttons’ rather than text links.
Now we are on the brink of what could be a new change to the status-quo as Microsoft are poised to launch their new Windows 8 OS. This will be incorporated into a range of tablets and computers and it may just have a similar impact on the way the web looks going forward if it’s a success. Microsoft are calling their new design sensibility the ‘metro’ look, and if you want to integrate it into your site design here are some tips to help you along.
Less Chrome
Whether or not this is a dig at Google’s browser I’m unsure, but one of the things Microsoft are emphasizing is that the Metro look should have less ‘chrome’. By chrome what they’re referring to is the outlines and the borders that make up the windows and containers that normally house content. In other words then, they are trying to emphasize the content by getting rid of any and all unnecessary clutter or panels so that all you see is writing and images. This is intended to get the user more ‘immersed’ in what they’re doing, and the functionality is designed to be tucked away and hidden.
Of course though there still needs to be organization and hierarchy for your content lest it all bleed into one big block of text and pictures. To accomplish this Microsoft are suggesting using subtle differences in color and font in order to show what you want where. So for instance you might just use two different fonts for your headers and your text and another for your menu – thus doing away with the need for actual dividers that take up screen real estate.
To implement controls Microsoft has a series of ‘charms’ that pop up when you take the mouse to the far right of the screen, and you can accomplish something similar on your own site using mousovers. For instance why not have a single button at the top of your screen that drops a menu you when click it or hover a mouse over it? This way you can make the entire rest of the screen nothing but content but not sacrifice your navigation in the process.
Flat Colors
Something else that you can notice when looking at the new Windows OS and software is that it uses a lot of flat colors and fewer gradients flashy features. The backgrounds used in the promotional images are dark greens of just one shade, and likewise the panels they use on their homescreen are decidedly minimalistic. This creates a clean and uncluttered look also and again makes it easier to see where the boundaries are without actual borders being implemented.
