Wednesday, April 24, 2013

Creating a Windows 8 Store App - Part 2

Before you can start building the application we need to design how the application will look like, and work. So lets create a GUI Prototype using the use cases in Part 1.

There are several tools for creating GUI prototypes, Microsoft SketchFlow are only available with Visual Studio Premium, because of that I will go with Pencil Project instead, it's a free open source project that works in a similar way.

Download and install Pencil Project.

Create a new Dokument.

Change page properties.

Change page size.

 OK, when to apply new size.

Use the Sketch Stencils, to get a sketchy look on the components.

We can now add a box, label and so on to create a layout of the application:

To add a New Page click on Add Page to handle New Routes click "New Page":

Add a descriptive name to the new Page:

 It's possible to add links between the pages by right clicking items and choose link to, so we add a link to the main page to return from the New Routes page:

When the prototype is completed it's possible to export the document into different formats, so the people that is going to review the prototype dosen't need Pencil project installed: 

I choose web page because everyone has a web browser:

Export all pages:

Choose the output directory, I created a MyRoutesHTMLExport directory:

The result is a html page and resources:

The page show our prototype, and is clickable to jump between pages:

I will try detail the pages more in the next blog post.

No comments: