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.

Comments are closed.