UI prototypes and iPad/iPhone wireframes

Working on earlier design of the new system there are different ways in approaching UI design – from white board, favorite piece of napkin to modeling tools. Well, one can skeep it all together and jump into Visual Studio or Eclipse and start jamming together some nice forms.

Experience shows again and again that using prototyping in software development allows shaving hours, days or even months from release schedule.
From various types of concepts and prototypes UI prototypes are most difficult and if missed could kill any project down the road.

Setting proper UI expectations, creating reference materials for your project plan, getting earlier feedback from potential or existing customers – benefits are many.

How elements are placed on the screen? What themes/colors/styles are to be used? How screen is changed following workflow? How dialogs are organized?
Questions asked and answered earlier can become crucial for the project as early as getting a “GO” and as late as releasing version 1.0 and being forced to roll it back.

Do not underestimate power of the visualization!

Designing UI

There are plenty of tools around which give you some infrastructure to do UI prototypes.
To mention few:

  • Microsoft Visio – among others there is a Wireframe Diagram, Storyboards, workflow diagrams
  • FrameMaker
  • PowerPoint
  • Photoshop
  • OmniGraffle for Mac or iPad
  • WireframeSketcher plugin for Eclipse – basic wireframes with sequencing
  • Balsamiq Mockups – cross platform, community supported device elements library
  • Axure – web-oriented, interactive
  • MockupScreens – slightly outdated
  • Remember PVCS? Serena offers Serena Prototype Composer – activity flow and UI elements integration

Stick with what you have or Visio stencils

There could be many options, but I like to stick with what I am most familiar or have in my reach. So I choose Visio 2010 (part of MSDN).

By default however, Visio provides only with basic controls, toolbars, dialogs. What missing are actual stencils (collection of shapes) to be used to do UI design for the target platform.

Designing for Windows is different from designing for Android, iPhone or iPad and availability proper UI elements in our disposal is important.

No One is Left Behind

Internet is powerful thing and most of the time someone already went on the journey of helping others.
Problem is that it is difficult to find libraries for Visio. There is an option though – exporting from OMNIGRAFFLE in XML format for Visio.

Let’s list some:

This entry was posted in Web-design and tagged , , , , , . Bookmark the permalink.
  • About

    From a junior developer through Sr Manager position, I was always interested in new technologies. Passionate speaker, IT junky, developer, architect, team lead, and development manager - many hats, one goal - making software better and being closer to people’s needs. For the most part I am using my blog as a scratch pad, writing small articles on things which I came across, was asked about more then once, and which would otherwise require additional research again and again.

  • Testimonials

    The greydragon theme is fantastic. It’s clean, stable and feature rich. It took me a while to decide to move to G3 but with a there like this one, I could no longer resist. Thanks!


    I’ve used your Greydragon theme ever since I switched to using Gallery3. It looks very slick; it does everything that I want; it is easy to customise the appearance with its many options; image preloading makes it faster than other … Continue reading

    Brian Stewart
  • Categories

%d bloggers like this: