Wireframe

Working on a website project? Not sure what the website owner really wants? Start with wireframes! Wireframes are page schematic or visual guides for arranging the information on a given webpage. This process of creating wireframes is tremendously useful when there are ambiguities and uncertainties about the overall layout of the website.

So, are wireframes hand drawings?

Not necessarily. Wireframe could be a hand drawing or a drawing made using some software tool or plain/simple HTML page. There are quite a few tools available – OS specific applications as well as web-based tools, which allow a user to create the proposed layout of a given webpage. These drawings communicate the thought process behind the layout of the webpage.

Essense of a wireframe is that it dissociates the look and feel (colors, fonts, images) from the structure and layout of the information and functionalities. Look-n-feel tends to distract the users from functional requirements and business objectives of the given webpage. Users typically start commenting on the choice of colors, their preferences for fonts etc even before the layout is finalized. By working on wireframes before visual design, we can help the stakeholders focus on business objectives, functionalities, and navigation.

Profilewireframe
Wireframes focus on:

  • Functionalities available on the page
  • Relative priorities of information, various components, and functionalities
  • Conditions/Rules for displaying certain portions/sections of the page
  • Navigation to other pages/components based on the user action.

Wireframes and Usability

Typically, wireframes also undergo usability testing. This ensures that the critical business objectives and workflows are handled correctly and most user-friendly manner. Early feedback can save a lot of work at later stages.

Wireframing tools

  • Balsamiq
  • Moqups
  • InVision
  • Axure
  • And many more

Related Links

Related Keywords

Information Architecture, User Experience, Visual Design

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.