52 lines
2.2 KiB
Org Mode
Executable File
52 lines
2.2 KiB
Org Mode
Executable File
#+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]]
|