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

  • 301 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
301
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 Storemodmonstr.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 10modmonstr.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 addressmodmonstr.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 Zemantamodmonstr.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 iconmodmonstr.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 Mockupsmodmonstr.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 categorymodmonstr.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 5modmonstr.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 Zemantamodmonstr.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 2modmonstr.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 Buttonsmodmonstr.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 Commonmodmonstr.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 categorymodmonstr.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 Formsmodmonstr.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 categorymodmonstr.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 5modmonstr.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 Zemantamodmonstr.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 iPhonemodmonstr.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 categorymodmonstr.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 Mediamodmonstr.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 Textmodmonstr.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 categorymodmonstr.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 Subscribemodmonstr.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 Zemantamodmonstr.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 menumodmonstr.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 PNGmodmonstr.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 Appmodmonstr.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 PNGmodmonstr.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 Appmodmonstr.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 PNGmodmonstr.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 Mockupsmodmonstr.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 Zemantamodmonstr.com/2013/03/20/chrome-web-app-review-ui-mock-ups-with-balsamiq/5/ 8/8