Website and Application Wireframing and Prototyping
November 7th, 2008When it comes to web design, probably the most important aspect of a site is the usability. How your users are going to navigate your site and interact with the elements. How are exterior pages going to differ from interior pages and do those changes make sense to a user, or just confuse them, and drive them away. These are all issues that a web designer need to think about, and often times, are the last issues to be addressed. Design is the first priority, and a lot of designers will spend most of their time making the site look great, without every thinking about how the site is going to function once it becomes live.
Enter wireframing. This is the process of creating a prototype of the site or application, to allow your client to visualize the structure and in some instances interact with it, before committing a lot of time and energy on the graphics and coding. It seems that most design houses have their owbn process, and everyone tends to work in a different format, but the results are the same. A rough look at the final product, allowing you to quickly identify usability problems, and potentially confusing navigation or interfaces.
For me, wireframing comes down to building creating a site prototype in InDesign, allowing for full site navigation and interaction within a .pdf document. I can even add video, or interactive objects, to help communicate the site functionality. Invisible buttons allow me to simulate functionality, transparently to the user. It is a very slick process and it has added a level of value to my process that clients have not experienced before.
So, while this is a great step, and I feel that my wireframes and prototypes really are essental. Not only to work through potential usability issues, but also to provide my clients with that added level of involvement with the site design, and a sense of ownership that they might not otherwise have. My biggest problem is either, I am creating something that looks too finalized, that the client then begins wondering why our timeline still accounts for another month of coding and troubleshooting, or my wireframes are too rough, and don’t accurately identity potential problems because I could not spend the time fully implementing a working prototype, because it was not billed into the final cost. I needed a solution that could work with my existing workflow, Indesign and .PDF’s. Be robust enough that I could quickly create wireframes without wasting time recreating the same elements, over and over. And allow for a clean look that doesn’t convey a sense of completeness, but allows for full interactivity within my prototype.
So I created ProtoICONS, a Rapid Website or Application prototyping tool to be used with your favorite Adobe products. The final product will be available for Adobe® InDesign®, Adobe® Illustrator, Adobe® Fireworks, Adobe® Flash,
and Adobe® Photoshop®, and potentially Adobe® Dreamweaver®.
![]()
While the product is not ready to be released yet, it is getting very close, and I wll be revealing more information soon.
You can signup for our newsletter at ProtoICONS.com to be updated with the latest development news. In addition to being the first to know, mailing list subscribers will be given a discounted early-bird sale, to allow them to get in at a highly discuonted cost.
I urge everyone to take a look at it, and see how ProtoICONS can enhance yur workflow.




