46 grey screens before any colour
Why grey
Colour and imagery make a weak layout look finished. Without them, the only thing left to judge is the structure: what comes first, what is grouped, and whether each screen does one job.
For Rawaa I wireframed all 46 screens this way: the website, onboarding, the owner app and the mobile app, and linked them so the wireframes were clickable in Figma.
Wireframe vs. final
Mobile wireframe Mobile final
The layouts barely moved between grey and colour. That is the point: the hard decisions were already made.
How I keep wireframes useful
- Real copy, not lorem ipsum: words change layouts.
- Every screen named after its job, like “Emergency Center”, not “Frame 12”.
- Clickable early, so I can feel the flow before polishing it.
