Website Design: Tips for Wireframing

Wireframes allow developers, designers, trainers, managers, marketers, etc. to communicate and transfer knowledge to different types of audiences through the use of diagrams, images, models illustrations, or drawings. They exist in the form of screenshots, diagramming, and modeling applications. A few of these features are already included within existing applications. These suites of tools provide the ability to translate concepts into functional requirements, prototypes, and eventually real models or products. Another important capability is the facility to present easily understandable views of processes and procedures.

They are extremely useful in helping to avoid misinterpretations of deliverables in a global market by providing:

• a view of, e.g., user interfaces, procedures, and schemas (for interactions, workflows, and relationships),
• the ability for early website design decision-making, and
• a means for translating complex ideas into simpler concepts or thoughts.

Many of these tools are accessible on the web for free. Here are some tips for wireframing:

• Make sure that the application does what you need it to do and functions in a way that is easiest for you to use. For example, can it easily help to develop use cases, testing scenarios, flow diagrams, site maps, functional specifications, charts, processes, prototypes, etc.?
• Can it create a view of the information architecture and aid in organizing data into categories, visual frameworks, and models?
• Does it fit within your system platforms (web-based or desktop application)?
• Can saves be performed in various formats and are they shareable?
• Check out the options. Is it suitable for you – can it help with online static content as well as dynamic content?
• Check out the ease of use. Does it provide, e.g., ease of navigation, drag and drop, preformatted styles and templates for flow charts, org charts, and diagrams?
• Is it interactive; can it create a simulation or can comments be added? Does it allow for online learning, presentations, storyboards, and mockups to explore a wide variety of design options using different formats?
• Are objects reusable?
• Is it flexible enough for use on mobile devices?
• The most expensive may not be the best application. Check out licensing agreements and costs before purchasing. Make sure you have the correct number of licenses for the number of machines or platforms that are needed for the present and the future.

In the end, when deciding on a wireframe tool, think of the above questions as well:

• Can it help to provide information and knowledge to help meet business goals?
• Can it aid in training and marketing for understanding the product?
• Can it help in presenting departmental, software, or functional processes?
• Can it help to meet the company goals and provide the desired outcome?

Wireframes aid the technical writer in creating a structured framework for communication. It is the skeleton of a product or process and is a great aid in getting technical writers through the first stages of development. You might say it’s an outline and provides a background from which to begin building.

Please leave a comment if you have used or found that wireframes are indeed useful.

Theresa Pojuner