#+TITLE: Wireframe Designs 
#+OPTIONS: num:nil tags:t toc:t
#+DATE: <2025-11-06 Thu 22:01>
#+FILETAGS: :learning:notes:
#+WIP:

* What are wireframes?

Wireframes are basic visual representations of a website, app, or digital product that focus on structure and layout rather than design details like colors, fonts, or images. They typically include elements such as:

- Navigation menus

- Buttons

- Content blocks

- Headers and footers

Wireframes range from low-fidelity sketches to high-fidelity {{{sidenote(1, Low-fidelity (lo-fi) refers to a basic\, quick prototype that focuses on core concepts with minimal detail\, while high-fidelity (hi-fi) refers to a realistic\, detailed prototype that closely mimics the final product's look\, feel\, and functionality)}}} mockups, depending on the stage of the design process.

* Why wireframes are useful

Wireframes are essential tools in UX and UI design for several reasons:

- Clarify layout and functionality: They help designers and stakeholders visualise how users will interact with the product

- Facilitate collaboration: Wireframes serve as a communication tool between designers, developers, and clients, aligning everyone on structure and goals (close the feedback loop)

- Identify usability issues early: By focusing on user flow and interface logic, wireframes allow teams to spot and fix problems before investing in detailed design

- Support iterative design: Wireframes are easy to update and adapt, making them ideal for testing and refining ideas

* When to use wireframes?

Wireframes are typically created in the early stages of product development, before visual design and coding begin. They’re especially helpful during:

- Initial concept development

- Stakeholder presentations

- User testing and feedback sessions

* Competency example:

[[../../assets/images/wireframes/Screenshot 2025-10-31 112139.png]]
[[../../assets/images/wireframes/Screenshot 2025-10-31 112206.png]]
[[../../assets/images/wireframes/Screenshot 2025-10-31 112427.png]]
[[../../assets/images/wireframes/Screenshot 2025-10-31 115621.png]]
[[../../assets/images/wireframes/Screenshot 2025-10-31 115949.png]]
[[../../assets/images/wireframes/Screenshot 2025-10-31 120038.png]]
[[../../assets/images/wireframes/Screenshot 2025-10-31 120203.png]]