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!

Advertisements

Wireframes

Hello again!

So you may ask yourself, what are wireframes? Or maybe not… I did! Learn with me if you wish!

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. If you’ve yet to use wireframing, it’s time to get your feet wet.”

I guess it’s time to get my feet wet so. What for though? Use wireframing to articulate ideas or even explore ideas before taking the expense of actually building the final product…Makes sense to me!

So the task last week was to come up with mock-ups for an app. While trying to figure out who to target first, we got scissors and paper. Not to play rock-paper-scissors though.

Task:

  • App to be developed: Medical Check for Doctors on their patients
  • Think about User Interface: Someone who had surgery recently and needs to be monitored still
  • Some criteria that should be recorded with the app: Mood/ Meals/ Fitness
  • Chosen Persona: Breast Cancer patient, 39 with kids and active life

Result:

She will be greeted with a screen “Hello, Gorgeous!” and asked how she feels today on scale from “moody” to “happy”…

So many ideas, so little time in the end…