Design Process, Inspiration, and User Experience



Jan 12

Windows 8 Photoshop Templates

Windows 8 is coming in hot! And here at Clarity we just couldn’t wait for MS to publish the official design guidelines. Our clients want to see their brand on Windows 8 now. So we meticulously picked apart screen shots and some XAML to create our own Photoshop templates. Get the unofficial Windows 8 photoshop templates below to kickstart your next Win8 project. Free of charge from your friends at Clarity Consulting

Whoa..8? I just got 7…

Yeah dude, the Windows 8 beta is right around the corner and the excitement is almost palpable. Over the past 6 months Microsoft has been slowly revealing the next evolution of Windows. The first glimpses of the platform came at BUILD where the developer preview was released along with a ton of sample apps and code snippets. Shortly after, MS publicly announced their plans for the Windows 8 Store. The Store announcement boasts some great opportunities for app makers and showcased some very nice apps.

The new Windows 8 platform has adopted the “Metro” design language that can be seen in Zune, Xbox, and Windows Phone products. The Metro styling has its roots in traditional Bauhaus design principles which, for this designer, is a breath of fresh air. Yet, for a platform driven by rich design concepts, guidelines and templates are sparse. Right now, the best documentation is scattered throughout the MSDN library and doesn’t give much in the way of practical design resources.

Why do I need this?

A few times now I have gone through the rigamarole of designing a Windows 8 app. And every time I go through the same process – take screenshots of my Window 8 tablet; creating guides and font sizes; start adding in content. In efforts to speed up our design process we made some template time-savers that I’d like to share.

Thanks to our senior photoshop template maker Brittany Travitz we now have some basic templates that should help you:

  • Set up proper margins and spacing
  • Find consistent Font Sizes & Weights
  • Create a basic application flow

What do I get?

The templates are primarly based on the Expression Blend windows 8 default project template. But we’ve also baked in some of the fine print found in these articles

There are four files included in the download. These files represent a bare-bones Metro application flow (see below). The four files include:

  • Home – This is the basic landing page or Hub of an application where you surface featured and curated content.
  • Category – One level below the home page is the category view. This is where you would present the full list of items for a given category.
  • Detail – This is pretty self explanatory. Details of a product, article, video, image, etc, go here.
  • Snap View – All Metro apps in Win8 require to support a snapped view state that takes up 1/3 of the screen. Similar to supporting CSS Media queries in a responsive website design.

Anything Else?

I’m sure MS will be releasing official design files and resources any day now. But until then, hopefully these files will save you some time as you spin up your next Win8 Project.

** BONUS **

We stumbled upon some really nice free icons for Metro app design. Check them out at Icons8


Erik Klimczak | |

1 comment , permalink