If you are a UX dude/dudette – Balsamiq is the mockup tool of choice, else it’s that incorrectly spelt vinegar in your pantry. But for me – I was in the between; I had heard of Balsamiq, Illustrator and Photoshop and few others but never used any sort of mock-up tool except Visio or MSWord to drop a few boxes.
I am no UI/UX expert or not even close to it – but here are my first observations/foray into this world (I was “trying” to build a mock-up for a iOS app and I say ‘trying’ quite deliberately 🙂 ).
I came across this post and it bamboozled me to the nth degree … (data science and Bayesian algorithms and scatter plots were easier 😦 ):
Why a tool?
- Stakeholder interest
- Closer to a real world thing (app, website, desktop)
- Quick feedback and incorporation (real time change and seek feedback again)
- Facilitates an Iterative approach by being able to gather quick ongoing feedback
- It’s not only for UI folks – Developers (Full stack or not!) get into it to communicate thoughts/ideas on what they are going to build before they build it (you can’t describe enough in a paragraph in your functional spec!)
- Last but not least – It’s cool.
- The mockups look like sketches i.e. not “the real thing”
- They communicate well to the stakeholder that “this is what we are planning to build; this is a schematic – do you approve?”
- Very very easy to get started and reach mid level skill in 1-2 days (For advanced stuff like complex grid layouts and screen tiles/sectioning – maybe a few videos to watch)
- Works on my Mac and Windows VM (unlimited device licensing i.e. licensed per user)
I made these 4 mockups in Balsamiq for a iOS course I was playing with (last 2 are bit of an overkill but I got bit consumed by it all) 🙂
This is the Zoobook App where a user can take animal photos and attach some notes against it – handy in a zoo!
This first screen is summary screen with a Balsamiq construct called ‘iOS Menu’ – this is one of the few ‘Text controls’ which allow for creative pseudo-coding. I say pseudo-coding because…you will see what I mean:
- -dashes- to indicate disabled/greyed-out text
- underscores for italicized text
- asterisks for bold text
- “\r” to wrap text onto a new line
- use the “\” character to escape the reserved characters (e.g. –dashes- or underscores) and prevent it from being treated as a formatting character
Notice the ‘Detail view>>’ button – interestingly it is hyperlinked to the Detail View screen and this ‘hyperlinked’ behaviour can be exported to pdf as well – cool!
The Detail screen is as follows – its uses an image control and some more text controls to exhibit controls which allows entry (unlike a label for display only). Nothing too remarkable except that little blurb providing some information about ‘More Info’ button.
I went ahead and Balsamiq’ed the data model and controllers as well – absolutely no reason why you would/should…but when you are playing with stuff and it is fun – why not!
Hope you have enjoyed this introduction and remember mock-ups and screen design are for everyone – Project managers, Marketing personnel, Project Co-ordinators, BAs, Developers (not just the UX dudes!)