Earlier this week we featured online presentation tool Spiceynodes as a great way to present information to clients or customers, in person, on a screen or directly embedded on your website. Today we look at a few tools for making quick website wireframes, prototypes and mockups.
From simple, free rapid drafting and prototyping tools to more complex and outright technical offerings we give you a quick overview of the options for freelancers needing to quickly create a mockup for a website or landing page.
The best, most flexible, option for wire-framing a site was invented hundred of years ago. It’ll cost you around 20p and is called Paper and a Pencil. With that little bit of facetiousness out the way pencil and paper really is the best way to start sketching out your ideas. An even better idea it to take a thick pen, like a Sharpie, as that will help you to focus on the big picture, the shapes and relative sizes of your page elements rather than the details like section names and text — leave the detail to later.
If the thought of getting your hands dirty makes you a little squeamish then the next simplest technological tool is the beautifully simple Draft from 37 Signals. I say simple, you actually need an iPad and spend $9.99 at the AppStore but Draft is a really fun tool to use, and sketching with your fingers and sharing via email (or Campfire) with your collaborators is great fun. With just thick white and red lines on a black background Draft lets you sketch as you would on paper but without all that pesky eraser dust.
If you’re looking for free prototyping tools then the excellent iPlotz gives you the ability to create 1 project with 5 pages, enough for getting the idea across for a simple site. The benefit of iPlotz over the many, many other prototyping tools out there is that it has a great selection of Export options. You can export to a PDF and it’ll list every component giving a series of thumbnails, and any notes you’ve added, in a single document — perfect for passing on to a designer who needs to know the exact dimensions and specification of every button and section. iPlotz also has collaboration and project management tools built in, which allows everyone in your team to create tasks for other team mates.
Pencil is a free Firefox add-on that, oddly, runs in its own window. While not as powerful as Omnigraffle it does have a great range of options for quickly mocking up pages and is very easy to use.
HotGloo also allows basic, flat PNG and PDF export options but, compared to iPlotx and Pencil, it has a much simpler look and feel. What you gain in speed and style you loose in options but there are plenty of layout elements and some sophisticated layer and alignment options — well worth a look.
Protonotes; a quick annotation tool. If you already have a design online, or need feedback on your current site then adding a small script from Protonotes allows you to give clients and colleagues access to an interface which allows them to give instant feedback on your design, right on the page.
The Granddaddy of professional quality offline-tools has to be Microsoft’s Visio and OmniGraffle for the Mac. Visio started out as an add-on to Word but it now a full blown product in it’s own right, it sells well and there are plenty of reviews online if you want to take a look.
Omnigraffle is a bit more interesting. Out of the box you can draw hierarchical charts, great for site-structure planning or throwing together a quick organisational chart for your business — and it’s really easy to use straight fro the get go. There are also a wealth of options for polishing your sketches and turning into beautifully looking wireframes that you would be proud to show any client. Onnigraffle really it comes into its own when used with wire-framing templates; Konigi’s wireframe stencils are excellent and Yahoo’s Omnigraffle stencil set adds any UX/UI element you could wish for.
37 Signal’s recently reveal that they don’t do wireframing at all… they start prototyping in HTML right away. If you know your the difference between and class and and ID and are not afraid of writing code to directly, semantically, build an interactive prototype rather than a flat wireframe then Quplo – a web-based prototyping software for interaction designers looks very promising.
If you think prototyping should happen in code, in the browser, you can start from scratch, hand-crafting coded pages and having them hosted right before your eyes, or you can pull in a design from any existing URL and then make changes from within Quplo, great for reverse-engineering successful designs or working on a redesign of an existing site.
If you want a complete overview of what’s out there then Konigi have their finger on the pulse of what’s currently available — their round-up of rapid-prototyping tools, “Tools for ideation“, will give you a good sense of all your options.
My advice would be to start on paper with a big, fat pen and when you’re ready to start drawing boxes try one or two of the free tools. If you’re a professional designer you may want to invest in some more expensive professional software, but the wealth of free online tools with sensibly-priced upgrade packages might mean you are able to do most of your prototyping in the cloud rather than having a standalone piece of software.
All the tools vary in terms of finish, some are deliberately ‘sketchy’ forcing you to focus on ideas rather than pixel perfect designs, others, like Omnigraffle, allow you to quickly get your ideas on screen and then polish the designs if you really need to. Everyone’s need vary so do take a look at all of the options and see which might work best for a one off design or for fitting into your professional workflow.
Pingback: Create a quick website mockup with the best wireframing tools … | Website Development And Techno News