Creating your Professional website - The website wireframing tools

December 2016


Once you have written your website specification and you may proceed to the wireframing stage. A necessary step to get a better idea of ??website usability. Many wireframing tools (free or commercial) are now available to perform this task.


What is website wireframing?


"Wireframing" refers to the representation of the organization of your website (components) and of its graphical user interface (interactivity and usability). This step comes before the design phase of your website. It can be performed by different people involved in the project and among others this phase will allow you to test the usability of the site, the time required to create it and to estimate the costs associated with implementation.

Tools and software for prototyping or wireframing


Prototyping tools are destined to all professionals gathered around a web design project. They are intended to facilitate the achievement of the final stages of your project (website/blog/a web application/mobile) and to ensure a good understanding between the different stakeholders (client, project manager, web designer...etc).

For Whom?


Wireframing tools can be used by:
  • Web project managers: wishing to present to their client a draft of the project in accordance with its specifications: tree and number of pages, menu layout, plugins, ergonomics, etc..
  • Professional in communication and marketing.

Some free wireframing tools

Pencil Project


This Open Source extension for the Firefox browsers allows you to create user interfaces, using a wide range of tools. It provides many graphical elements (stencils) to build the schema of pages, and also:
- The creation of multiple pages.
- The creation of links between pages.
- The text editing tool.
- Export your work to HTML, PNG, OpenOffice.org, PDF and Word.
- Perform standard operations: alignment, rotation, resizing.
The official website: http://pencil.evolus.vn/en-US/Home.aspx.

Lumzy


A collaborative tool for website prototyping. It offers fifty graphical elements (buttons, lists, text boxes, scroll bars, geometrical figures etc.), that can be dragged & dropped over the workspace. It supports the creation of multiple pages (separate tabs). Lumzy also includes a tool for image editing, instant messaging, and many standard action buttons.
Try Lumzy: http://lumzy.com/.

MockFlow

  • The free version of this online wireframing tool allows you to create projects, with maximum of projects 4 pages.
  • Try MockFlow: http://www.mockflow.com/samples/.

Some premimum tools and services

Balsamiq

  • This collaborative tool (desktop client for Windows, Apple and Linux) allows prototyping of applications or websites. Its interface has 75 commands/integrated actions. Balsamiq also offers 187 insertable icons, making it one of the most complete wireframing tools. It cost $79.
  • Try Balsamiq.

Mockingbird


A intuitive tool for creating and sharing mockups online. It is available for $9 per month.

Related :

This document entitled « Creating your Professional website - The website wireframing tools » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.