Metrotastic– Palette Generator Preview.

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.

image

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?

Color Choice.

image

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.

image

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.

An example.

image

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).

Conclusion.

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

image

 

Some Color Examples

image

image

image

Related Posts:

Just an old observation about Apple.

Over the past week I’ve been quite busy writing a Product Strategy for a mining consultancy who today has a very specific niche offering here in Australia. The company is for me personally a fun place to be in, despite the weirdness of working for the mining industry (if you’re going to innovative UX, trust me, mining companies have the investment and vision to allow it).

The reason I like this gig and the work that we do is we are essentially focused on a market or idea around what the mining industry should look like from a geological standpoint over the next x-years. Loads of data that need user experience driven solutions to help unravel it.

I won’t go into details about what specifically the above means (as with this company, I actually have an NDA this time :) ), suffice to say we are focused and in the course of writing this strategy combined with the constant RSS feeds over the last 72hrs about Steve Jobs that it hit me what makes Apple such a powerful force today.

They are focused.

image

Looking at Apple’s website, you see they are in a number of products but the more you look at each individual product and how they relate to one another it’s clear there is a coherent strategy in place. There is still a case of multiple threads flowing at once yet they are still interconnected at some point.

I look at the iPhone and then look at the Macbook’s on offer and one can sit back and easily assume that the iPhone is an extension of the Macbook that the idea is to get you into the iPhone ownership whilst then bait you into the desktop solution there after – it just works right?

Everything in Apple orbits the iPhone, its realistically today the center of all products that Apple produce’s gravity, it’s clear to me personally they are focused on a strategy – how well the retain custody of this vision or strategy with the passing of Steve Jobs is yet to be written, suffice to say they have one of the best foundations to build from.

I observe often just how focused Apple.com has become as a website, every line of text, every picture right down to the consistency in design seems to say “we have an idea, wouldn’t it be cool…”

To put it in perspective on the influence, I watched a colleague of mine – better to not name him – design Microsoft.com/web (which imho kills on all Microsoft.com sites). I watched him sit down and do everything in his power to avoid opening Apple.com and it’s not because he hates Apple or drinks the Microsoft kool aid, quite the opposite he’s at heart a pure designer – one of the best I know – he avoided opening it because he wanted to beat it because he appeared to want to put Microsoft’s best foot forward and not have a site like Apple overshadow it.

He had a lot of fools in his way, but he navigated the mess with class and kept a strategic focus on a simple principle – user experience first around the products he managed.

My point is this, Apple and Microsoft are opposite from one another, we all get that but if one thing about writing my 8th Product Strategy and living by the a sense of “focus on the user experience and work your way back” has taught me, that at times you just need the Bill Gates, Steve Jobs etc of this corporate focused discipline we call the software industry to just do what they do best and stop crowding them with bullshit and have a point or focus.

Microsoft, Adobe and even Google just seem to have this scatter shot approached to product strategy & marketing.

Personally, it’s quite frustrating to just watch given their huge amount of potential they have? We should have 10 Steve Jobs personas in our industry with the same level of UX focus for a brand? That’s what people are probably the most down about in his passing – who’s going to lead us now?

Related Posts:

Steve got the Job done.

image

I’m not one to subscribe to celebs etc., but today Steve Jobs dying did leave me a pondering the power of how one person made such a huge impact.

I have heaps of positive / negative stories about Apple etc., but the one that stands out the most is the day the iPhone 3Gs was released in the US.

On that day, I was on Microsoft campus after working through the night on a project – cannot remember what the project was – and it was around 7am I decided to call it a day. I shut down my computer and remembered that this was the day Apple was going to release their new phone, I wanted one because I still had my Australian iPhone but figured I can wait until next month when all the madness dies down.

I got in my red 2010 mustang (loved that car), pulled out of Building 17 and drove towards my house in Sammamish only I figured I’d swing past the local Redmond AT&T store to see if there were any Apple nutters lining up as maybe because the store is so close to Microsoft campus there won’t be as many people queuing up (Microsoft internally was very weird around Apple hardware ownership as you can imagine).

I slowly drove down the main street towards the railway line and there it was a queue that ran all the way around the block and then some. Looking more closely I noticed a few familiar Microsoft faces and could see heaps of blue tagged swipe cards attached to peoples belts like some weird Texas ranger police badge.

I smiled, we compete daily with Apple but here inside the heartland of Microsoft there were staffers queued up like the rest of the stores around the US all keen to get their hands on the iPhone 3Gs.

I later heard a rumor that over 30,000 Microsoft staffers per day used iPhones to connect to their emails.

This phone came from the creation of many at Apple, Steve Jobs was their leader and maybe he was the ideas man but in the end it took teams of people to execute on those ideas. The man not only made an impact on my career and continues to do so, but I watched an entire company take deep collective breathes at nearly every WDDC, I watched internal mailing lists fire up and lots of internal debates around how “Apple are copying us” and “Steve Jobs is <insert negative/positive comments here>” and even today as I watch my wife struggle to force herself into an optimism bias fueled acceptance of the Windows Phone 7 she holds in her hands whilst staring at my iPhone4 with envy – you just can’t but help this was a moment in my lifetime that I probably won’t see in a hurry – the man died, can you believe that? Isn’t he some kind of immortal tech geek god personality?

Today, I own 3xMacbook Pros, 4x Apple TVs, 3x iPods, 4x iPhones, 2xiPad, 1x iMac and next week I’ll also own the iPhone 4S (aka iPhone 4 Steve). I buy these products because they inspire me creatively not through their unique designs but how others add to the design(s). I care less about the Mac culture and I spend a fortune on Apple daily to the point where it annoys the hell out of me at how expensive it is to be a customer of the brand.

Simply put, I find little to complain about and I agree with most of what Steve Jobs has done in the past and the way he’s set us up for the future.

I look at the iPhone Siri and just think to myself – that is really cool? Like if it can do as the ads say it can, this is going to be a game changer for business women/men worldwide. The camera looks amazing and that’s enough for me to drop $799 AUD next week.

Everyone else’s reaction was “meh”.

How far have we come today where there is a phone that has the potential to take on the role of Ironman JARVIS like intelligence that we turn and just throw down and have a technology tantrum?

Steve Jobs not only influenced me on an industrial design & interface level but I look at my 3D portfolio and often catch myself daydreaming about what it would be like to work at PIXAR – a company I’d often joke about “leaving my wife and kids to work for” with a friend of mine who used to play sport with my family every Saturday in Seattle who used to work for PIXAR.

I don’t subscribe to celebrity nonsense, but with this guy, I was hooked like a school girl watching a Justin Beiber concert.

Today, the myth of the man got bigger whilst the enemy of mediocrity got one leader shorter.

I hold Microsoft to high standard and will beat them up often over it and have a mixed result around success but I do so because of guys like Steve Jobs. The dude’s a fucking legend – enuf said.

Related Posts: