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 😦 ):

https://blog.prototypr.io/the-ideal-design-workflow-2c200b8e337d#.c7od33ab8

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.

 

Why Balsamiq?

  • 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!)

Advertisements