PowerMockup – create wireframes using Microsoft PowerPoint

PowerMockup website
PowerMockup

When designing (or redesigning) websites I tend to follow a five stage process:

  1. Gather / discover
  2. Structure
  3. Design
  4. Build and test
  5. 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’.

Site structure

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

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
PowerMockup stencil library elements
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.

Page size

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’.

Example

As a quick example, I mocked-up the PowerMockup website homepage using PowerMockup in Microsoft PowerPoint 2010:

Wireframe of the PowerMockup  website using PowerMockup
Wireframe of the PowerMockup website using PowerMockup

My experience

Intuitive

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.

Design

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.

Price

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).

Conclusion

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.

These watches on Amazon UK are updated hourly

I logged into Amazon UK today and on my Amazon homepage, where they try to entice me to buy books, CDs, DVDs and other attractive goodies by showing me things that are related to items I’ve already viewed, I was given a list of “Watches: Men’s”.

“Updated hourly” it said at the top. Well, that’s no use in a watch, I thought to myself. I want a watch that is updated minutely; or, even better, updated secondly.

20111020-watches

I suspect that they meant that the list is updated hourly, but that’s not what it says!

Right, let’s all buy #4: the Timex Ironman Watch T5E931 Multi-function Triathlon 30 Lap watch this afternoon and try to bump it up to #1 by 5pm.

Down for everyone or just me?

Is google.com down for everyone or just me?

This is a really helpful Web resource that I’ve needed to use from time to time.

Sometimes you can’t access a website because it’s genuinely down. Sometimes you can’t access a website because there is something wrong with your internet service provider’s (ISP’s) DNS server, meaning that your PC isn’t given the correct address to locate the website. Sometimes you can’t access a website because someone, somewhere needs to switch off the internet and then switch it back on again.

That’s where www.downforeveryoneorjustme.com comes in. It checks to see if it’s down for everyone else or just you.

And that’s it.

As you can see from the result…

It's just you. Google.com is up.

University of St Andrews 600th anniversary website

20110621-600th

After last month’s almost-a-post-a-day, I’ve hardly blogged at all this month. And there’s been a pretty good reason for it: I’ve been working most of the last three weeks on coding up the designs for the University of St Andrews’ 600th anniversary website, which went live yesterday.

Eat, breathe, sleep code

And I really do mean “most of the last three weeks”. I’d get home in the evening, help put the boys to bed, and then crack on with more code until sometime after midnight each night. I’d crash into bed for about 4 hours’ sleep before booting up the PC again and working for a couple of hours until the boys woke. Then it was breakfast and back to the office for… oh, more coding.

Design

The design was by Edinburgh graphic design company Project and was the first web project that we’d worked on where an external company had mocked-up the design and passed it on to us as Photoshop ‘comps’. We were essentially coding up a design from photographs of a web page, which is a bit like handing a builder a photo of your dream home and saying, with a wave of the hand, “Make it so!”

It’s not our preferred way of working, if I’m honest. But they were brilliant at getting updated proofs to us. Anything involving image work takes hours so it was great having professional Photoshop-meisters on the other end of an email.

I’m going to blog about our experience of the project very soon on the St Andrews Web Team blog.

Development/Alumni

…and if that wasn’t exciting enough, I also had the Alumni pages to code up too.

20110621-alumni

Tonight was my first night off in weeks from working on the code. So I chose to blog about it instead!

Joomla!

Yesterday I picked up a book at Borders bookstore in Edinburgh. Actually, I went further than that: I also took it to the cashier and paid for it. It’s mine now. I got to take it home, and everything™!

The book was (and still is) Joomla! A User’s Guide: Building a Successful Joomla! Powered Website by Barrie M. North.

I’m only on chapter 4 at the moment, learning about creating content but already I’m discovering that this is a rather good book.

The thing that gets me about alot of CMS books is that they don’t take the time to explain the concepts behind how the CMS organises itself (content, taxonomies, categories, sections, articles, posts, pages, etc.).

What I really want to know when I approach a new CMS is: how does it think? how does it all fit together? because a lot of CMSs operate with very different models, and it’s not always clear how to translate your understanding of one CMS onto another. It doesn’t always work like that.
This is — so far — a very clear book that takes the time to explain these basics very well, and with plently of real-life examples.

There’s an accompanying website too: Joomlabook.com.