September 2012

I started my blog back in December 2010 and it's still going strong. I've posted at least once post a month since then, so feel free to browse through the archives.

The ‘Metro Inspired’ Interface

We recently saw the release of the Office 2013 Preview which has been received by many as one of the best looking and best executed reboots by Microsoft. The preview is very consumer focused (which is where Microsoft is lagging) and includes some very interesting cloud integration features – like saving to SkyDrive by default.

The thing I want to talk about now is a trend that has been coming at Microsoft for a while now – everything is moving over the Metro look and feel, but there is a distinction between an application that is ‘Metro style‘ and ‘Metro inspired’ the first is built for the new Windows 8 user experience, and the second is just an existing Windows application which has been built with the Metro Design philosophy in mind. (Yes I’m going to keep calling it Metro, for now)

Part of the confusion on the Metro name is due to this shift, and we actually have two things:

  • New Windows 8 Applications (Metro style)
  • Any app designed with the Metro philosophy (Metro inspired)

Now ‘Metro style’ applications are going to be known as Windows Store Applications. But we’ve had no word on what the Metro inspired applications are going to be called yet.

Below are a few of these ‘Metro inspired’ apps we have today…

The first of these applications pre-dates Windows 8 itself and was really the birth of the Metro design philosophy on Windows. The Zune desktop software has always had many of the original design features which we now know as Metro design – big on typography and whitespace.

I spend a massive amount of time in OneNote, and the 2013 version is so Metro it’s almost invisible. If you go into the full-screen mode.

Now applications from the Office Division are merging their ‘fluent’ ribbon interface with the Metro design that the Windows team has embraced. The combination is very interesting.

The Developer Division has also taken note, and Visual Studio 2012 has a really amazing (and controversial) look.

Personally, I really love this Metro look. I just wish Microsoft would decide exactly what we should be calling it. Until then – it’s Metro.

Photosynthesise

I’ve had two themes for this site since I started it in December 2010, and even the second one was only a small refinement of the first. Back then I figured that getting the site up and running was more important than the look itself, so I never really gave that much attention to the theme – until now.

Before the design of my new theme even started, I had to give the project a name. I decided to call it Photosynthesise, as I wanted to give the feeling of energy and growth. (Oh and also the signature colour is green!)

This time I thought I’d share my ideas behind the design process…

Goals

There were three things I really wanted to have for my Photosynthesise project:

  • A design built to fit inside a typographic grid
  • A design which evolves the current identity
  • A design that is great for all existing content

Thinking about space

While researching Swiss Style, I discovered that things look better in grids. I think this is a concept that everyone already knows, but really focusing on the grid when laying out a user interface gives it much more balance. The users may never be aware of the work you have done, but unconsciously – they’ll appreciate the eye for detail.

Switch on the grid to see how it looks.

Thinking about identity

My old site was green, and I decided to keep it. This time the new logo at the top was designed to be a lot smaller, allowing the title of the website to come outside of the coloured box. Designed in a 16×16 grid, the new logo will easily scale down to the microscopic resolutions of favicons, as well as scale nicely when zoomed up to higher definition.

Joining the signature green, the previous theme’s hyperlink colours have also been used throughout the new look. It will be no surprise to designers that this almost-RGB colour pallet is influenced by digital displays. Finally, three shades of grey and white make up all of the colours used throughout the design. The darkest of the greys is used in place of black to ensure the other colours are never overpowered.

The old site was based on Twenty Ten, which had a shape that was very similar to other WordPress blogs. I’m happy to continue to use this layout as it is familiar and user friendly. The overall size of typographical elements in the design is fairly large, something which has also continued over from the previous theme. This keeps the overall look of the site mostly the same as it was before, even though everything has been refined.

When it comes to the typography, I decided to go for Segoe UI for the body font. I had also greatly considered using either Calibri and Cambria, but I ultimately decided that I liked Segoe UI the most. The reason I picked Windows fonts is not by accident – as a Windows developer they feel very familiar to me, and I like writing in them.

Thinking about content

The content is the really tricky bit. Due to the fact I have previously used 600px wide images throughout the blog, I’ve decided to keep the content at that width. Consequently, images like the one above still have a big impact on the body text. Oh and I don’t have to resize everything.

“I feel like a pig shat in my head.” – Withnail

I’ve greatly improved the spacing of the text and other elements to make the whole content area flow with the 100+ posts I already have. I’ve also improved the ability to post quotes, code samples and console commands, handy when you spend as much time in PowerShell as I do.

Windows PowerShell
Copyright (C) 2009 Microsoft Corporation. All rights reserved.

PS>


To enable new discovery of content, I’ve improved the visibility of the categories and tags. Large blue links to the right of the content enable switching between categories, and now a new section at the bottom of each post makes the relevant tags much more visible.

I plan to keep tweaking the code over the next few days, but if you have any feedback or you’ve noticed any bugs please let me know in the comments!

Surface for Windows 8 Pro

Originally I wanted to get Surface for Windows RT, but I’ve changed my mind about which Surface computer I want to get. Mostly because of two reasons.

1 – I’ve seen no Windows 8 Ultrabooks I like

I have been looking around for a good Ultrabook for a while now, and I had pinned high hopes on Vizio, but lacklustre scores on the touchpad and keyboard have tarred that machine. I have recently had a look at many of the machines shown at IFA – including the Acer Aspire S7) but none have them have really grabbed my attention like Surface.

The Aspire S7 has some fantastic Windows-friendly features, but in terms of traditional laptop design, the MacBook Air still has the edge for me. But I don’t want to have to hack around with a MacBook to get Windows to run well again. True I have enjoyed using Windows on my current MacBook, it’s just such a pain to set up just right.

2 – I really like using Windows 8

Windows 8 became available as an evaluation recently, and I have taken advantage of that to try out this new operating system in day-to-day use. I love how the operating system really does have this no compromises feel to it. It works extremely well on a laptop* and better than Windows 7 when used with a mouse and keyboard.

This has made me think that the best (and cheapest) option is to get one machine rather than two: a tablet that is a PC.

One PC

My experience of Windows 8 has been through the 90 day enterprise evaluation, and I’m still using Windows 7 on my MacBook. Before the Surface was introduced, I set out that I wanted to have only four machines (Xbox, Ultrabook, Phone, Tablet) but now I’m leaning toward having only Xbox, Surface and Phone for personal use.

It’s going to be interesting to see how I tackle the smaller screen size with productivity for personal tasks, but making things as simple as possible is what I always strive for. Though I do get the feeling that there’s room for a device around the 7″ mark to take the number of machines to four at some point in 2013. (NewCo?)

  • Processor: Intel Core i5
  • Weight: 903g
  • Thickness: 13.5mm
  • Display: 10.6″ ClearType Full HD (1080p) capacitive touch screen
  • Battery: 42Wh
  • I/O: microSDXC, USB 3.0, Mini DisplayPort, 2×2 MIMO antennae
  • Software: Windows 8 Professional
  • Case: VaporMg Case & Stand
  • Accessories: Touch Cover, Type Cover, Pen with Palm Block
  • Capacity: 64GB / 128GB

* Unfortunately the touchpad in my HP Laptop doesn’t have very nice support for Windows 8. Hopefully that’ll come soon.