Wireframing

Wireframing is a relatively simple task, on the surface. A wireframe is a visual representation of the functional requirements of a site at a given stage in the development of the design process.

There are 3 main types of wireframes

  • Low fidelity (usually marker on paper or whiteboard, very large-scope and great for getting the basics down for further refinement or discussion)
  • Medium fidelity (generally a computer-generated page representation with iconography and labels to show where assets are on the page and sometimes the interactivity between assets – at this stage the requirements should be fairly set in stone and fine-tuning can take place.)
  • High fidelity (can range from a fully flushed out visual comp to more general visuals like placeholder graphics – should be the stage that is near-ready for the graphic designer to refine into the candidate that gets sliced – sometimes produced by the designers)

PDF Version

A good wireframe toolset should be the vernacular of communication about higher level concepts on the site including a semantic understanding of the engagement of your user. It will also give a basic understanding of the use of real estate and basic layout.

User Experience professionals will have a variety of tools available from 3rd party programs or SaaS tools to a graphic library that has been contributed to over the years.