When designing (or redesigning) websites I tend to follow a five stage process:
- Gather / discover
- Build and test
- Launch and maintenance
During the second stage (structure) I will focus largely on two aspects of the website’s structure: the overall site hierarchy and the structure of each of the pages, what are traditionally called ‘wireframes’.
To design the site structure, for years, I’ve used mind maps and my mind mapping application of choice is Mindjet MindManager.
I love MindManager, and each version just gets better than the last. An important thing for me is that the software interface doesn’t get in the way of capturing and organising the information. It’s packed with subtle but powerful features such as keyboard shortcuts and the ability to drag information from web pages and Windows Explorer directories).
Page structure and wireframes
When it comes to designing page-level structures I pretty much always start by drawing wireframes using a good old fashioned pencil and pad of paper.
Wireframes are visual guides that present a skeleton or framework for the information on the page. They are concerned more with where information and design elements should sit rather than how they look.
If you think of it in terms of architecture, the building blueprint will show you that the kitchen needs a window between the wall cupboards, and in front of the sink, but it won’t tell you what colour or make they are.
As I said, I usually start all my wireframe diagrams with a pencil and pad, but occasionally I want something that I can save, edit and share with others via email.
Until now I’ve usually used either Balsamiq or Mockingbird, both of which have limited, free accounts. But recently I’ve been trying out PowerMockup.
PowerMockup is a wireframing tool that integrates with Microsoft PowerPoint 2007 or 2010. It is essentially a library of PowerPoint shapes offering
- 89 fully-editable user-interface (UI) elements
- 104 wireframe icons
Examples of some of the PowerMockup stencil library elements
And it is as simple to use as finding the element you want to use and dragging it onto your PowerPoint slide. The UI elements and icons can all be resized, and recoloured too which provides a great deal of flexibility.
Also, remember, although you are working in Microsoft PowerPoint which, by default, is set up for a 4:3 or 16:9 aspect ratio screen you can adjust the page setup for any screen size and aspect ratio. That way you are not limited to only designing for ‘above the fold’.
As a quick example, I mocked-up the PowerMockup website homepage using PowerMockup in Microsoft PowerPoint 2010:
Wireframe of the PowerMockup website using PowerMockup
I have to say that I was very pleasantly surprised using PowerMockup. Because it integrates with Microsoft PowerPoint I didn’t have to learn a whole new application: it was very intuitive to use.
I really like the design of the elements too. My main criticisms of both Balsamiq and Mockingbird is that their UI elements have quite a sketchy, cartoony feel to them; particularly Balsamiq.
In contrast the UI elements in PowerMockup are clean, unfussy and unobtrusive. While Balsamiq and to a lesser extent Mockingbird’s UI elements have a Comic Sans feel to them, PowerMockup’s UI elements feel more like something classical like Helvetica.
PowerMockup costs US $39.95 (approx. £25 GBP) for a single-user license, although obviously you also need a licensed copy of Microsoft PowerPoint 2007 or 2010.
The cheapest, standalone version that I can find, Home and Student, will cost you £75.00 GPB on Amazon UK), so you’re talking about a total cost of around £100 for one user.
If you already own a copy of PowerPoint 2007 or 2010, however, then you’re laughing and you may even qualify for a free license.
There are also two team licenses available: 5 users for US $119.95 (approx. £74 GBP), and 10 users for US $199.90 (approx. £123 GBP).
I’ve been genuinely very impressed with PowerMockup. What is not to like? It has a very extensive, very attractive, and very usable collection of UI elements and icons, and most importantly it’s really simple to use.
What might be nice is if someone could throw together a number of PowerPoint template files (with sensible background grids) to emulate the most common page dimensions, e.g. Blueprint CSS’s 950px width, 960 Grid System’s 960px width, plus some responsive-style tablet and mobile templates. Coupled with PowerMockup these could be a very useful, very affordable combination for small design studios and individuals.
I can definitely see myself using PowerMockup on the next design project I need to work on.