Design Process, Inspiration, and User Experience



Dec 12

Freebie: Microsoft Surface RT PSD and Ai Template

We produce a ton of artwork for Windows 8 and when we present ideas to our clients I like the artwork to look as good as possible.

One way we do this is by placing the designs within a device frame. This gives the artwork some context, and a more premium positioning.

Mocking up artwork in a device frame is pretty commonplace for iOS and Android design, so I figured the Win8 community would benefit from these. Unfortunately, many of the MS Surface templates floating around the interwebs appear to be slightly inaccurate. They look as if a Samsung Series 7 and an iPad had an awkward kid. So I was compelled to have a legitimate go at making an accurate template. I’d like to think mine are at least 98.9% accurate.

Get the Goods

If you have Photoshop or Illustrator installed these should come in handy. And if you don’t…you can hand them off to your neighborhood friendly designer and I’m sure they’ll be pleased as punch…


Erik Klimczak | |

0 comments , permalink


Apr 12

Windows 8 from the Trenches

Last week Clarity was invited to the Windows 8 Developer Launch event in here in Chicago. Matt Hidinger and I were asked by some good friends at Microsoft to give our 2-cents on why we’re excited about Window 8. It was a packed event, and we had a great time. Below are some pictures, slides and a short recap on our talk. Pictures courtesy of Bob Laskey

Win8 : A Business Perspective

Here at Clarity we’re excited about Win8 for a number of reasons. One of the wins we see from a business perspective is reusability in three main areas: Design, Code, and Skillset.

Design – We can now share design assets and create a consistent brand experience across Microsoft’s three major screens: Xbox, Windows Phone, and now Windows 8.

Code – We primarily use C# and XAML to build our Windows Phone apps. Xbox, and Windows 8 also give us a framework to write C# and XAML. While the code isn’t necessarily copy & paste, there is a ton of overlap between the platforms.

Skillset – This is sort of a nice side-effect of having similar coding platforms. We are now sharing talent across our dev projects. In other words, our mobile guys are building Win8 apps and our XBOX guys are able to make the transition to Win8 or Win Phone just as easily.

Win8 : A Design Perspective

I’ve been building and designing software for a long time. And as a ‘design guy’ I tend to focus primarily on the UX aspects of software. With Windows 8, UX and aesthetics have finally been promoted to a first class citizen. This is great news for both designers and developers. This is especially exciting from a development perspective because it makes good design a hellava lot more accessible to the non-designer.

Metro makes Design More Accessible. . I like to think of Metro as a ‘developers kind of design’. It gets to the point, and promotes functionality over flash. Its about solving problems, visually, which is something we can all get on board with.

That last statement might seem a little broad. Specifically, the Windows 8 platform makes a handful of tedious design scenarios very easy for developers :

  • Touch First Controls – MS has finessed the crap out of these touch controls. They are accurate, and have a ton of user research driving their functionality. This is something that takes a lot of precision and therefore time to nail. Now you get it for ‘free’.
  • Animation – I’ve spend a good portion of my career figuring out the ‘perfect’ easing functions and timings to create snappy elegant motion in applications. MS has spent a bunch of time making the animation framework super easy to use for everyone. Its really good. Use it.
  • Built-in Styles – Margins, spacing, alignment, font-sizes, type-casing, font-weight. These are things that make most developers cringe. Well guess what, MS has been awesome enough to provide you with templates that have all of the base styling built-it so you don’t need to fret about those teeny-tiny pixels.
  • Win8 : A Development Perspective

    Our own Matt Hindinger did an awesome job talking about the great new development opportunities that come with the Win8 Metro platform. I’ll make a feeble attempt to recap the highlights of his portion of the talk.

    In Metro you have a choice to use 3 different development platforms : HTML5/Javascript, XAML/C++, XAML / C#. And the question we get asked the most is ‘when do I use what?‘. This is the when & where breakdown that we’ve come up with:

    • C++ XAML / DirectX – We think this platform is best used when you have a need for performance and precision. C++ and DirectX give you full control of every pixel on the screen and its super fast.
    • C# / XAML – This is our platform of choice. It offers a very reliable strongly typed coding environment that couples speed of development and a robust control set. If you come from a .net background, this is the one for you.
    • HTML5 / Javascript – We think this platform offers great flexibility and an awesome set of tools for loose and fast prototyping. If you are coming from a web background you will be pleasantly surprised at the modern CSS, js support. We’ve had really good success with this framework so far.

    Our Slides

    Below is our slides from the event. Check em’ out and share them with your friends. We had a lot of fun embracing the ‘trenches’ theme .

    If you have any questions or thoughts you’d like to share with us don’t hesitate to hit us up on twitter.

    Erik Klimczak | e = | t = eklimcz

    0 comments , permalink


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