O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Balsamiq Wireframes Quickstart Guide

Book Description

Wireframe like a pro, the easy way.

  • A simple yet professional approach to wireframing and prototyping using Balsamiq Mockups
  • Practice essential wireframing skills using real-world examples and challenging exercises
  • Build simple, interactive, clickable and effective prototypes with Balsamiq

In Detail

Balsamiq Mockups is an easy to use, engaging tool for anyone looking to strategize and brainstorm ideas around product design and information architecture. With Balsamiq, you can strategize, create, prototype and present your ideas clearly and effectively to audiences large and small.

"Balsamiq Wireframes Quickstart Guide" is a fast paced and easy to follow instructional book that gets you up and running quickly while challenging you to be the best you can be using the tool. With this book in hand, it will take only minutes to present an idea on screen.

Wireframing is one of the key steps of effective user interface design and architecture. Finding the right tools to get your thoughts onto the page quickly and clearly is vital to your success. This book will have you on your way in no time. "Balsamiq Mockups Quickstart Guide" will walk you through the entire application in a fast, simple and engaging way. You will be presented with wireframe samples, exercises and real-world examples that will engage, challenge and enable you to become an expert wireframer and Balsamiq user. Whether you are looking to communicate ideas to your team, a client, a product manager, an IT developer, or if you are wireframing for the fun of it, this book is for you. By the time you are finished, you will have mastered the tools to do whatever your mind can think up. The rest is up to you.

Table of Contents

  1. Balsamiq Wireframes Quickstart Guide
    1. Table of Contents
    2. Balsamiq Wireframes Quickstart Guide
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Getting to Know Balsamiq
      1. What is Balsamiq?
      2. Installing Balsamiq
        1. System requirements
        2. Installation
        3. What is Adobe Air?
        4. Balsamiq Mockups versus myBalsamiq
        5. Trial versus paid version
      3. The application
        1. Application menu
          1. New Clone of Current Mockup
          2. Save All
          3. Close All
          4. Export to PNG Image
          5. Export All Mockups to PNG
          6. Export All Mockups to PDF
          7. Export Image to Clipboard
          8. Export Mockup XML
          9. Import Mockup XML
        2. Application view
          1. Application Bar
            1. Quick Add
            2. Tool Bar
            3. Show Markup
            4. Full Screen (Presentation Mode)
          2. UI Library
          3. Canvas
          4. File Browser
        3. Property Inspector
      4. Summary
    9. 2. Building a Project
      1. The project files
      2. Organizing your Balsamiq files
        1. Naming your files
          1. Alphabetically
          2. Numbering
      3. The project
        1. So what are we building?
        2. The UI Library revisited
        3. Adding a widget
      4. Alignment
      5. Layering
      6. Grouping layers
      7. Putting it all together
        1. Before we begin: A brief word about design and layout
        2. Rectangle/Canvas/Panel
        3. Adding text
        4. Images
        5. Align tool
        6. The body copy
      8. Summary
    10. 3. Working with Symbols
      1. What are symbols?
      2. Creating a symbol
        1. Location of the saved symbols
        2. Symbols.bmml
          1. Symbols as a master page
      3. Modifying a symbol
        1. Page by page
        2. All pages
        3. Additional ways to edit a symbol
          1. Break Apart
          2. Edit Source
          3. Project Assets
          4. Reverting to saved
        4. Deleting a symbol
          1. Page by page
          2. All pages
      4. Revisiting the wireframe project
        1. Adding symbols to multiple pages
          1. Copying and pasting the symbol
          2. Dragging the symbol
          3. Double-clicking on the symbol
        2. Creating a new symbol
          1. Adding some text
          2. Adding the footer to all pages
      5. Creating a symbol library
        1. Adding the symbol to your project
      6. Sharing symbols
        1. Project by project
        2. All projects
      7. Summary
    11. 4. Building Data Tables
      1. Data tables
      2. Formatting data
      3. Deciphering the data
        1. Columns and rows: A closer look
        2. Grid form elements
        3. Width and alignment controls
      4. Data table tips
        1. Highlighting a table row
        2. Adding a scroll bar
      5. Wireframe project revisited
        1. Revising your project
          1. Action Bar
          2. Data table
          3. Paging
      6. Even more tips
        1. Formatting: Readability is usability
        2. Data table details
          1. Learn more/see more
          2. Padding table columns
          3. Aligning text
          4. Maximum column width
        3. Mac and PC compatibility issues
      7. Summary
    12. 5. Icons, Images, and Text
      1. Exploring icons
      2. Importing icons
        1. The Icon Library
      3. Images
        1. The Load Image window
        2. Copying images to project assets
        3. Image not found
        4. Cropping images
      4. Text usage and formatting
        1. Additional text tools
        2. Combining formatting styles
        3. Single line text versus paragraph
      5. Additional tips
        1. Lorem ipsum
        2. Sketch it!
        3. Auto-Size
      6. Summary
    13. 6. Presenting Your Work
      1. Prototyping
        1. Symbols revisited
      2. Linking pages
        1. Presentation mode
          1. Link types
          2. The other two icons
      3. Additional interactivity
        1. Interactive checkbox
        2. Even more interactivity
      4. Notes and documentation (also known as markup)
        1. Markup widgets
      5. Exporting for Presentation
        1. Exporting to PDF
        2. Exporting to PNG
          1. Exporting a single page to PNG
          2. Exporting individual elements to PNG
          3. Exporting an entire project to PNG
        3. Exporting an image to the clipboard
      6. XML in Balsamiq
        1. Exporting wireframes as XML
        2. Importing XML
      7. Summary
    14. 7. Parting Thoughts: Resources and Recommendations
      1. More about Balsamiq
        1. Balsamiq blog
        2. Balsamiq support
          1. Record a Screencast
          2. Ask the community
        3. Keyboard shortcuts
      2. Third-party extensions
        1. Napkee
        2. MockupsToGo
        3. Reality Mechanic
        4. LiveMockups
        5. Wirify by Volkside
        6. Project management
      3. Further reading
        1. Books
        2. Usability websites
        3. One final tip
      4. Summary
    15. Index