What are Wireframes?

What is a Wireframe?

Wireframing is a way to design the Layout and Structure of a website. Wireframes are created early in the Development Process to establish the basic structure of a page before visual design and content is added – taking into account the user needs and user journeys.

There are no images, colour or actual content used in a Wireframe. For images there is usally a Placeholder or a box with a cross through it, and for text – Dummy Text such as Lorem Ipsum is often used.


Advantages of Wireframes

One of the great advantages of wireframing is that it provides an early visual that can be used to review with the client. Users can also review it as an early feedback mechanism. Not only are wireframes easier to amend than concept designs, once approved by the client and the users they provide confidence to the designer.

From a practical perspective, the wireframes ensure the page content and functionality are positioned correctly based on user and business needs. And as the project moves forward they can be used as a good dialogue between members of the project team to agree on the project vision and scope.


Disadvantages of Wireframes

As the wireframes do not include any design, or account for technical implications, it is not always easy for the client to grasp the concept. The designer will also have to translate the wireframes into a design, so communication to support the wireframe is often needed to explain why page elements are positioned as they are. Also, when content is added, it might initially be too much to fit within the wireframe layout, so the designer and copywriter will need to work closely to make this fit.


How to build a Wireframe

Creating a wireframe can be as simple or as complicated as you want. In its most basic form, your wireframe might be nothing more than a sketch on some graph paper. Other “wireframes” are created digitally and are really more like prototypes, with clickable objects and limited functionality. Usually, it’s pretty simple for a site with just a few pages such as a local restaurants website, but more diverse sites will have a more complex wireframe.

The type of wireframe you create will depend on what the individual project requires, as well as what your own workflow is like. More complicated projects will likely have more complicated wireframes, while simple sites might have simpler wireframes.


Closing Thoughts

Wireframes should be used early in a project to get user and client approval on the layout of key pages and the navigation. This will provide the project team, specifically the designers, confidence in moving forward. Wireframes will also save considerable time and money in the testing and amends phase later in the project.