Low-Fidelity Wireframes - Paper & Digital
Low-fidelity wireframes are the fastest form - deliberately simple using boxes, lines, and placeholder text. Paper sketches can be produced in seconds, making them ideal for exploring many ideas before committing any screen time in Figma.
Paper Wireframing - Speed Over Polish
Paper wireframing (sketching) is the fastest ideation tool available. The 'Crazy 8s' exercise from Google Design Sprint: sketch 8 different screen concepts in 8 minutes. At that speed, quantity beats quality - generate many ideas, identify the best, then develop only those in Figma. Paper wireframe notation: rectangles for content blocks, X-inside-rectangle for image placeholders, horizontal lines for text, simple rectangles with labels for buttons. Use thick markers (not pens) to prevent over-detailing - thick lines make precision impossible, keeping focus on structure.
Start low-fi to iterate fast. Only go high-fi once layout is validated.
Digital Lo-Fi Wireframes in Figma
- Use only two colors: #FFFFFF (background) and #333333 (content). Zero brand colors, zero final typography
- Gray rectangles for images (fill #CCCCCC), thin rectangles for text blocks, labeled rectangles for buttons
- Use real copy for critical elements: button labels, nav items, headings - never 'Lorem Ipsum Button'
- Skip all decoration: no shadows, gradients, or icons beyond basic boxes. If your wireframe looks nice, you've gone too far
- Speed benchmark: A 5-screen mobile wireframe at lo-fi should take under 2 hours. More time means too much detail
Annotating Lo-Fi Wireframes
Annotate generously in lo-fi - capture interaction rules, conditional states, and content requirements before they're obvious. Annotations answer: 'What does tapping this do?', 'What content is in this list?', 'When does this state appear?' Create Figma callouts (numbered circles: ①, ②) connected to a numbered annotation list beside each screen. Engineers and stakeholders reference these constantly during development.
Tip
Tip
Practice LowFidelity Wireframes Paper Digital in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Practice Task
Note
Practice Task - (1) Write a working example of LowFidelity Wireframes Paper Digital from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with LowFidelity Wireframes Paper Digital is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready ui ux code.
Key Takeaways
- Low-fidelity wireframes are the fastest form - deliberately simple using boxes, lines, and placeholder text.
- Use only two colors: #FFFFFF (background) and #333333 (content). Zero brand colors, zero final typography
- Gray rectangles for images (fill #CCCCCC), thin rectangles for text blocks, labeled rectangles for buttons
- Use real copy for critical elements: button labels, nav items, headings - never 'Lorem Ipsum Button'