added makefile and cleaned backups

backups/wireframe-designs.org~

@@ -0,0 +1,51 @@
+#+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]]