There are many ways of wireframing web site designs – from using the back of an envelope to the ever popular Photoshop.
However, if you’re a web designer who uses a Mac (or a PC with an iPad), you can use my favourite wireframing tool – Keynote!
Keynote (the Mac version of Powerpoint – which is just a thing of joy to use!) can be a great tool for wireframing. It’s got great support for shapes, type and nice things alpha layers and masks on images and grouping and snap alignment tools. (There’s also files for PowerPoint, but Keynote is soo much nicer!!! )
I’ve been wireframing with Keynote for a couple of years and it makes my life so much easier. The ability to export the slides as images/pdf makes showing them to clients very simple.
But there’s one extra tool which can make you a real wireframing ninja – Keynote Kung-Fu.
Keynote Kung-Fu brings even greater prototyping tools to Keynote including:
- form and table elements;
- graphs and charts;
- headers, example text, lists and filler images;
- tabs, accordions, nav bars, breadcrumbs and sliders;
- social media buttons;
- modal windows
- and layout columns for the 960.gs grid system.
And there’s also great layout tools for wire-framing native iOS apps for both iPhones and iPads with:
- browser elements;
- keypads and keyboards;
- buttons and switches;
- dropdowns, address and number pickers;
- nav elements
- and even touch gesture icons!
So, if you’re a Mac or iPad user and need to do some wireframing/prototyping, then give Keynote and its ninja abilities a go!
For more on Keynote Kung-Fu check out this video from it’s creators:
For only $12, you can hardly go wrong.
Do you use Keynote for Wire-framing? Do you have any tips?
If you don’t use Keynote, what do you use to wireframe?