lab 14 - web.uettaxila.edu.pkweb.uettaxila.edu.pk/cms/sp2013/sesdabs/labs/sda lab 14.pdftips &...

UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA

FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING

SOFTWARE ENGINEERING DEPARTMENT

Software Design And Architecture 4th Semester-SE UET Taxila

LAB 14

Easy Interface Prototyping with BALSAMIQ

Wireframing is an important part of designing applications, but current methods can be time-consuming

and expensive. Balsamiq is different.

Balsamiq is an awesome interface mockup tool that will help you quickly prototype your ideas and

communicate them to others.

Installing Balsamiq:

Step 1: Run the setup

Step 2:





Step 3: Click on Continue





Step 4: Press on “I Agree”

Step 5:





Step 6: Press Finish

Balsamiq UI Library:





We will be using Balsamiq to create a simple prototype for a mobile application. Click on the File menu

and select New Blank Mockup. Click the iPhone tab of the UI Library, select the “iPhone” element, and

drag it onto the grid below.





When you click on the iPhone, an options box appears. Each control in the UI Library has a set of

standard options (layering, grouping, and clipboard operations) and additional options unique to that

particular control.

With the iPhone control, we can change the orientation of the phone, select a different background

pattern, or toggle the top bar. For now, let’s select the second background pattern, in order to give the

screen a colored bar at top.





Next, we’ll add some typical iOS interface components. Select the “Pointy Button” control from the

iPhone tab of the UI Library, and drag it onto the top bar of the iPhone. After placing the control, you

will have the option to edit it’s text. You can change this to anything you’d like, but for this tutorial,

we’ll keep it as “Button”. In the options box for the Pointy Button, you can select the direction of the

button, and select an icon to be displayed on it. Here, we’ve created a left-pointing button with no icon.





Next, we’ll add an “iPhone Menu” Control from the UI Library. The iPhone Menu has many options,

most of which can be activated by typing certain characters into the text field. Once you’ve placed the

iPhone Menu, take a look at the syntax given in the menu by default to see how to reproduce a number

of different menu effects. (Don’t forget to put a comma between the label for the menu item, and the

additional element!) For example, you can type “Random Text, ON” to create a menu item with the text

“Random Text” and a toggle switch set to on. Below, I’ve added three iPhone menus, each with multiple

items, to create a hypothetical “Settings” page for an iPhone application. I’ve also used some elements

from the “Markup” tab of the UI Library to annotate my mockup.





Once you’re finished, go to the “Mockup” menu in the top left and download your mockup as either a

PDF or PNG file, and save it wherever you’d like.

Balsamiq offers many common UI controls, as well as elements which you can use to annotate your

mockups. And Balsamiq isn’t just for prototyping mobile applications–it also has the ability to produce

mockups for websites, web applications, and more. Explore the UI Library to see what else is available.

Here are two more examples of what Balsamiq can do:





Tips & Tricks:

Balsamiq supports many common keyboard shortcuts, as well as a few not so common ones. You can use Ctrl-Z and Ctrl-Y to Undo/Redo. Ctrl-C, Ctrl-V, and Ctrl-X work as expected too. Ctrl-D duplicates the current selected element.

To quickly find controls from the UI Library, use the “Quick Add” feature at the top of the screen. Simply type the first few characters of the control you’re looking for and then press enter to add it to your grid.

You can show/hide Balsamiq’s grid background by going to “View” and unchecking the

“Show Graph Paper” option.

You can group multiple elements by either Shift or Ctrl selecting them, and then selecting the “Group” option from the multi-element options box that pops up, or from the top menu. There are also keyboard shortcuts for this (Ctrl-G for group, and Ctrl-Shift-G for ungroup).





The multi-element options box (which shows up when you Shift or Ctrl select more than one element) also has alignment and spacing options that make it easy to line up multiple elements and space them evenly apart.

When placing controls or other elements, Balsamiq will attempt to align them to other

elements by snapping to guidelines inferred by the position of other nearby elements.

If you want to show and discuss your mockup with others, you can do so from within Balsamiq by selecting “View”–>”Full Screen Presentation”. This will hide everything but your mockup and give you a giant blue arrow with which to point at different parts of your mockup.

Lab Task

Functionalities (tasks) are displayed with icons on the homepage of the app.

1. Participants

This feature allows you to see all the courses you are enrolled in, and to browse the contact information for all the users in those courses.

1. You can see photos and descriptions of all people (according to your capabilities and privacy settings etc)

2. If they have phone numbers defined, you can call them or send an SMS with a single click.

3. If they have email addresses you can send them an email. 4. If Moodle messaging is enabled you can also send a private message.





2. Messaging

Send a message:

User launch Moodle app. On the Moodle app dashboard user select message icon. It should now be on the

message list (or discussion list). User selects the 'new message' button. The new message screen is displayed User selects 'add contact' icon. The contact screen is displayed. On this screen all

contact are listed.





User wants to send a message to someone who is not in user contact list. User enters name in the search bar. Searchable Moodle users are listed (small profil: fullname, username, city). User selects someone.

User enters a message and sends it. Contact discussion screen is displayed and the sent message is listed.

lab 14 - web.uettaxila.edu.pkweb.uettaxila.edu.pk/cms/sp2013/sesdabs/labs/sda lab 14.pdftips &...

Documents