Low-Fidelity Wireframing Toolkits (Figma, Miro), helpful little UX tools to visualize sitemaps and design low-fidelity wireframes. With dozens of wireframing templates and an option to import an existing sitemap for further editing.
- Website Structure and Mapping (Figma kit)
- Wireframer: Quick Wireframing Library
- Wireframe Placeholder Generator
- Wireframe Figma plugin
- Wirebox Hi-Fi -> Lo-Fi Figma plugin
- Dashboard Low-Fidelity Wireframes (Miro)
- Low-Fidelity Wireframe Templates
- Visual Website Generator
- Dravter Lo-Fi Wireframe Kit (Figma)
- Lookscout Design System: Low-Fidelity Wireframe Kit
- Low-Fidelity Wireframes Template (Miro)
- Whimsical Mapping Templates (100s of templates!)
Wireframes are not mock-ups. The former are basic, black and white renderings of designer’s intent. The latter are static yet more realistic representations of designer’s vision.
Personally, I use wireframes to visualize my ideas and guide a conversation in the right direction. Sometimes we would do it on a whiteboard or on paper, yet when we want to gather feedback or explore ideas without focusing too much on details, low-fidelity wireframes are just much more effective. Especially for conversations about structure, IA and priorities.
High-fidelity wireframes, on the other hand, often take too much time to produce without any tangible value. Once we know the priorities and agree on the overall design direction, I want to see the design coming to life in mock-ups — with colors and typography and design patterns and interactions.
And once we have that, I try to move to the browser as soon as possible. Fonts in an HTML/CSS prototype are rendered differently than in Figma or Adobe XD. Running usability or accessibility testing is impossible on an artboard. And in the end, final design decisions are made in and informed by the browser.
