The Fall of 2012 brought a great opportunity to design for the new Windows 8. We were tackling The Globe & Mail's news app, which was slated to be released on launch day in the Windows Store. While ramping up on the Microsoft Design Style and Windows 8 design patterns, it became apparent that the real challenge would be in finding ways to flex our creative muscles with a platform that, to some critics, has been designed to homogenize digital experiences.
Microsoft Design Style
Microsoft Design Style is a throwback to the Bauhaus art style of the early 1900s, mixed with Swiss design patterns and an emphasis on the direct Metro approach to communicating function and simplicity through design. The flat, straight-edged and minimal patterns of Microsoft Design Style can be clearly contrasted to the beveled, rounded, textured and depth-filled visual elements of Skeuomorphic design.
Skeuomorphic
A design element of a product that imitates design elements functionally necessary in the original product design, but which have become ornamental in the new design.
Furthermore, with the explosiveness of mobile and tablet adoption, competitors have been constantly on the lookout for new and innovative ways to get the edge on a flurry of new devices and apps hitting the market. In this race, Microsoft’s bet is a cross-platform operating system that offers an attractive function-first design language.
The New Windows
Windows 8 boasts a single design system that is meant to extend and unify experiences across devices. Because of its emphasis on scalability, Microsoft requires designers to follow strict guidelines to ensure consistency end-to-end. Adaptability is a strong underlying theme.
To help with this, Microsoft provides designers with PSD templates, design guidelines, case studies, and a predefined grid system optimized for pixel density, stackable content, and varying tile sizes.
The danger for designers here is clear: too many guidelines run the risk of spawning an army of cookie cutter apps. So how do we pay respects to the core philosophies, requirements and guidelines, while allowing each app to offer its own distinct and unique experience? A balance must be achieved, but it was only through starting to design within these boundaries that we begun to understand the thresholds for creativity.
My hope here is to pass on some of the wisdom we gathered to help other designers get started in designing for Windows 8.
Creativity in Windows 8
As a starting point, the trick to ensuring Microsoft’s guidelines and requirements don’t become shackles is to express your creativity through the details. Microsoft has given us a fairly well structured box, but how we work within it (and think outside of it) is what defines the personality of the app. Here are some things to keep in mind:
Design Principles are King
Understanding and applying the Microsoft Design Style principles to every creative decision is essential for designing a successful Windows 8 app.
Show pride in craftsmanship
Devote time and energy to small things that are seen often by many of your users, and engineer the experience to be complete and polished at every stage.
Be fast and fluid
Let people interact directly with content, and respond to actions quickly with matching energy. Bring life to the experience by creating a sense of continuity and telling a story through meaningful use of motion.
Be authentically digital
Embrace the fact that apps are pixels on a screen and designing with colors and images that go beyond the limits of the real world.
Do more with less
Create a clean and purposeful experience by leaving only the most relevant elements on screen so people can be immersed in the content.
Win as one
Take advantage of what people already know, like standard touch gestures and charms, to provide a sense of familiarity, control, and confidence.
Embrace the Grid
Along with these principles, there are also more tangible guidelines to help you get started. Tiles, their sizes, and their orientations are an integral part of Windows 8′s ability to be cross-platform. As a result, a very strictly defined Grid System is provided. The grid is constructed of 1 pixel, 5 pixel and 20 pixel units – blocks of content where tiles are arranged.
Try creating the grid from scratch using guides, it will help you get a better sense of how the grid works and understand the boundaries of the system.
Use Creative Backgrounds
The background of your app will reflect its unique personality. Its one of the main elements where you as a designer have the most breathing room. While staying true to the design principles, create a background that will make your content shine. You can even have some fun exploring things like Parallax animations to help your app to stand out in the marketplace.
Select Unique Typefaces and Vibrant Colours
Your selection of fonts and colors are essential to creating a unique app in Windows 8. In my experience, using vibrant colours that contrast well with text in tiles and that can be used as accent colours in the Article page is a great way to keep true to the Microsoft Design Style, while making a bold statement with your app.
Microsoft’s default font for Windows 8 is Segoe UI, a sans-serif font with a variant of styles and weights. While this is a very readable and aesthetically pleasing typeface, you may decide to use something a little more custom and unique to your design.
Customize your Tiles
Tiles are the centerpiece of the Windows 8 experience. You should experiment with the layout, organization, font and image selections for your tiles. While Microsoft provides many tile templates, creating a unique tile layout within the grid system will strongly define your app.
Get Creative with Ads
Another great way to be creative in Windows 8 apps is to plan ahead for the use of custom integrated ad space.
For example, while Microsoft warns against using tiles to showcase ads, they do not restrict implementing rich colorful ads into the background, or using a parallax horizontal scroll to reveal them. Being creative with ad integration could even help sell ad space.
With Great Power Comes Great Responsibility
Designers have been presented with a real challenge. We have the opportunity to create memorable Windows 8 experiences, but as designers we also have the responsibility to innovate, evolve and test the limits of this new platform. Whether or not Windows 8 is successful depends largely upon the design community’s willingness to accept this challenge.
Helpful Resources
First things first, do your reading. We are very fortunate to have a vast array of resources available for us directly from the minds of Microsoft. Here are some resources that helped me onboard to my first Windows 8 project.
Microsoft’s Case Studies
http://msdn.microsoft.com/en-us/library/windows/apps/hh770549.aspx
Designing Great News Apps for Windows
http://msdn.microsoft.com/en-us/library/windows/apps/hh868272.aspx
Case Study: Designing Skype for Windows 8
http://www.xgmedia.com/2012/03/case-study-designing-skype-for-windows-8/#.UJgkmWl27Pp
Blink’s Resources
Blink’s Case Study: Rhapsody
http://www.blinkux.com/metro/case_study.html
Scaling to Different Screens
http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx
Grid System: Laying Out an App Page
http://msdn.microsoft.com/en-us/library/windows/apps/hh872191