CBT Campus' Online Skills Training Courses.

IT Skills

Web Design

Using Balsamiq

wd_usba_a01_it_enus

wd_usba_a02_it_enus

Introduction to Balsamiq Mockups

Course Number:
wd_usba_a01_it_enus

Expected Duration (hours)
2.1

Lesson Objectives

Introduction to Balsamiq Mockups

start the course
describe what a wireframe is, the difference between low-fidelity and high-fidelity wireframes, the elements of wireframes, and how they can be used when creating web sites
describe the versions of Balsamiq and the benefits each provides when creating mockups for wireframing
describe the available Balsamiq plugins and the benefits they provide when creating mockups for wireframing
download and install the Balsamiq Mockups 3 for Desktop application and identify the major areas of the application’s interface
add and edit UI controls in Balsamiq Mockups 3 for Desktop
snap, align, clone, and arrange UI controls in a mockup
layer controls in your mockups and describe the benefits of using layering
group and crop controls and describe the benefits associated with each of these features
work with the Property Inspector to alter control properties and add notes for your mockups, symbols, and assets
create and work with alternate versions of a mockup and describe the benefits of using alternates
work with the Project Info Panel and skins, and identify the differences and benefits of the sketch and wireframe skins
work with text in the mockup controls, including formatting and adding links to text
work with icons, including the different methods available for locating, adding, and changing icons in your wireframes
work with custom icons, including how to create and add your own icons and how to import existing sets of icons
work with images, including how to add and manipulate their properties in your mockups
use the Asset view to manage icons, images, and other assets for your mockups
work with the data grid control, including how to import data from Excel spreadsheets
use markup components to include annotations, comments, and explanations in your mockups
create a site map using the site map control
create, import, and use symbols in your Balsamiq mockups
manage symbols in your mockups, including overriding properties and using symbols in multiple projects
work with the menu bar and menu controls
use controls in Balsamiq Mockups 3 for Desktop to create a mockup

Overview/Description
Developing a successful software application includes ensuring the user experience is a good one. Creating mockups of the application’s interface and basic interaction allows for rapid development and helps ensure that the required functionality is included in the end product. In this course, you will learn the fundamentals of the Balsamiq Mockups 3 for Desktop tool including the interface controls available and how to work with and manipulate individual and groups of controls. In addition, you will learn about the concepts of layering, cropping, and symbols, and how they can aid in developing mockups.

Target Audience
Individuals involved in the design and development of software applications; developers looking for a rapid tool for wireframing; individuals interested in learning the fundamentals of creating mockups and wireframes using the Balsamiq Mockups tools.

Introduction to Balsamiq Mockups

Course Number:
wd_usba_a01_it_enus

Expected Duration (hours)
2.1

Lesson Objectives

Introduction to Balsamiq Mockups

start the course
describe what a wireframe is, the difference between low-fidelity and high-fidelity wireframes, the elements of wireframes, and how they can be used when creating web sites
describe the versions of Balsamiq and the benefits each provides when creating mockups for wireframing
describe the available Balsamiq plugins and the benefits they provide when creating mockups for wireframing
download and install the Balsamiq Mockups 3 for Desktop application and identify the major areas of the application’s interface
add and edit UI controls in Balsamiq Mockups 3 for Desktop
snap, align, clone, and arrange UI controls in a mockup
layer controls in your mockups and describe the benefits of using layering
group and crop controls and describe the benefits associated with each of these features
work with the Property Inspector to alter control properties and add notes for your mockups, symbols, and assets
create and work with alternate versions of a mockup and describe the benefits of using alternates
work with the Project Info Panel and skins, and identify the differences and benefits of the sketch and wireframe skins
work with text in the mockup controls, including formatting and adding links to text
work with icons, including the different methods available for locating, adding, and changing icons in your wireframes
work with custom icons, including how to create and add your own icons and how to import existing sets of icons
work with images, including how to add and manipulate their properties in your mockups
use the Asset view to manage icons, images, and other assets for your mockups
work with the data grid control, including how to import data from Excel spreadsheets
use markup components to include annotations, comments, and explanations in your mockups
create a site map using the site map control
create, import, and use symbols in your Balsamiq mockups
manage symbols in your mockups, including overriding properties and using symbols in multiple projects
work with the menu bar and menu controls
use controls in Balsamiq Mockups 3 for Desktop to create a mockup

Introduction to Balsamiq Mockups

Course Number:
wd_usba_a01_it_enus

Expected Duration (hours)
2.1

Lesson Objectives

Introduction to Balsamiq Mockups

start the course
describe what a wireframe is, the difference between low-fidelity and high-fidelity wireframes, the elements of wireframes, and how they can be used when creating web sites
describe the versions of Balsamiq and the benefits each provides when creating mockups for wireframing
describe the available Balsamiq plugins and the benefits they provide when creating mockups for wireframing
download and install the Balsamiq Mockups 3 for Desktop application and identify the major areas of the application’s interface
add and edit UI controls in Balsamiq Mockups 3 for Desktop
snap, align, clone, and arrange UI controls in a mockup
layer controls in your mockups and describe the benefits of using layering
group and crop controls and describe the benefits associated with each of these features
work with the Property Inspector to alter control properties and add notes for your mockups, symbols, and assets
create and work with alternate versions of a mockup and describe the benefits of using alternates
work with the Project Info Panel and skins, and identify the differences and benefits of the sketch and wireframe skins
work with text in the mockup controls, including formatting and adding links to text
work with icons, including the different methods available for locating, adding, and changing icons in your wireframes
work with custom icons, including how to create and add your own icons and how to import existing sets of icons
work with images, including how to add and manipulate their properties in your mockups
use the Asset view to manage icons, images, and other assets for your mockups
work with the data grid control, including how to import data from Excel spreadsheets
use markup components to include annotations, comments, and explanations in your mockups
create a site map using the site map control
create, import, and use symbols in your Balsamiq mockups
manage symbols in your mockups, including overriding properties and using symbols in multiple projects
work with the menu bar and menu controls
use controls in Balsamiq Mockups 3 for Desktop to create a mockup

Working with Balsamiq Versions and Plugins

Course Number:
wd_usba_a02_it_enus

Expected Duration (hours)
2.6

Lesson Objectives

Working with Balsamiq Versions and Plugins

start the course
create a header symbol for use in your mockups
create a footer symbol for use in your mockups
work with the modal screen control to create a modal view screen
create a custom linkable control in your mockups
create an image gallery and a thumbnail bar to show selected image
create the hover state to display full images
use linking in your mockups to create a clickable wireframe
import existing assets from other web sites for use in your mockups
import existing mockups and symbols into your current project
export your mockups to images, PDF files, and other projects
plan and begin creating a mockup for a Windows application
finish creating a mockup for a Windows application
plan and begin creating a mockup for a Mobile App
continue creating a mockup for a Mobile App
finish creating a mockup for a Mobile App
download, install, and configure user and site settings in myBalsamiq
plan and begin creating a mockup using myBalsamiq
continue creating a mockup using myBalsamiq
finish creating a mockup using myBalsamiq
install, configure, and begin creating a mockup using Mockups 3 for Google Drive
continue creating a mockup using Mockups 3 for Google Drive
finish creating a mockup using Mockups 3 for Google Drive
use Balsamiq mockups to create a wireframe

Overview/Description
Creating mockups and wireframes is a useful method for aiding in the design and development of software applications. In this course, you will learn how to work with Balsamiq Mockups 3 for Desktop, myBalsamiq, and Mockups 3 for Google Drive to create mockups for Windows, web, and mobile applications. Specifically, you will learn how to create a header and footer, a modal view, linkable control, image gallery, and complete wireframes using the various versions of the Balsamiq Mockups tools, as well as how to import and export assets and how to export mockups in various formats.

Working with Balsamiq Versions and Plugins

Course Number:
wd_usba_a02_it_enus

Expected Duration (hours)
2.6

Lesson Objectives

Working with Balsamiq Versions and Plugins

start the course
create a header symbol for use in your mockups
create a footer symbol for use in your mockups
work with the modal screen control to create a modal view screen
create a custom linkable control in your mockups
create an image gallery and a thumbnail bar to show selected image
create the hover state to display full images
use linking in your mockups to create a clickable wireframe
import existing assets from other web sites for use in your mockups
import existing mockups and symbols into your current project
export your mockups to images, PDF files, and other projects
plan and begin creating a mockup for a Windows application
finish creating a mockup for a Windows application
plan and begin creating a mockup for a Mobile App
continue creating a mockup for a Mobile App
finish creating a mockup for a Mobile App
download, install, and configure user and site settings in myBalsamiq
plan and begin creating a mockup using myBalsamiq
continue creating a mockup using myBalsamiq
finish creating a mockup using myBalsamiq
install, configure, and begin creating a mockup using Mockups 3 for Google Drive
continue creating a mockup using Mockups 3 for Google Drive
finish creating a mockup using Mockups 3 for Google Drive
use Balsamiq mockups to create a wireframe

Working with Balsamiq Versions and Plugins

Course Number:
wd_usba_a02_it_enus

Expected Duration (hours)
2.6

Lesson Objectives

Working with Balsamiq Versions and Plugins

start the course
create a header symbol for use in your mockups
create a footer symbol for use in your mockups
work with the modal screen control to create a modal view screen
create a custom linkable control in your mockups
create an image gallery and a thumbnail bar to show selected image
create the hover state to display full images
use linking in your mockups to create a clickable wireframe
import existing assets from other web sites for use in your mockups
import existing mockups and symbols into your current project
export your mockups to images, PDF files, and other projects
plan and begin creating a mockup for a Windows application
finish creating a mockup for a Windows application
plan and begin creating a mockup for a Mobile App
continue creating a mockup for a Mobile App
finish creating a mockup for a Mobile App
download, install, and configure user and site settings in myBalsamiq
plan and begin creating a mockup using myBalsamiq
continue creating a mockup using myBalsamiq
finish creating a mockup using myBalsamiq
install, configure, and begin creating a mockup using Mockups 3 for Google Drive
continue creating a mockup using Mockups 3 for Google Drive
finish creating a mockup using Mockups 3 for Google Drive
use Balsamiq mockups to create a wireframe