Balsamiq

Repeat after me: /bɔːlˈsamɪk,bɒlˈsamɪk/

I must have been hungry because I could only think of salad dressing when I heard “balsamic”. However, it isn’t what I think because I’m sitting in my UX class! And while I cannot make a balsamic chicken dish with it (well I could draw it), this tool “Balsamiq” allows me to get creative.

Balsamiq Mockups is a user interface design tool for creating wireframes or mockups. We can use it to create sketches of our product ideas to share with team members of users before writing any code.

Some of the basic components of Balsamiq include:

  • Toolbar – The primary control interface for common commands (copy, paste, delete)
  • Canvas – The grid area where the drawing occurs
  • UI Library – Controls that can be dragged onto the Canvas at any time.
  • Navigator – Allows navigation to your other mockups through thumbnail images.
  • Property Inspector – Allows the configuration of properties and actions specific to each UI Control (colour, size).
Balsamiq Interface start screen
Balsamiq start screen

Task:

Picking up from the wireframe class the other night, where we did a paper mockup of our medical mobile app, the design process has been moved on to the screen now.

Showing the start screen and the first screen below of the app.

Balsamiq Mockup: Medical Check App
Balsamiq Mockup: Medical check mobile app for fitness, mood and eating habits of patients

Learning Outcome:

  • Get the basics
  • Adding controls
  •  Image paper controls
  • Completing the mockup
  • Finishing touches

Result: Liking it! Getting better every class!