Sometimes questions are more important than answers

What is wireframing?

Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to layout content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.

Sophie and Emma wireframing at the whiteboards

Wireframing is essential in UI design

A wireframe is a layout of a web page that demonstrates what interface elements will exist on key pages. It is a critical part of the interaction design process.

The aim of a wireframe is to provide a visual understanding of a page early in a project to get stakeholder and project team approval before the creative phase gets underway. Wireframes can also be used to create the global and secondary navigation to ensure the terminology and structure used for the site meets user expectations.

A wireframe is much easier to adapt than a concept design

It is quicker and cheaper to review and amend the structure of the key pages in a wireframe format. Iterating the development of the wireframes to a final version will provide the client and the design team confidence that the page is catering to user needs whilst fulfilling the key business and project objectives.

Wireframe Example

Wireframing takes place early in the project lifecycle

Often used to complete the User-Centred Design process, wireframes are also used at the beginning of the design phase. A prototype usability test will often be a test of the wireframe pages to provide user feedback prior to the creative process.

Wireframes can be simply hand-drawn but are often put together using software like Microsoft’s Visio, to provide an on-screen delivery. However, if the wireframes are going to be used for a prototype usability test, it is best to create them in HTML. There is some good software that allows you to do this easily including Axure RP or Omnigraffle (Mac only).

Advantages of Wireframing

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 for prototype usability tests. 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 wireframes can be used as a good dialogue between members of the project team to agree on the project vision and scope.

Disadvantages of Wireframing

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.

Conclusion

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.

You may also like

More UX Methods Questions

Usability testing is a way to see how easy to use something is by testing it with real users. Users are asked to complete tasks, typically while they are being observed by a researcher, to see where they encounter problems and experience confusion. If more people encounter similar problems, recommendations will be made to overcome these usability issues.

User-centred design is a process or set of tools used to design a service which focuses on what users need at the very beginning and continues throughout development until launch. Typically services are designed from a technical and business perspective, with consideration for users added in later. Instead, User-centred design ensures the service focuses on what users need before balancing this with the technical and business requirements.

Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.

Website prototypes are interactive demos of a website. These are often used to gather feedback from project stakeholders early in the project lifecycle, before the project goes into final development

User requirements capture is a process used to understand what typical users will need from a service which is about to be designed. Users are observed using similar services and interviewed about the ways they go about planning and completing their goals. This information is used to identify a list of content, features and functionality the new service must have in order to satisfy the needs of its users.

Customer profiling is a way to create a portrait of your customers to help you make design decisions concerning your service. Your customers are broken down into groups of customers sharing similar goals and characteristics and each group is given a representative with a photo, a name, and a description.

Card sorting is a technique that involves asking users to organise information into logical groups. Users are given a series of labelled cards and asked to organise and sort them into groups that they think are appropriate. Card sorting helps you to design an information architecture, workflow, menu structure or website navigation paths.

A user journey is a path a user may take to reach their goal when using a particular website. User journeys are used in designing websites to identify the different ways to enable the user to achieve their goal as quickly and easily as possible.

Focus groups are a research method used to gather feedback and opinions from customers. Each person in the group is encouraged to participate in a discussion which is pre-planned by a researcher and is guided by a facilitator. Focus groups are typically used to gauge opinion and gather information from users about products, services, and features before they have been developed.

Remote usability testing is a way to test how easy to use a website is with users who are in a different geographical location. Traditional usability testing brings users and researchers together in one place to conduct the test, whereas remote usability testing allows the researcher and user to be in different locations while the test is completed.

An expert review is where a usability expert uses his/her knowledge and experience of testing websites with users to walk through a website in the shoes of a typical user. The expert will spot problems and recommend changes to improve usability when budgets and timescales don’t allow for user research.

Service design makes a service easier to use, more useful and more desirable for the customers who need to use it: the service user. Whether creating an entirely new service or improving an existing one, service design focuses on what customers really need at each stage of their interaction with an organisation.

Ethnography is a study through direct observation of users in their natural environment rather than in a lab. The objective of this type of research is to gain insights into how users interact with things in their natural environment.

Tree testing is a way of evaluating a proposed site structure by asking users to find items based on the sites organisation and terminology. This online test only displays the navigation links and removes any additional clutter.

Find Out More

    First Name (required)

    Last Name (required)

    Email (required)

    Telephone Number

    Message (required)

    I Agree (Tick To Agree)
    The data collected from this form will be used to respond to your enquiry. You can find out more about how we process your personal data in our privacy policy

    Let’s Chat

    If you’re ready to introduce the innate power of human centeredness to your products, services and brand, drop me an email today.

    01202 293652 alicarmichael@experienceux.co.uk