Wireframing & Prototyping

## What is Wireframing?  

A **wireframe** is a basic layout of a webpage or app **without** colors, images, or branding. It focuses on structure and content placement rather than aesthetics.  

### 📌 Why Use Wireframes?  
✔ Helps visualize the structure before adding design elements.  
✔ Saves time by identifying usability issues early.  
✔ Makes collaboration easier between designers and developers.  

---

## Low-Fidelity vs. High-Fidelity Wireframes  

Wireframes can be simple sketches or detailed mockups, depending on the stage of the design process.  

🔹 **Low-Fidelity Wireframes**  
- Hand-drawn sketches or simple digital layouts.  
- Uses boxes and placeholders for elements.  
- Focuses on overall page structure.  

🔹 **High-Fidelity Wireframes**  
- Digital designs with more details.  
- Includes typography, buttons, and grid layouts.  
- Closer to the final UI but still lacks interactivity.  

💡 **Example:**  
A hand-drawn sketch of a mobile app login page is a **low-fidelity wireframe**, while a digital version with actual buttons and fonts is a **high-fidelity wireframe**.  

---

## What is Prototyping?  

A **prototype** is an interactive mockup that allows users to click through and **test the design** before development.  

✔ **Clickable elements** – Simulates real app interactions.  
✔ **Early usability testing** – Helps detect UX problems.  
✔ **Improves collaboration** – Designers, developers, and stakeholders can review and give feedback.  

### 🖥 Prototyping Process  
1️⃣ **Create a wireframe** – Start with a basic layout.  
2️⃣ **Add interactivity** – Link pages/buttons for user flow.  
3️⃣ **Test with users** – Gather feedback to improve usability.  

---

## Best Wireframing & Prototyping Tools  

There are several tools available to create wireframes and prototypes. Here are the most popular ones:  

📌 **Figma** – Wireframing & Interactive Prototyping (Great for collaboration).  
📌 **Adobe XD** – UI/UX Design & Prototypes (Good for high-fidelity designs).  
📌 **Balsamiq** – Quick & Simple Wireframing (Best for low-fidelity sketches).  
📌 **Sketch** – UI Design Tool (Used mostly for macOS users).  

💡 **Pro Tip:** If you're new to UI/UX design, start with **Balsamiq** for quick wireframes and move to **Figma** or **Adobe XD** for prototyping.  

---

## Wireframing & Prototyping Best Practices  

✔ **Keep it simple** – Avoid unnecessary details in wireframes.  
✔ **Focus on usability** – Think about user flow and navigation.  
✔ **Use real content** – Avoid lorem ipsum; real text improves testing.  
✔ **Test early & often** – Gather feedback from users before development.  
✔ **Use grids & alignment** – Ensures a clean and structured design.  

---

## Practical Exercise  

### 🎨 Create Your First Wireframe  
1️⃣ **Step 1:** Sketch a wireframe of your favorite app (e.g., Instagram, Twitter).  
2️⃣ **Step 2:** Use **Figma** or **Adobe XD** to create a digital version.  
3️⃣ **Step 3:** Add interactions (buttons, links) to turn it into a prototype.  
4️⃣ **Step 4:** Share and test it with a friend or colleague.  

---

## Summary  

✔ **Wireframes** are blueprints of a design, focusing on structure and layout.  
✔ **Low-fidelity wireframes** are simple sketches, while **high-fidelity wireframes** include detailed UI elements.  
✔ **Prototypes** are interactive mockups used for usability testing.  
✔ **Popular tools** include **Figma, Adobe XD, and Balsamiq**.  
✔ **Best practices** include testing early, using real content, and keeping designs user-friendly.  

🚀 **Next Steps:** Try creating a wireframe and prototype for your own project!