Prototyping and Wireframes

Prototyping and wireframes

The importance of Prototyping and wire-frames.

I have done many projects involving wire-framing (usually with omnigraffle and Invison, or Azure, or Photoshop and Illustrator.)

I was working on several prototypes for a global community website and found it very difficult to get any feedback. I was in the unusual situation in which I actually knew who my users were, all 330 of them. However, they were very busy entrepreneurs who had no time to spend on the development of a site whose use they had yet to understand. This makes the design and development of a site even harder, as vocal members will assert their taste, while passive members will stay silent, and feeling uninvolved and not connected to the design, they will drift off. It was only by pulling the users into discussion via a blog that I was able to create some sort of interaction.


MetLife Global Next Gen project

World Trade Centre Global Intranet

Verizon Devices UX

Here is an example of a comparison I made of two websites that have the same objectives. Two publishing houses that sell scholarly works.



Examples of Wireframing.


oro2_wireframesR4_october05_Page_04_Subject_Landing-500x385 oro2_wireframesR4_october05_Page_04_Subject_Landing oro2_wireframesR4_october05_Page_02_Home-515x400 oro2_wireframesR4_october05_Page_02_Home-500x366 oro2_wireframesR4_october05_Page_02_Home-300x219

I prefer testing a site in a real world situation, my skills at Photoshop help me enormously in this respect. I don’t believe anyone, especially a sample untrained user, can make much sense of wireframes.

Prototyping and wireframes are an essential way to create a site that the content producers – often marketing managers or editors – can understand before the heavy lifting of the developer begins. This reduces costs and improves communication. However, wireframes and prototyping are luxuries that not every project can afford (in time and money) or is really necessary.

An example is a a small micro site with limited content. These can be built very easily in WordPress in a matter of hours and can be prototyped on the fly. The advantage of this is that its a real What -You-See-Is-What-You-Get experience, and when finished, so is the development. Also, if your designer is an experienced developer, and the project team and stakeholders are a small group, then direct to development strategy is the way to go.

I have worked in both ways, developing in Joomla as well as wireframing in all sorts of tools, from Word to online wireframing tools like Protoshare. A good prototying strategy upfront saves a lot of work and miscommunication in the long term.


Prototyping and Wireframes

Leave a comment