Wireframing



=What is Wireframing**?** =

A //wireframe// is a low-fidelity visual representation of a website’s layout design, sometimes referred to as a //skeleton//, //outline,// or //blueprint//. Often, a wireframe represents the basic page layout structure and navigational scheme of the site’s pages, as well as major site components.

Creating a wireframe the process of mocking up a website in the development phase, providing an accurate view of what a client’s website will look like. A wireframe does not contain finished design elements, but displays what and where design elements will be placed on a page. A website mockup can be accomplished by several means, the simplest done through sketching a design with pencil and paper. For professional designers and businesses though, wireframe programs such as Axure, are used. Through a simple drag-and-drop process, it is possible to lay out a representation of individual webpages complete with links and drop-down menus.

=Who Uses Wireframing? = Designers, particularly web designers, benefit from wireframing programs like Axure because they and their clients receive a thorough view of a website before it is completely designed. Axure makes design changes easy to employ and finalize before the design work begins. It is also possible to test website usability before actually developing the website, amounting to a savings of time and money. Popular wireframe programs include: Axure, Balsamiq, Mockingbird, iPlotz, The Pencil Project (Firefox add on), Protoshare, Just In Mind, Mock Flow, Lumzy, Denim (dub), and more.

=How is this relevant to technical communication? =

Technical Communicators find wireframes handy because of the ease of making changes early on in the design process. If a client doesn’t like a specific color or size of a picture or header, the change can easily be made before complex, unchangeable design decisions are made.

Rapid prototyping with wireframing generates feedback and makes the final design of the project more successful and usable. It facilitates discussion through visuals, allowing for design fixes early on before major coding and other work has been performed.

Wireframing at its easiest and lowest fidelity form simply involves using a pen and paper. Anyone can use this approach to wireframing their design and it is cheap, easy, and low risk to do. Approaching a design job with wireframes and sketches allows the designer to gain feedback from both designers and users so the final design product is successful and professional.

=**Related information/resources **=

http://www.axure.com/

http://sixrevisions.com/user-interface/wireframing-benefits/

http://www.dezinerfolio.com/2011/02/21/14-prototyping-and-wireframing-tools-for-designers

http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/

http://garmahis.com/reviews/wireframe-tools/

http://www.netmagazine.com/features/wireframe-tools-top-10-solutions

<span style="color: blue; font-family: Arial,sans-serif; font-size: 10pt;">[]