Pre-Class README

During the UX Masterclass we will be using 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

2 / Font awesome icons ::

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

Installing the UX Masterclass stencil

During the Masterclass we will be using a Mockups stencil that that instructors have created especially for the event. Once you have done the tutorials listed above and are familiar with using the programme please follow these steps so you have everything you need ready for the start of the Masterclass.

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.