## 🎨 Scaffolding before build out Wireframes are low-fidelity representations of your product's layout, structure, and flow. They’re a fast, low-risk way to test ideas, explore solutions, and align your team before investing in high-fidelity design or development. In Forge, wireframes help you connect your product ideas to real user needs by tying visuals back to [[Personas]], [[Workflows]], and [[Work#📋 Stories|User Stories]]. They are tools for thinking, communicating, and validating—not just boxes and lines. ### 🛠 How to use wireframes - **Before high-fidelity design** – to explore multiple options quickly - **During collaboration** – to align product, design, and dev on layout and logic - **In usability testing** – to gather early feedback from users - **When writing stories** – to visualize the user value each story delivers You can create wireframes in tools like Figma, Whimsical, Balsamiq, or even pen and paper. Upload and annotate them in Forge to keep context and decisions in one place. ### 🎯 Why wireframes matter Wireframes bring your strategy and ideas into view and help you avoid the trap of polishing the wrong solution. They help your team: - Align on user flow and functionality before design decisions are locked in - Validate solutions with users quickly and cheaply - Identify usability issues early - Bridge conversations between product, design, and engineering - Ensure every screen maps back to a real user problem ### 🧠 What wireframes include - **User goal** – What task is the user trying to accomplish on this screen? - **Content hierarchy** – What information is most important? - **Navigation** – How will users move through the experience? - **Interactions** – What actions can they take, and what happens next? ### 🔗 How wireframes work in Forge Wireframes become more powerful when they’re connected to the rest of your planning. In Forge, you can link each wireframe to: - **[[Personas]]** – Who is this experience designed for? - **[[Workflows]]** – Where does this screen fall in the larger flow? - **[[Work#📋 Stories]]** – What specific user value does this wireframe deliver? - **User Testing** – What did we learn from testing this concept? This structure ensures that your design efforts are grounded in real needs and real strategy—not just aesthetics. --- ### Further Reading **_Don't Make Me Think_** by Steve Krug A classic guide to intuitive design and user-centered layouts. **_The UX Book_** by Rex Hartson & Pardha Pyla In-depth treatment of wireframing as part of a larger UX process.