PAGES

12

Jan 11

Wicked Wireframes: WP7 Vector UX Kit



I’ve been meaning to make this post for a long time.  But we’ve been so deep in WP7 awesomeness I haven’t had a chance to make it happen.  A lot of people have been asking me what tool(s) I’ve been using for prototyping WP7 apps.  And specifically, what I used to create the CTA Bus Tracker wireframes below.

I’ve been using Adobe Illustrator with some custom WP7 templates (download below) I’ve created to speed up the wireframe portion of our design process.  Unfortunately, Illustrator isn’t the easiest tool in the world to use and it will take some patients to get comfortable with if you haven’t used it before.

There are also plenty of well-done wireframes done in lighter tools like Omnigraffle, Sketchflow and even Keynote.  But if you’re like me (anal-retentive) the crisp lines and extra polish is a must-have and totally worth the extra sweat of Illustrator.

Wait…Why do I need these?

Creating wireframes and application flows is extremely helpful in coming up with a well defined design early on. Unfortunately the only creative assets MS has released for WP7 are Photoshop templates. The Photoshop docs are great, but for sketching out basic ideas I prefer creating wireframes in illustrator.  These templates will save you a ton of time creating the assets that mimic the wp7 toolkit.

One more thing…

It very important to understand what makes the platform you’re designing for unique so you can leverage what it is good at.   When MS debuted WP7 along with it came some new interaction paradigms.  Specifically, the Panorama and Pivot controls which devs and designers can take advantage of to create  applications that are more functional and efficient than the other platforms out there.

What are Panoramas and Pivots good for?

Panos

  • Entice the user to explore.
  • Deliver a curated experience to the user.
  • Fresh, dynamic, compelling content
  • Balance of consistency and surprise

Pivots

  • Efficient for slicing and sorting complicated views
  • Delivers a focused interaction that lets users get to the content quickly and easily.

Try Not to…

  • Place a Pivot in a Pano
  • Place a Pivot inside a Pivot
  • Use a Pivot or Pano to create a wizard flow

Where do I get them?

Right here. The templates were created with Illustrator CS5 but I also included CS4 and CS3 compatible files.

Download Here

Enjoy -

Erik Klimczak  | eklimczak@claritycon.com |twitter.com/eklimcz

3 comments , permalink