Wireframe

Wireframes are simple, black and white designs used to determine the structure and layout of content in websites and applications, focusing on element placement, hierarchy, and function.

About

A Wireframe is a low-fidelity visual representation of a webpage or application's layout and functionality. By outlining the structure, content placement, and navigation, Wireframes serve as a blueprint for design and development. They are valuable in user interface design, website planning, and prototyping, where defining the fundamental framework guides collaboration, user testing, and iterative refinement. Wireframes bridge the gap between conceptual ideas and functional design, fostering alignment and efficiency.

Suitable for

  • Quick, inexpensive design and presentation of the structure of application or website content
  • Communication with the client and verification that the project is headed in the right direction
  • Subsequent creation of an interactive prototype and initial testing

Deliverables

Low-Fidelity Wireframes

Rough sketches or simple digital designs of the website/app layout to illustrate the basic structure and key elements of the user interface. Typically, low-fidelity wireframes are used in the early stages of the design process.


High-Fidelity Wireframes

Detailed, pixel-perfect, and often interactive digital representations of the final user interface design, showcasing the final layout, content, and navigation structure. High-fidelity wireframes are used to review designs with stakeholders and for usability testing.


Wireframe Annotations

Detailed notes and explanations accompanying wireframes, explaining the purpose, rationale, and functionality of specific UI elements and interactions, aiding communication among team members and stakeholders.


Clickable Prototypes

Interactive wireframes, often created using high-fidelity designs, that allow users to navigate through the app or website to test its functionality and usability. Clickable prototypes are used for usability testing and stakeholder demonstrations.


User Flow Diagrams

Visual representations of the various paths users can take within the app or website, based on the wireframe design. User flow diagrams help identify possible issues and opportunities for improvement in the user journey.


Responsive Design Wireframes

Wireframes that showcase how the app or website will adapt to different screen sizes and devices, ensuring a seamless user experience across multiple platforms.


Wireframe Version History

Documentation of the different iterations and versions of the wireframes throughout the design process, providing a clear record of changes made and decisions taken during the course of the project.


Usability Testing Results

A summary of the findings from usability testing conducted on wireframes or clickable prototypes, capturing user insights and feedback to inform design improvements and iterations.

Procedure

1

2

3

4

5

Prerequisites

Time

an hour to days depending on the project size and number of sketched pages


Tools

paper (clean, with grids) and pencil, or software


People

you can do it yourself, but it's best done as a team

Resources

Support the project

Donate to UX Methods today. As the largest UX method database on the web, your contributions will help maintain our platform and drive exciting new features. Keep the resource free, up-to-date, and comprehensive for everyone. Make a difference in the UX community!