Paper Wireframes: Thinking in Low-Fidelity
In a world of highly advanced design software, a pen and paper remain the UX designer's most powerful tools. Paper wireframing is the practice of sketching interface layouts quickly and cheaply before committing them to pixels.
Why Low-Fidelity is Crucial
If you present a stakeholder with a polished, high-fidelity design early in the process, they will critique the color of the button. If you present them with a messy sketch, they will critique the concept and layout. Low-fidelity forces the conversation to remain on structure, hierarchy, and functionality. In addition, low fidelity is cheap. A designer can sketch something in a matter of minutes while creating a very detailed version of the page might take hours which is wasteful since this design won't be the final version anyway.
In some cases, using paper helps you to think deeply about the solutions and layouts of the application without thinking on make it "pixel perfect". On the paper, there are fewer distractions because you are not putting attention at the visuals and as a designer, you might gravitate into making it pretty which is not what is needed at that moment.
Mobile-First
Try sketching your mobile interfaces first. Mobile screens have severe real estate constraints. If you can successfully solve the navigation and content hierarchy on a 360px wide screen, scaling it up to desktop is trivial. If you design desktop first, cramming it into mobile will be a nightmare. However, it is up to you as a professional to design the mobile of desktop version of the application and what makes sense to build first.
UI Stencils
If you are self-conscious about your drawing skills, invest in a UI Stencil kit. These metal plates allow you to quickly trace perfect icons, buttons, and browser windows, keeping your sketches neat enough to present to clients without losing the speed of paper. Youj can by a collection of UI Stencil kit for less than ten dollars on any popular e-commerce site.
Tools of the Trade
- A dotted grid sketchbook (Dot grid helps with alignment better than blank or lined paper).
- Thick markers (Sharpies) to prevent focusing on tiny text.
- Marvel App, Figma, or Balsamiq if you absolutely must use a digital tool, but keep it intentionally sketchy.
- Pencil Project is another free option that you can explore for creating wireframes and prototypes.