> For the complete documentation index, see [llms.txt](https://www.designreference.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.designreference.xyz/ux-methods/ideation/wireframing.md).

# Wireframing

Wireframing is a fundamental part of the design process where you create a basic, low-fidelity outline of a webpage or app screen. You can think of it as a blueprint for a building, focusing on where elements like buttons, images, and text will go without worrying about colours, fonts, or branding. By stripping away the visual polish, designers can concentrate on the structure and layout to ensure the user journey is logical and easy to follow.

The main goal of wireframing is to communicate the functionality of a page to the rest of the team and stakeholders early on. It allows everyone to see how different parts of the interface will interact and how content will be prioritised. Because these sketches are simple and quick to produce, they are very easy to change. This makes it much cheaper to catch and fix usability issues or structural flaws at this stage rather than waiting until the software is being built or the final graphics are finished.

In a professional setting, wireframes act as a bridge between the initial abstract ideas and the final product. They provide a clear map for developers and a visual guide for content creators, ensuring that the entire team is aligned on the layout before moving into more detailed design phases. Ultimately, wireframing helps to build a solid foundation for a product, ensuring that it is functional and intuitive for the end user.

#### Further Reading

{% embed url="<https://www.nngroup.com/articles/draw-wireframe-even-if-you-cant-draw/>" %}

{% embed url="<https://nurxmedov.medium.com/why-the-best-designers-always-hated-wireframing-and-ai-just-proved-them-right-5675bd1faebb>" %}

#### Further Viewing

{% embed url="<https://www.youtube.com/watch?v=miVcrftnhzM>" %}

{% embed url="<https://www.youtube.com/watch?v=GaVGu_8CdHY>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://www.designreference.xyz/ux-methods/ideation/wireframing.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.