Balsamiq chrome web app review ui mock ups with balsamiq - mod_monstr
1. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR
Chrome Web App Review: UI Mock Ups with
Balsamiq
Managed Cloud @Webair.com
High Availability, Secure, Managed Cloud Solutions! Multiple Locations
www.webair.com
Introduction
Balsamiq Mockups for Google Drive is a highly capable web-based user interface mock up tool. It doesn’t matter if
you’re the developer, project manager, user interface designer, or even the business lead. If you’ve been involved in
the development of web-based software, chances are you’ve done user interface mockups.
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/ 1/5
2. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR
During my early years as a developer, I would design my user interface on sheets of plain bond paper. Then I would
draw them in PowerPoint. When I got Visio, I built UI libraries of bits and pieces that wasn’t in the standard Visio. From
there, I would mock up the UI as accurately as I can. The end-result would then be pasted to my presentation.
Visio is a great product, except for the price. A quick lookup for Visio Standard 2013 shows it’s $299.99. That’s a steep
price tag. If you need more stencils, Visio Professional 2013 will cost you $589.99. One key benefit of buying software
is you get to keep it for a long time. However, as time goes on, it eventually becomes incompatible with the latest
Operating System. Enter the Cloud-based alternative.
If you’re a cloud-based shop that predominantly in the Google cloud and need to mock up user interfaces, Balsamiq
would be a great choice. It offers 77 UI components across ten categories. You can save your files in its native format,
or export it as a *.png file.
It hooks up to your Google Account. Balsamiq’s login screen is your Google Account’s login screen. When you open a
Mockup, it accesses your Google Drive. When you save a Balsamiq Mockup, it saves to your Google Drive as a *.bmml
file. Exporting to a PNG file will also save it to your Google Drive.
Pricing
Balsamiq Mockups for Google Drive has a simple pricing scheme:
Monthly: $5/month ($60/yr)
Yearly: $50/yr
If you’re planning to use it regularly, the Yearly plan would end up saving you money. You don’t have to sign up for a
paid plan immediately. They start you out with a 30 day trial period with full functionality.
To learn more about their pricing, go here: http://www.balsamiq.com/products/mockups/gdrive
Style
Balsamiq Mockups for Google Drive uses a refreshing style for a mock up tool. The stencils look like they’re drawn
from a marker, with its thick and imperfect lines (in a good way). Those add to the prototype look of the user interface
being mocked up and helps set expectations for UI design at this stage in the development lifecycle.
A lot of the stencils are generated based on your input text. For example, you can add a title to your page, and it will
render the text in their style.
How to Install Balsamiq for Google Drive
Like any Chrome app, installation is a simple process:
1. Go to the Chrome Web Store
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/ 2/5
3. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR
2. Find Balsamiq
3. Click on the Add to Chrome button
4. Confirm your add operation
5. Authorize access to your Google Account
The last step is needed because it needs access to your Google Drive.
Add to Chrome Confirm Add to Chrome OAuth2 Allow Access
System Requirements
You need two things for this:
1. A Google Account
2. Flash Player 10
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/ 3/5
4. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR
Flash 10 Player Required
Share this: Facebook 1 Google +1 Reddit Twitter LinkedIn Email
Pages : 1 2 3 4 5
This entry was posted in Chrome Apps, Cloud Development, Development and tagged Balsamiq, Balsamiq Mockups
for Google Drive, Google Drive, Mock Ups, Mockups on March 20, 2013 [http://modmonstr.com/2013/03/20/chrome-
web-app-review-ui-mock-ups-with-balsamiq/] .
Subscribe to our mailing list
email address
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/ 4/5
5. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR
Subscribe
Related Posts
Chrome App Guide: Cloud9 Profile Encryption with
IDE Chrome App Review: Pixlr Chromium and Chrome OS
Express
Introduction to Google Apps Exploring the Chrome Web
Script Store
Quick Guide to Google Keep
for Android
Load more posts
Zemanta
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/ 5/5
6. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 2
Chrome Web App Review: UI Mock Ups with
Balsamiq
Download Chrome for Free
Download Latest Version 100% Free. Fastest Download of Chrome!
www.BrowserScore.com/DownloadChrome
Running Balsamiq for Google Drive within Chrome OS
1. From Chrome OS, click on the Apps List icon
2. Click on the Balsamiq Mockup icon
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/2/ 1/6
7. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 2
Running Balsamiq from Chrome OS/Chromium OS
Running Balsamiq for Google Drive within the Chrome Browser
1. From the address bar, type Chrome Web Store
2. Click on Your Apps on the top-left corner (below the textbox that says Search Apps)
3. Click Launch App next to Balsamiq Mockups
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/2/ 2/6
8. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 2
Running Balsamiq from Chrome Browser
Toolbar
The toolbar contains eleven buttons that corresponds to each grouping of stencils plus All. We’ll show the stencils in
each category.
Big
Items in Big category
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/2/ 3/6
9. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 2
Items in Big category
Items in Big category
Share this: Facebook 1 Google +1 Reddit Twitter LinkedIn Email
Pages : 1 2 3 4 5
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/2/ 4/6
10. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 2
This entry was posted in Chrome Apps, Cloud Development, Development and tagged Balsamiq, Balsamiq Mockups
for Google Drive, Google Drive, Mock Ups, Mockups on March 20, 2013 [http://modmonstr.com/2013/03/20/chrome-
web-app-review-ui-mock-ups-with-balsamiq/] .
Subscribe to our mailing list
email address
Subscribe
Related Posts
Chrome App Guide: Cloud9 Profile Encryption with
IDE Chrome App Review: Pixlr Chromium and Chrome OS
Express
Introduction to Google Apps Exploring the Chrome Web
Script Store
Quick Guide to Google Keep
for Android
Load more posts
Zemanta
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/2/ 5/6
11. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 2
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/2/ 6/6
12. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 3
Chrome Web App Review: UI Mock Ups with
Balsamiq
Download Chrome for Free
Download Latest Version 100% Free. Fastest Download of Chrome!
www.BrowserScore.com/DownloadChrome
Buttons
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/3/ 1/7
13. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 3
Items in Buttons category
Items in Buttons category
Common
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/3/ 2/7
14. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 3
Items in Common category
Items in Common category
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/3/ 3/7
15. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 3
Items in Common category
Containers
Items in Containers category
Forms
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/3/ 4/7
16. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 3
Items in Forms category
Items in Forms category
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/3/ 5/7
17. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 3
Items in Forms category
Items in Forms category
Share this: Facebook 1 Google +1 Reddit Twitter LinkedIn Email
Pages : 1 2 3 4 5
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/3/ 6/7
18. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 3
This entry was posted in Chrome Apps, Cloud Development, Development and tagged Balsamiq, Balsamiq Mockups
for Google Drive, Google Drive, Mock Ups, Mockups on March 20, 2013 [http://modmonstr.com/2013/03/20/chrome-
web-app-review-ui-mock-ups-with-balsamiq/] .
Subscribe to our mailing list
email address
Subscribe
Related Posts
Chrome App Guide: Cloud9 Profile Encryption with
IDE Chrome App Review: Pixlr Chromium and Chrome OS
Express
Load more posts
Zemanta
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/3/ 7/7
19. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 4
Chrome Web App Review: UI Mock Ups with
Balsamiq
AS 400 GUI
Easy to Use Fast to Deploy Low Cost AS400 GUI. Free Download
www.infinitecorporation.com
iPhone
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/4/ 1/7
20. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 4
Items in iPhone category
Layout
Items in Layout category
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/4/ 2/7
21. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 4
Items in Layout category
Markup
Items in Markup category
Media
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/4/ 3/7
22. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 4
Items in Media category
Items in Media category
Text
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/4/ 4/7
23. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 4
Items in Text category
Items in Text category
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/4/ 5/7
24. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 4
Items in Text category
Share this: Facebook 1 Google +1 Reddit Twitter LinkedIn Email
Pages : 1 2 3 4 5
This entry was posted in Chrome Apps, Cloud Development, Development and tagged Balsamiq, Balsamiq Mockups
for Google Drive, Google Drive, Mock Ups, Mockups on March 20, 2013 [http://modmonstr.com/2013/03/20/chrome-
web-app-review-ui-mock-ups-with-balsamiq/] .
Subscribe to our mailing list
email address
Subscribe
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/4/ 6/7
25. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 4
Related Posts
Chrome App Guide: Cloud9 Profile Encryption with
IDE Chrome App Review: Pixlr Chromium and Chrome OS
Express
Load more posts
Zemanta
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/4/ 7/7
26. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 5
Chrome Web App Review: UI Mock Ups with
Balsamiq
AS 400 GUI
Easy to Use Fast to Deploy Low Cost AS400 GUI. Free Download
www.infinitecorporation.com
Saving a Balsamiq Mockup
If this is the first time you’re saving the current Mockup:
1. Click on the Mockup menu
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/5/ 1/8
27. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 5
2. Click Save
3. Enter the Mockup name
4. Click Save
*If you have already named the mockup, you only need to do Steps 1-2 the next time you want to save that particular
mockup.
Sample App 1 – Save Mockup
Exporting a Balsamiq Mockup as a PNG File
1. Click Mockup
2. Click Export to PNG
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/5/ 2/8
28. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 5
Sample App 1 – Export to PNG
Sample Mockups
Sample #1 – A Maps App
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/5/ 3/8
29. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 5
Sample App 1
Exported as PNG
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/5/ 4/8
30. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 5
Sample App 1 – Exported as PNG
Sample #2 – A Store App
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/5/ 5/8
31. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 5
Sample App 2
Exported as PNG
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/5/ 6/8
32. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 5
Sample App 2 – Exported as PNG
Wrap-Up
Balsamiq Mockups for Google Drive is a great tool to have for those who developers mostly in the cloud. Their
stencils are great and has a wide coverage. If you’re looking to transition to cloud-based development tools, this is a
welcome addition.
Do try it for the entire 30 day trial period and see for yourself.
Here is the direct link to Balsamiq on the Chrome Web Store:
https://chrome.google.com/webstore/detail/balsamiq-mockups/pplbmgaodhjmbklkgkgmlghaekcfhhkk
Share this: Facebook 1 Google +1 Reddit Twitter LinkedIn Email
Pages : 1 2 3 4 5
This entry was posted in Chrome Apps, Cloud Development, Development and tagged Balsamiq, Balsamiq Mockups
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/5/ 7/8
33. 3/26/13 Chrome Web App Review: UI Mock Ups with Balsamiq | ModMonstR | Page 5
for Google Drive, Google Drive, Mock Ups, Mockups on March 20, 2013 [http://modmonstr.com/2013/03/20/chrome-
web-app-review-ui-mock-ups-with-balsamiq/] .
Subscribe to our mailing list
email address
Subscribe
Related Posts
Chrome App Guide: Cloud9 Profile Encryption with
IDE Chrome App Review: Pixlr Chromium and Chrome OS
Express
Load more posts
Zemanta
modmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/5/ 8/8