SlideShare una empresa de Scribd logo
1 de 33
Descargar para leer sin conexión
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
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/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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

Más contenido relacionado

Destacado (14)

Expanding the Commercial Partnership
Expanding the Commercial PartnershipExpanding the Commercial Partnership
Expanding the Commercial Partnership
 
Repulse script
Repulse scriptRepulse script
Repulse script
 
Treatment Sheet
Treatment SheetTreatment Sheet
Treatment Sheet
 
Question two
Question twoQuestion two
Question two
 
Shooting schedule 1
Shooting schedule 1Shooting schedule 1
Shooting schedule 1
 
Treatment sheet[1]
Treatment sheet[1]Treatment sheet[1]
Treatment sheet[1]
 
Question 4
Question 4Question 4
Question 4
 
Quick guide to google keep for android mod monstr
Quick guide to google keep for android   mod monstrQuick guide to google keep for android   mod monstr
Quick guide to google keep for android mod monstr
 
Weyerhaeuser: New Routes for U.S. - Japan Collaboration
Weyerhaeuser: New Routes for U.S. - Japan CollaborationWeyerhaeuser: New Routes for U.S. - Japan Collaboration
Weyerhaeuser: New Routes for U.S. - Japan Collaboration
 
Analysis of a opening sequence – kiss kiss bang bang
Analysis of a opening sequence – kiss kiss bang bangAnalysis of a opening sequence – kiss kiss bang bang
Analysis of a opening sequence – kiss kiss bang bang
 
Renewable Energy: Impressions from Japan
Renewable Energy: Impressions from JapanRenewable Energy: Impressions from Japan
Renewable Energy: Impressions from Japan
 
00057dc4 1d7a60f4
00057dc4 1d7a60f400057dc4 1d7a60f4
00057dc4 1d7a60f4
 
Mis adopted by big bazaar
Mis adopted by big bazaarMis adopted by big bazaar
Mis adopted by big bazaar
 
Aumente suas vendas sem baixar seus preços
Aumente suas vendas sem baixar seus preçosAumente suas vendas sem baixar seus preços
Aumente suas vendas sem baixar seus preços
 

Similar a Balsamiq chrome web app review ui mock ups with balsamiq - mod_monstr

Headless browser a stepping stone towards developing smarter web applicatio...
Headless browser   a stepping stone towards developing smarter web applicatio...Headless browser   a stepping stone towards developing smarter web applicatio...
Headless browser a stepping stone towards developing smarter web applicatio...Bala Murugan
 
Introduction to Polymer Project - DILo Surabaya
Introduction to Polymer Project - DILo SurabayaIntroduction to Polymer Project - DILo Surabaya
Introduction to Polymer Project - DILo SurabayaDILo Surabaya
 
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web StoreSmart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web StoreSeth Ladd
 
Chrome Extensions: Masking risks in entertainment
Chrome Extensions: Masking risks in entertainmentChrome Extensions: Masking risks in entertainment
Chrome Extensions: Masking risks in entertainmentEduardo Chavarro
 
Google Chrome-World's No. 1 Browser
Google Chrome-World's No. 1 BrowserGoogle Chrome-World's No. 1 Browser
Google Chrome-World's No. 1 BrowserDigitalDiscount
 
Android Chromium Rendering Pipeline
Android Chromium Rendering PipelineAndroid Chromium Rendering Pipeline
Android Chromium Rendering PipelineHyungwook Lee
 
Dive Into Chrome-100119
Dive Into Chrome-100119Dive Into Chrome-100119
Dive Into Chrome-100119yiming he
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino
 
Desenvolvimento Mobile Híbrido
Desenvolvimento Mobile HíbridoDesenvolvimento Mobile Híbrido
Desenvolvimento Mobile HíbridoJuliano Martins
 
Headless Browser – A Stepping Stone Towards Developing Smarter Web Applicatio...
Headless Browser – A Stepping Stone Towards Developing Smarter Web Applicatio...Headless Browser – A Stepping Stone Towards Developing Smarter Web Applicatio...
Headless Browser – A Stepping Stone Towards Developing Smarter Web Applicatio...pCloudy
 
Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Abdelrahman Omran
 
Easy Cross Browser Testing with LambdaTest Screenshots Chrome Extension
Easy Cross Browser Testing with LambdaTest Screenshots Chrome ExtensionEasy Cross Browser Testing with LambdaTest Screenshots Chrome Extension
Easy Cross Browser Testing with LambdaTest Screenshots Chrome ExtensionSarah Elson
 
More Browser Basics, Tips & Tricks 3 Draft 8
More Browser Basics, Tips & Tricks 3 Draft 8More Browser Basics, Tips & Tricks 3 Draft 8
More Browser Basics, Tips & Tricks 3 Draft 8msz
 
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO  - SMX 201410 Things Webdesigners tend to do Wrong in SEO  - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014Timon Hartung
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Zoe Gillenwater
 

Similar a Balsamiq chrome web app review ui mock ups with balsamiq - mod_monstr (20)

Google chrome
Google chrome Google chrome
Google chrome
 
Headless browser a stepping stone towards developing smarter web applicatio...
Headless browser   a stepping stone towards developing smarter web applicatio...Headless browser   a stepping stone towards developing smarter web applicatio...
Headless browser a stepping stone towards developing smarter web applicatio...
 
Introduction to polymer project
Introduction to polymer projectIntroduction to polymer project
Introduction to polymer project
 
Introduction to Polymer Project - DILo Surabaya
Introduction to Polymer Project - DILo SurabayaIntroduction to Polymer Project - DILo Surabaya
Introduction to Polymer Project - DILo Surabaya
 
are.pdf
are.pdfare.pdf
are.pdf
 
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web StoreSmart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
 
Chrome Extensions: Masking risks in entertainment
Chrome Extensions: Masking risks in entertainmentChrome Extensions: Masking risks in entertainment
Chrome Extensions: Masking risks in entertainment
 
Google Chrome-World's No. 1 Browser
Google Chrome-World's No. 1 BrowserGoogle Chrome-World's No. 1 Browser
Google Chrome-World's No. 1 Browser
 
Android Chromium Rendering Pipeline
Android Chromium Rendering PipelineAndroid Chromium Rendering Pipeline
Android Chromium Rendering Pipeline
 
Dive Into Chrome-100119
Dive Into Chrome-100119Dive Into Chrome-100119
Dive Into Chrome-100119
 
Chrome
ChromeChrome
Chrome
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
24 Tips for SITECORE
24 Tips for SITECORE24 Tips for SITECORE
24 Tips for SITECORE
 
Desenvolvimento Mobile Híbrido
Desenvolvimento Mobile HíbridoDesenvolvimento Mobile Híbrido
Desenvolvimento Mobile Híbrido
 
Headless Browser – A Stepping Stone Towards Developing Smarter Web Applicatio...
Headless Browser – A Stepping Stone Towards Developing Smarter Web Applicatio...Headless Browser – A Stepping Stone Towards Developing Smarter Web Applicatio...
Headless Browser – A Stepping Stone Towards Developing Smarter Web Applicatio...
 
Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016
 
Easy Cross Browser Testing with LambdaTest Screenshots Chrome Extension
Easy Cross Browser Testing with LambdaTest Screenshots Chrome ExtensionEasy Cross Browser Testing with LambdaTest Screenshots Chrome Extension
Easy Cross Browser Testing with LambdaTest Screenshots Chrome Extension
 
More Browser Basics, Tips & Tricks 3 Draft 8
More Browser Basics, Tips & Tricks 3 Draft 8More Browser Basics, Tips & Tricks 3 Draft 8
More Browser Basics, Tips & Tricks 3 Draft 8
 
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO  - SMX 201410 Things Webdesigners tend to do Wrong in SEO  - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
 

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