What is wireframing | Experience UX (2024)

Sometimes questions are more important than answers

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.

What is wireframing | Experience UX (1)

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 designprocess.

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.

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

  • How to create sketched wireframes in Axure
  • The beginning of the end for the Hamburger icon?
  • How to improve your e-commerce basket – usability insights from top 20 retailers

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.

Read more

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.

Read more

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.

Read more

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

Read more

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.

Read more

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.

Read more

Card sorting is a technique that involvesasking 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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

Download Our Free Guide Today!

Find Out More

    What is wireframing | Experience UX (4)

    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

    What is wireframing | Experience UX (2024)

    FAQs

    What is wireframing in UX? ›

    Wireframing is a process where designers draw overviews of interactive products to establish the structure and flow of possible design solutions. These outlines reflect user and business needs. Paper or software-rendered wireframes help teams and stakeholders ideate toward optimal, user-focused prototypes and products.

    What is the goal of wireframing? ›

    The purpose of a wireframe is to define a skeletal layout that is easy to understand, and encourages iteration and feedback. Getting to agreement on a good interface structure is a critical part of the software design process.

    What is a wireframe quizlet? ›

    Wireframes are quick sketches/outlines of page layouts. Show navigation and content elements. Why are wireframes used? To ensure finished sites meet user/client needs.

    Why wireframes are most important in UI UX design? ›

    Wireframes are used by UX designers and web designers to provide a clear visual understanding of page structure, layout, information architecture, user flow, functionality and intended behaviours.

    What is wireframe with example? ›

    Wireframes are the skeleton of a website, they show the structure and user flow. There are different levels of wireframes, from quick sketches to low and high-fidelity. But they all share a goal to align on content before finalizing the design.

    What is the process of wireframing? ›

    Wireframing is the process of iterating over many design ideas using wireframe UIs. These rudimentary designs make it easy for designers to identify and fix fundamental user experience issues before they commit to mockups and high-fidelity prototyping–which require significantly more time and resources to change.

    What does wireframing mean in web design? ›

    A wireframe is a basic, black-and-white layout that outlines the structure of a web page or an app screen. A wireframe focuses on site architecture, determines the size and location of page elements, and defines the paths between the pages.

    Why is it called wireframing? ›

    Originally, wireframes were used to show 3D objects in Computer Aided Design (CAD). You'd probably recognize the style, used in manufacturing to depict the design of cars without the need for detail, leaving the drawing looking like it's made out of wires - hence, you guessed it, the term 'wireframe'.

    What are the key elements of a wireframe? ›

    A wireframe should show the placement, size, and alignment of the components, such as navigation, headers, footers, buttons, forms, images, and text. You can use tools like grid systems, white space, and contrast to create a clear and consistent layout and hierarchy.

    What is a wireframe also known as? ›

    A wireframe is a visual diagram that outlines the skeletal framework of a website, app, or other digital product. Sometimes known as a page schematic or screen blueprint, it demonstrates how elements relate to each other and how they're structured.

    What are the advantages and disadvantages of wireframes? ›

    PROS
    • Time and Cost Effective. Making wire-frames on paper and pen is a lot easier than preparing a concept design. ...
    • Plan for Website Responsiveness. ...
    • Efficiently make changes. ...
    • Gain trust of the client. ...
    • Clients get frustrated and confused. ...
    • Design Overloaded! ...
    • Change Drawing is not always easy. ...
    • Does provide design limitations.
    Oct 10, 2018

    What is wireframing vs prototyping? ›

    A wireframe will make use of placeholders and focus on the overall structure. A prototype will make use of the actual design. Wireframes are tools to get approval from stakeholders. A prototype will allow you to test the user experience and get user feedback from user interaction.

    Is Figma a wireframing tool? ›

    With Figma's online wireframing tool, you can quickly create, share, and iterate on low-fidelity wireframes. Mid-fidelity wireframes help designers iterate and shape the final design.

    What are the three types of wireframes? ›

    Wireframes typically include basic shapes, placeholders, and labels for different interface elements such as buttons, menus, forms, text, images, and other interactive elements. There are three types of wireframes: low-fidelity, mid-fidelity and high-fidelity.

    Top Articles
    Latest Posts
    Article information

    Author: Frankie Dare

    Last Updated:

    Views: 5763

    Rating: 4.2 / 5 (73 voted)

    Reviews: 80% of readers found this page helpful

    Author information

    Name: Frankie Dare

    Birthday: 2000-01-27

    Address: Suite 313 45115 Caridad Freeway, Port Barabaraville, MS 66713

    Phone: +3769542039359

    Job: Sales Manager

    Hobby: Baton twirling, Stand-up comedy, Leather crafting, Rugby, tabletop games, Jigsaw puzzles, Air sports

    Introduction: My name is Frankie Dare, I am a funny, beautiful, proud, fair, pleasant, cheerful, enthusiastic person who loves writing and wants to share my knowledge and understanding with you.