I’ve been thinking about how to approach metro designs for the past year now, there’s a lot to the mechanics of getting the metro into what I call a “golden ratio” like state – that is to say, I think due to the simplicity of the design(s) you can achieve the bulk of the effort required by metro using mathematics and layout / proportions that are OCD / consistent
Tonight, I sat down inside Adobe Photoshop and decided to draw a line at the overall Resource Dictionary creation for some of the WPF/Silverlight and Windows Phone 7 projects I often work on. In doing this, I decided the first thing one needs to attack with a metro design is the color selection.
Color choice is important in the Microsoft style of Metro designs (I call it ms-metro as the word metro is getting to be an overloaded term, departing from the core design principles outlined), as you’ll note that Metro designs to date a really monochrome in the way they handle the selection of colors – to be upfront, I think they rely too heavily on primary colors and by not using shades of the primary / accent colors the designs come off to shallow / unpolished – helps to provide light/dark/normal contrasts imho.
I decide that in most of my designs I typically rest on 3-4 color choices overall – including the chrome (dark or light). These are often the basis for my design canvas and from here it’s really about balancing out the decals, typography and deciding how the overall screens and data flow.
More on this subject when I finish my brand reset (I’m redesigning riagenic.com and introducing metrotastic.com as well – more later).
In this post though, I thought it would be a good idea to provide a quick overview of my thinking here to gather some feedback?
If you look at most brands around the world, they typically rely on dark/light in terms of a canvas base and from there it’s really down to one to two primary colors (Google etc. the exception – where they have more than two).
Combining this and along with a concept I notice in most modern cars today where what I call an “input” color exists – pop the hood of your car, notice the yellow parts? That means it’s safe to touch, the rest leave it to the mechanics.
Looking at the below, I’ve isolated the theme into three color choices starting with Normal as being the primary color choice. Once the primary has been nominated then it’s a case of mixing some white/black to provide you shading contrasts.
Shades of Normal.
The shading is bit of a guestimation at this point, but so far I’ve rested on an 80 or 30% split. In that, using these two values with a white/black shading over the top of the base you can achieve a contrast setting that’s quite palette friendly to the ms-metro look and feel.
The shades themselves also have slight adjustment requirements depending on how you use them in your UI as if you use the darkest shade as your background for example (as in the below example) then you have to account for how your foreground is going to look that will differ from say your lightest color choice – the point is if you have a dark/light theme switch you need to adjust not just the base color selection but also foreground colors to accommodate the shading contrasts.
Chrome vs Brand
Inside a lot of my designs I use chrome decals, despite what Microsoft often preach around letting UI breathe, I still prefer to use decals to help provide separation amongst areas – imho, Microsoft UI is often barren and flat! We saw hints of this when a designer soon after the Windows 8 release whereby he designed a fake Steam UI which was an example of additive decals.
My approach in doing this is to separate the chrome into its own color channel and with its own set of shades of contrast (lighter,light, normal, dark, darker).
The same also goes for Input (ie using the car metaphor above), I typically will often spend a lot of time at kuler.adobe.com playing around with colors before I find a color that matches the branding (primary) nicely – in this case I prefer a blue/green/gray color selection.
You can add a fourth palette to this, but in all honesty when you start getting to around the fourth color choice things get a bit interesting in the color / contrast department – dangerous design imho.
Using the color palette(s) here I quickly knocked up a fake basic demo UI in metro style.
With the example, I put in a radial gradient starting with DARK-Gray and DARKER-Gray and simply put the radial gradient in the upper left area – it gives the UI that dull spotlight effect.
I then put the NORMAL-Blue as the accent color here, whereby the blues role in this design is to act as an opposing contrast to the chrome – you’ll often see this in ms-metro around say designs like Contoso etc.
The menu and most of the text uses the colors in the Darker TEST palette, but the thing to note here is I used the Normal-Blue as a selection state. In that whilst the green indicates input, the blue however is used to indicate current selection state. I’ve played around with this for a while now and in all honesty it annoys me personally how this works as to me input color should be consistent? But yet it works?
I should point out that I often will just use this technique in terms of giving users a spatial understanding of where they are in the user interface(s). In tests I’ve done with users over the past 2-3 years using this technique, they’ve never bucked the concept or idea – if anything have made consistent notary that this approach “feels right” – so despite some UX / UI colleagues giving me advice to avoid it, so far, the data says “you’re not right and your not wrong either” J (everyone becomes a UX expert over night mind you).
The Green in this UI stands out more, it highlights that these buttons are safe to touch and they are the focal point of input and like I said, provides that experience similar to popping the hood of your car. In all the tests that I’ve done in usability / ux over the last year or so, every single time the user has found their way around with minimal eLearning / Advice required – I have a theory that it has a link to how we humans handle perceptional organization when dealing with working memory (ie grab a few clipart pics, pick two categories the same and put them into a grid with 4 others that aren’t, then ask the candidates to tell you which two are the same and measure their reaction time – I should discuss this more, as its quite fascinating to see how peoples IQ matches to UX with a fairly consistent rate of predictability).
I have plans to really drill deeper into this area of design and I think I’m really only just scratching the surface of this conversation. The more I get asked to design metro themes for various Microsoft applications the more I question the overall strategy given for me this is quite simple stuff, yet it seems to be in high demand.
I enjoy working on it all now, I used to laugh at it but for me now the approach is getting much simpler by the day and I’d like to see the overall community raise the bar a bit more around this design language – that is to say, I really want to see what others do as I’m starving for alternative inspiration in this arena of metro-tastic design school.
Here is a sneak preview of my upcoming reset
Some Color Examples