UX/UI Design the benefits of building prototype, even if you have only initial sketches of your prototype.


This week I had a really interesting discussion/debate with a University lecturer on teaching user interface design and it took me back just to how things have changed since the mid-nineties.

When I was a student a lot of CS courses which looked at interface design had materials which referenced the following statement “The Evil’s of Rapid Prototyping,”  and many slide decks contained reasons why rapid prototyping was a bad idea. Most of the reasoning centred around prototyping tools being so complex back then, they needed to be operated by developers; subsequently, the design process tended to be influenced by all design work needing to be interpreted through the lens of what a prototyper could actually achieve with the software available.

Fast forward to today and there’s been a rethinking on prototyping. Is this good or bad?     

I recently blogged about how professional organisations are using tools such as OneNote for UI/UX design. Additionally there a lots of new prototyping tools have appeared over the past few years and they’re rapidly being adopted by interaction designers.

So we concluded that the creators of these tools never attended one of these courses!

So the question I now want to pose is.. how do go about teaching modern user interface design and application workflows on your courses and what tools and resources do you use?

As we know prototypes can be as simple or as complex as necessary for the project on which you are working.

For example

  • A prototype can be a rough sketch with notes
  • A linear sequence of slides with a few notes that demonstrates
  • A workflow drawn on the art board,
  • A complex graph, outlined in the panel designs and layouts, that includes reusable elements on a single screen (component screens), and navigation between screens (navigation connections).

What tools do you use?

Microsoft SketchFlow includes several tools to make your prototype interactive in order to more closely mimic the flow of a production application. For example, with SketchFlow, you can do the following:

  • Begin a prototype with just a site map and a few notes jotted on the application screens, and then continue to refine your prototype as you go along.

  • Either draw user interface (UI) elements, or import them from common drawing programs.

  • Animate your prototype, creating a visual representation of the interaction between the user and the application.

  • Use the full library of standard UI elements and custom controls.

  • Create sample data on the fly, easily build data-driven UI, and add styles to your data.

  • Create interactivity without writing code by using built-in behaviours. Behaviours are extensible, making it easy to add custom behaviours to your prototyping toolbox.

  • Either write code to create custom elements, or use pre-built elements from your development team

Sketchflow Resource

For more details on Sketchflow see http://msdn.microsoft.com/en-us/expression/ee215229.aspx 

Tutorials on Sketchflow see www.microsoft.com/.../creating-navigation.aspx

But what about considering Modern design principles..

With Windows 8 and Windows Phone 8 we have the following key principles which need to be adhered



So the key things you need to consider when designing your apps for modern applications are..

Ensure that you weave platform features into your core scenarios and prototype design to leverage the power of the underlying platfom..

So lets think about the platform features available..



To help develop these scenarios here are list of the key resources.

Microsoft Design Guidelines for Windows Phone http://design.windowsphone.com

Microsoft Design Guidelines for Windows 8 http://design.windows.com

Microsoft User Experience Fundamentals and online training https://channel9.msdn.com/Events/Windows-Camp/Windows-8-UX-Fundamentals-Training-Workshop-2012

So where to start?

To help you get started on your app development here are some templates and guidance from https://channel9.msdn.com/Events/Windows-Camp/Windows-8-UX-Fundamentals-Training-Workshop-2012



Example of a completed template for a new app design/concept.






In summary, using any form of prototype technique makes it easy to sketch out a conceptual application and ensure the following are achieved.


So what are you waiting for? You can just create a series of screens and use the templates above and then begin to draw. As your idea progresses, you can add interactive elements that make your prototype as close to the finished product as you need it to be to communicate the design idea you want to convey.

Reviewers can use the tools such as SketchFlow, One Note  to view the application flow, and then leave feedback directly in the project as annotations. Once the feedback has been incorporated and the prototype is complete, the prototype project can be handed off to a developer for conversion into a final application,

Comments (3)

  1. TD says:

    Good article. Good information. Do you have a link to download a PDF of the App Design Template?  That looks interesting.

  2. Lee Stott says:

    Hi TD

    You can use the image directly simply just right click and save as.. Hope this helps

  3. Mike L. says:

    Good article,

    I have recently tried an  prototyping tool done in HTML5 in cloud called NinjaMock.com  and it is very good, easy to use, fast, and has super sharing possibilities and functionality to show the client or team,  and be able easy to comment. It supports drag and drop from desktop due to HTML5 and it has all elements in vector graphics,  and ability to import new icons and other elements. I used Balsamiq before,  but Ninja tool is way better and easy to work with, and has great exporting possibility, and some other collaboration and project control stuff, at least for me it was perfect. You should check it out



    It is fast free and for what I was doing it was just perfect.


Skip to main content