In a world of no-code tools and docs that function more like apps, it’s easy to forget about the timeless art of wireframing. When I say art what I really mean is “better than a sketch on a napkin”. One of the crutches of being able to build anything on the internet is being able to communicate it, and the better the tool, the easier that is.
After trying a lot of things, I landed on Whimsical. While you can also use it for workflow charts, docs, to-dos, and generally cloud white-boarding, it’s concise wireframing tools are probably my favorite part. Here’s why, and how I use it.
Why Whimsical for Wireframing Websites?
Simply put, it has the right balance of detail and simplicity. When you start wireframing websites in Whimsical you will waste zero time deciding what a button should look like. You can easily indicate it’s state with the click of a button. You won’t spend any time on a color pallet, on hover effects, or icon sets. That stuff is for UI designers, not builders.
Quick and easy page layouts and elements are a must for a tool like this, but Whimsical’s element grouping, which happens automatically, makes it super easy to copy/paste, and cook more pages. It’s all done automatically and based on containing elements, which just makes lots of moves – which you’d expect to be clunky and require a lot of select-clicking or similar – just work.
Next you’ve got the commenting/annotation features. With a completed wireframe in place, you will usually need to add more detail inline in the design. Whimsical’s commenting feature annotates elements with a conversation that can be closed, and importantly #’s each comment for easy reference in conversation later. This is super useful for referencing things in a conversation with your team or developer later.
In the screenshot above you can see that the leftmost screen is a completely designed image. In conjunction with the fairly automatic grouping feature I mentioned before, Whimsical allows you to drop in image files and automatically masks them into your device containers. You can even design elements inside the layouts you’ve already created. This is excellent for bringing in actual images, adding a screenshot of a comp/example next to your wireframe, and a lot more.
Whimsical’s feature-set is a lot bigger than just wireframing, in fact it’s only 1 of 4 modes:
- Doc
- Wireframe
- Project
- Board
My other primary use for it is Board, which is basically a super flexible whiteboard on the internet that you can, of course, drop a wireframe into if you need to. We’ll save that for another day.
