How to use Excel as a wireframe tool part 2

Business & Tech, How To's

Boogle’s back and this time he wants to show off a few more features that would not be commonly associated with Excel, namely Tools panel, Annotations and Task Lists.

Let’s begin.

Excel as a Wireframing Tool

Patterned against: Adobe Photoshop and Illustrator, Balsamiq

I’ve tried to include a couple of features here including:

    • inserting the shapes panel (insert > shapes) which presents all the shapes one can drag and drop to create the wireframes (this also allows you access to insert photos, audio, moves, clip art and symbols)
    • inserting shapes from Picol (and feel free to use your own website of free shapes)
    • creating a grid-like background (similar to rules, guides and grids in Adobe tools)

wireframe creation

The shapes panel provides the tools necessary to create the wireframe and making these fit for your needs is as simple as changing the size, colour, transparency and generally ‘shaping’ the images to fit your needs. The Picol art provides extra images if required (by simply copying the image and pasting it where required – I didn’t use it for the example above).

It may be the poor man’s version of Adobe Photoshop and Illustrator – yes missing out on the pen / pencil / brush tools etc. – but hey recall that the original objective of this was to fire up something quick and easy with an available tool.

Excel with Annotations and as a Task List manager

Patterned against: Trello

At the bottom right hand side of the below image, I created a task list with:

  • To Do – with no tasks to do
  • Doing – with function 1 and 2 in development (under this fictional example)
  • Done – with all the other tasks completed (because we are super-good)

wireframes with tasks
The MVP features above have been grouped under Header, Body and Footer on our page for an easy sort (above the Task List). Additionally, the annotations above are something extra and an item that doesn’t normally come with a task list manager; but it adds significant value in visualising the site.

It is also quite easy to insert, copy-paste and generally move things around in Excel. For example if more tasks are required in the above, it’s easy enough to add items in the To Do list, but for now I’ve left it with the placeholder text ‘Add a card’ (like Trello).


Outside a loss of natural drag and drop ability from wireframing tools and absence of a whole swag of graphical tools from the Adobe duo, filtering an item in the MVP feature table will make the subsequent wireframe on the left collapse in the image above (of course I could have created this a little bit differently to stop that behaviour).

In addition, if I close the Media panel (where the ‘Shapes’ and other tools reside) which I have done so in the spreadsheet example, then all you will see is the Picol art on the right hand pane (middle image, to the left). Of course you can make it appear again by clicking Insert > Shapes.

Here’s the spreadsheet for reference: Boogle Mockup

That’s a wrap

Although these methods of manipulating Excel may not be as good as the real thing,  re-organising our favourite spreadsheet has enabled us to come with something more useful than just a tool for storing data and calculating numbers.

I could have built this in Word or Powerpoint or Keynote, but I would have lost a lot of the power of Excel’s grid and data storage capabilities. I could have even used Excel to calculate velocity per sprint (the Agile way)…but that’s another subject altogether.

n.b. I am a fan of all the tools listed above (Adobe, Trello etc.). Particularly the most underrated tool of all – pencil and paper.


One thought on “How to use Excel as a wireframe tool part 2

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s