Balsamiq

Balsamiq

The interactive prototyping module of the UX Masterclass introductory workshop format is based around the use of the Balsamiq Mockups software. Mockups is an effective and easy to use tool for creating wireframe designs. Don’t worry if you have not used it before - it is possible to learn it in a few hours using the online tutorial resources listed below.

Installing Mockups

You can download Mockups from here:- http://balsamiq.com/download

This gives you access to a 30 day trial version, if you want to use it beyond 30 days you will need a license key.

Tutorials

The following tutorials will help you get familiar with using mockups. Please spend time to go through all the ones in the first two sections (The basics & Specific areas to learn about) before the Masterclass so that you will be able to get the most from it.

The basics

1 / Intro to Balsamiq

https://www.youtube.com/watch?v=70hfU7_95Gw

2 / Creating your first mockup

http://support.balsamiq.com/customer/portal/articles/871902-creating-your-first-mockup

3 / Overview of creating a new wireframe

https://www.youtube.com/watch?v=ylY6Gxw0bDo

4 / Good tips and tricks article from Medium

https://medium.com/@citizenblr/balsamiq-101-wireframe-quickly-effectively-9231bb126d01

Specific areas to learn about

1 / Useful best practices for organising projects and files

http://support.balsamiq.com/customer/portal/articles/117761

2 / Working with text

http://support.balsamiq.com/customer/portal/articles/110121

3 / Working with symbols

http://support.balsamiq.com/customer/portal/articles/110439-working-with-symbols

4 / Linking mockups together for interactivity

https://www.youtube.com/watch?v=Fbzo3NVzizo

Other background resources for Mockups

1 / All tutorials and videos

http://support.balsamiq.com/customer/portal/articles/1335124

2 / Mockups to go

https://mockupstogo.mybalsamiq.com

3 / Font awesome icons

https://github.com/djfpaagman/font-awesome-balsamiq/

Masterclass stencil

A Balsamiq stencil was made for the UX Masterclasses. To use this stencil follow these steps:-

1 / Download the file ux masterclass.zip from here

2 / Unzip the folder to wherever on your machine you’d like to store your work

3 / Once unzipped you should have a folder called ux masterclass that contains a file called ux masterclass.bmml and a folder called assets

4 / Launch Balsamiq and open the ux masterclass.bmml file

5 / In Balsamiq change the skin setting to ‘Wireframe skin’ (View > Skin) and tick the ‘Use system fonts’ option (which is also under the View menu)

6 / You should now be all set to start using the UX Masterclass stencil elements which are under the ‘Project Assets’ tab of the UI library.

Interactive shoe store prototype

The example Balsamiq files for the click-through version of the shoe store application used during the UX Masterclass are here.