Wireframe diagrams: what are they and why they’re so useful


A wireframe diagram for a corporate website

A wireframe diagram for a corporate website

A wireframe diagram, known also as a page schematic or screen blueprint, is a handy visual representation for the look of a web page.

A wireframe diagram is usually used for a proposed web page, such as for a new site or a new look for an existing site. The reason you may need to create one is so that others you are working with can inspect the design or for management to sign-off the look of the site.

It doesn’t have to include font style, colour, or even graphics, as the main focus lies on the overall structure and layout of content within the page.

Benefits of wireframe diagrams:

  • Easily show your vision for the site
  • Get feedback from stakeholders (anyone with an interest in the site such as your customers)
  • Manage expectations of stakeholders as to what the look of the site will be

An example of free wireframe software

Creating a website wireframe is easy with Gliffy’s free wireframe tool. Just drag and drop boxes, buttons, and lines from the web wireframe tool shape library anywhere onto the page. Then add text to your website wireframe to create a clear, website mockup.

Top 20 Wirefame tools

Wireframes can be created in many ways depending upon your needs and budget:

  • Most simply, use pen and paper!
  • Illustrator, Fireworks or PowerPoint can create wireframes with a bot of time.
  • There are interactive wireframe tools which allow collaboration with clients prior to the website programming stage. See garmahis.com/reviews/wireframe-tools/ for details of wireframe tools.

Tags: , ,