microsoft / msn
Designs seen by over 170million people each month
Wireframing and UX
Each and every project started with a wireframe. The wireframes were low-fidelity, but highly important to outline where the content areas would sit within MSN's grid system.
Each component on the page was created individually, designed within Microsoft's Human Interface Guidlines. The component was created within Microsoft's 12 column grid system, which created pixel-perfect layouts.
Because I was part of a large international organisation, it was important to provide redline guides for the developers. This showed developers the exact pixel sizing and spacing requirements within the grid system and made it completely clear we expected pixel-perfect development.
Grid layout and clean styling
MSN is a notoriously busy content site, with many different portals and heaps of text. I helped recreate a layout that matched the new Windows 8 'metro' styling, but housed the extensive content in an easy-on-the-eye structure. The site always followed a 12 column grid structure, creating perfect gutters and element sizing.
- Complete MSN redesign
- Work commended by Bill Gates internally
- Creation of UI components to be used in 20+ languages
- Creation of FashionWeek + LivePlay branded page