Evolving Simple Wireframes With AppMock

In an earlier post I introduced the initial wire-frame design for an application that I’ll be creating from scratch in XAML and C#, tentatively named Conference Buddy.  As noted in that article, Phil Japikse will be creating the same application in HTML/JavaScript and Michael Crump will be creating the companion application for Windows Phone 8.

As we think about and design (and re-design), we’ve switched over to a Telerik AppMockPage1show case application named AppMock , available in the Windows Store

In addition to the advantage of dog-fooding our own product (always a good thing to do), we can see more closely what controls we’ll need and how we might layout the actual pages of the application, as seen in figure 1

Of course, nothing makes up for the fact that I’m not a designer, but having a toolbox that has all the controls I might actually use in a Windows 8 project is a huge advantage,

AppMockToolBox

As Phil mentioned in his excellent article on the importance of Wire-Framing, this gives us a great head-start on creating the application itself.  It is a lot easier to manage, manipulate and maintain wire-frames than to make these changes in the actual UI of the application.

AppMock itself allows you to quickly and easily create prototypes of your Windows Store application.  It provides a rich set of Windows 8 style tools and components, grouped into categories (as you can see in the figure).  You can organize your prototype into page (called sheets) and in the end you can run the project to see it in action by navigating through the pages using preset links (hot-spots). 

The difference between which controls are available in AppMock (and thus, in Windows 8 out of the box) and those which are in the initial wire-frame received from the designers helps shape the initial discussions.  Do we need custom controls or where they suggesting layout that can be replaced with out of the box controls?  All of this is grist for the mill as we narrow in on the look and feel of the application.

Note that while these conversations are continuing, there is no reason that we can’t be laying out our data classes, creating our data model and creating our view model.  For that matter, we can be doing some preliminary view work, subject to radical change as things sort themselves out.

Share

About Jesse Liberty

Jesse Liberty is a Master Consultant for Falafel Software, and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
This entry was posted in Design, Essentials, Tools and Utilities, Windows 8. Bookmark the permalink.

4 Responses to Evolving Simple Wireframes With AppMock

  1. It is not my first time to visit this web site, i am visiting this web page
    dailly and take pleasant information from here all the time.

    Here is my homepage car loans for bad credit orlando FL

  2. Fastidious answers in return of this issue with firm arguments
    and telling the whole thing about that.

    Review my website – car loans bad credit orlando FL

  3. whoah this weblog is excellent i love studying your
    posts. Keep up the good work! You already know, lots of individuals
    are searching round for this information, you could help them greatly.

    Here is my blog – car loan bad credit orlando FL

  4. Wireframe says:

    attractive and useful article.. keep it great information. thanks

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>