A work colleague was about to build an application the other day and asked me for my opinion on what tools would suit him best. By way of background, my work colleague is a developer and he wanted to build an application which might need to store large amounts of data.
My immediate response? Excel.
I know there are a lot of other available wireframe tools out there today but the criteria here was quick, free and easy. No ramp-up time to learn the application here, in fact it’s more just training your brain to use it other than a spreadsheet. No need to look for a free tool out there in the web when it comes with our basic MS Office Suite.
And you can even make Excel jump between pages as I’m about to demonstrate.
Let’s check it out using Google as our model site.
Wireframe Basic Structure
Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information.
– web design Basic web pages contain a header, body and footer layout before all other information is overlaid. Now since we are designing our Google search, the next logical item to present on this bare bones wireframe is the search bar and the 2 google buttons (Google Search, I’m feeling lucky).
Note: I am using chrome as the browser.
The building of Boogle
Now this is not a lesson in wireframes so I’ll step right into Boogle development (not really my idea, but it’s here in the Balsamiq example).
This wireframe is built entirely in example using a combination of:
- text in cells
- inserting shapes
- text in shapes (while making the background and lines transparent)
- inserting images
- editing colours
Adding a little bit more flavour into this mockup, I have also created a results page based on a search of “Hercules”:
These 2 mockups have taken me less than half an hour of build. Some might argue this in itself will take too long to develop rather than using other tools out there. But remember the ramp up time here is considerably less.
There is of course a negatives with this – it won’t be an easy drag and drop like other applications out there, it won’t be Photoshop pixel-perfect etc. – but in context of my work situation, Excel was readily available, he needed to document data, and he needed to fire it up quick.
This mockup also includes a couple of dynamic features:
- click on the Boogle Search and the mockup directs you to the results page
- click on the back button and the mockup redirects you back
And so where is the mockup?
It’s located here: Boogle Mockup
I’ll continue this post sometime in the future and include how one can incorporate data into wireframes which I didn’t cover on this post.
And one final note, I could have also advised my colleague to use Powerpoint (or Keynote if he used a Mac) or even Word. For that matter, a pencil and paper could have done the trick too. At the end of the day, most of our visual needs can be fulfilled using some common tools we use everyday. All we need is a little bit of imagination.