Wireframes and prototyping
Categories
Wireframes in the web design world are quick sketches of the layout of the content, navigation, images, and other design material within a web page. They can also be used to map out the flow of an interaction to complete a task.
When it comes to wireframes, what is the best methodology to use?
I’ve used paper cutouts, drawings, InDesign, Omnigraffle, and Photoshop. None of the methods is better than the other, but I prefer drawings. Wireframes and prototyping are really useful for understanding the problem and coming up with quick solutions. InDesign, Omnigraffle, and Photoshop tend to be too cumbersome for the purpose. Wireframes and prototypes aren’t deliverables after all. The final product is the deliverable. It doesn’t make much sense building and nice prototype when the work on that prototype will simply be discarded in the long run.
Let me clarify a little bit, like most things in life interaction design is a iterative process. The designer draws an idea, thinks about it, modifies it, redraws it, thinks about it, and repeats. If the process is complex enough or there is a meeting with a non-technical stakeholders, then the wireframes need to be a bit more detailed. If the audience is simply a core set of technical team members, then the designs don’t need to progress pass the initial drawing stage. Once that audience grows beyond the core team, then the designs need to reflect some sense of final design at least in terms of color, buttons, links, and other easy to implement design features. The reason for this is because non-technical managers will get hung up on the design and won’t be able to focus on the real reason for the meeting. Usually the real reason for the meeting is to discuss the flow of pages, the placement of content, and the workflow needed to make the concept a reality. When the meeting gets hung up on the design, little progress is made.
