Creating effective wireframes often involves incorporating images, icons, and various assets to visualize your ideas clearly. Balsamiq Wireframes offers versatile tools to seamlessly integrate these elements, enhancing your prototyping process. This guide will walk you through the best practices for adding and managing images and assets within Balsamiq Wireframes, ensuring your projects remain efficient and visually compelling.
Understanding Image Handling in Balsamiq Wireframes
While Balsamiq Wireframes supports drag-and-drop functionality for adding images directly onto your canvas, it’s crucial to understand how the application handles these visuals. Adding numerous or very large images can impact project performance, leading to slower loading times and increased project file sizes. As a low-fidelity prototyping tool, Balsamiq Wireframes optimizes images to maintain efficiency:
- Image Resizing: Images are automatically resized to a maximum of 2 megapixels, reducing file size without significant visual quality loss for wireframing purposes.
- Retina and HiDPI Scaling: High-resolution images, including Retina (2x) and HiDPI images, are down-scaled to standard resolutions (1x) for optimal performance within the wireframe environment.
- Format Conversion: PNG images may be converted to JPG format where appropriate to further reduce file size, leveraging the compression capabilities of JPG for suitable images.
Supported Image Formats: Balsamiq Wireframes supports common image formats including PNG, JPG/JPEG, and GIF, providing flexibility in the types of visuals you can incorporate.
Adding Images Directly in Wireframes View
The most direct method to add images is by dragging and dropping image files from your computer directly onto the wireframe canvas. This action not only places the image into the specific wireframe you are working on but also automatically copies the image file to the project’s Assets library. This feature allows for easy reuse of the image across multiple wireframes within your project.
Once an image is added, you can fine-tune its properties using the Property Inspector, similar to how you would adjust settings for other UI controls. Image-specific properties include:
- Image Selection Dropdown: This dropdown menu displays the name of the currently selected image. Clicking it reveals a list of all images imported into your project’s Assets library, allowing you to quickly switch images.
- “+” Add Image Icon: Located next to the dropdown, this icon provides an alternative way to import images from your computer, mirroring the drag-and-drop functionality.
- Cloud Icon for Web Images: Clicking the cloud icon opens a dialog box where you can paste a URL to directly import images from the web. Balsamiq Wireframes supports GIF, JPG/JPEG, and PNG formats for web images. Downloaded images are automatically saved to your project for offline use.
- Rotate Icon: Positioned below the image dropdown, this icon allows you to rotate the image in 90-degree increments, useful for adjusting image orientation within your wireframe.
- Revert to Placeholder Icon: Represented by a square with an ‘x’, this icon resets the image back to the default placeholder image, helpful for temporarily removing an image or starting with a clean slate.
- “Sketch it!” Checkbox: Activating this checkbox transforms your image into a black and white line drawing, reinforcing the low-fidelity aesthetic of wireframes.
Alt text: Default image placeholder in Balsamiq Wireframes, a grey box with a large ‘X’ indicating an image control.
For situations where you don’t have the final image ready or prefer to use a placeholder to maintain a low-fidelity approach, you can utilize the Image control from the UI Library. This control initially appears as a box with an ‘X’. You can easily replace this placeholder with an actual image later using the image properties in the Property Inspector.
After adding an image to your project, it becomes readily available in the UI Library under the “Assets” category. This allows you to drag and drop the image onto any wireframe within your project directly from the UI Library.
Furthermore, the Quick Add tool enhances efficiency. Simply typing the first few letters of an image’s name in the Quick Add box will display it in the suggestions, enabling rapid insertion of images into your wireframes.
The Property Inspector also offers advanced image manipulation options, including cropping and masking. Cropping allows you to display only a specific portion of an image, while masking lets you shape the image. Images that have been cropped will display a specific icon in the properties panel, providing a visual cue and options for further adjustments.
Beyond the standard Image control, you can also incorporate images into other elements like the Cover Flow control, expanding the possibilities for visual presentation within your wireframes.
Managing Assets Centrally in Assets View
Balsamiq Wireframes features a dedicated Assets view, providing a centralized hub for managing all images, icons, and other project-related files.
Alt text: Balsamiq Wireframes Assets View interface, showcasing thumbnail and list views with toolbar icons for asset management.
Accessible through the View menu, the Assets view offers a comprehensive overview of all assets within your project.
You can add images to the Assets view by dragging and dropping files directly from your computer or by utilizing the import and download icons located in the toolbar at the top of the Assets view.
Alt text: Toolbar in Balsamiq Wireframes Assets View with icons labeled “Import Asset…” and “Download Asset…” for adding new assets.
The “Import Asset…” icon enables you to select one or multiple images from your local file system, while the “Download Asset…” icon opens the same dialog as in the wireframes view, allowing you to import images by entering a URL.
Alt text: Dialog box in Balsamiq Wireframes for adding assets from the web by entering a URL.
Once images are added, you can choose to view them as thumbnails for a visual overview or as a list for a more detailed, text-based organization.
The Property Inspector, when used in the Assets view, displays the pixel dimensions of the selected image and provides a “Notes” field for adding descriptive information. Crucially, the lower section of the Property Inspector indicates which wireframes are currently using the selected image. This feature is invaluable for asset management, allowing you to identify and remove unused images to optimize project size and organization. Clicking on a wireframe name in this section will directly navigate you to that wireframe in the Wireframes view.
Utilizing the Split Image Feature
Balsamiq Wireframes offers a unique “Split Image” feature, accessible via a button in the Property Inspector. This functionality allows you to divide an image horizontally, creating interactive or illustrative effects.
Upon clicking the “Split Image” button, a horizontal bar appears on the image. You can drag this bar to define the desired split point. Once positioned, clicking “Split Image” on the floating toolbar that appears above the image will execute the split at the bar’s location, effectively dividing your image into two horizontal segments.
Alt text: Animated GIF demonstrating the Split Image feature in Balsamiq Wireframes, showing the horizontal bar being dragged and the image splitting.
Incorporating Non-Image Assets
Beyond images and icons, Balsamiq Wireframes allows you to store other types of project-related files within your project. These “non-image assets” can include requirement documents, design files (like Photoshop or Illustrator files), PDFs, or any other files relevant to your project’s context. You can add these files to your project by simply dragging them into the Assets view, similar to adding images. Common file types (such as ZIP, PDF, DOC) are displayed with recognizable logos, while less common files are represented by a generic document icon.
File Size Limit: For performance reasons, individual assets are limited to a maximum size of 20 Megabytes.
Although these non-image assets cannot be viewed directly within Balsamiq Wireframes, they are packaged with your project file. This ensures that if you share your project file with collaborators, they will have access to these supporting documents. Users can extract these files from the Balsamiq project to their local computer using the “Save to disk” button or through the context menu options within the Assets view.
Efficiently Managing Images and Assets
The Assets view, mirroring the Wireframes view, provides a context menu, accessible by right-clicking within the asset navigator or using the dropdown arrow. This menu offers a range of actions for managing your assets: rename, cut, copy, download, update, and delete.
Alt text: Context menu in Balsamiq Wireframes Assets View showcasing options like “Rename,” “Save to Disk,” “Import New Version,” and “Delete.”
Renaming Assets
Utilizing the “Rename” option from the context menu allows you to change the asset’s name within your Balsamiq project. This action is project-specific and does not alter the original file name on your computer. Importantly, renamed images are automatically updated in all wireframes where they are used, eliminating the need for manual updates and ensuring consistency across your project.
Saving Assets to Your Computer
The “Save to Disk” option in the context menu enables you to export assets from your Balsamiq project to your computer. This is particularly useful for extracting images or other files for external use or archival purposes.
Replacing and Updating Assets
The “Import New Version…” menu item provides a streamlined way to replace an existing asset with a new version. This is especially beneficial for updating images that are already used across multiple wireframes. Selecting this option and choosing a new asset file will automatically replace the selected asset with the new version throughout your project, ensuring all instances of the image are updated simultaneously.
Deleting Assets
The context menu also includes a “Delete” option for removing assets from your project. Similar to deleting wireframes, deleting assets moves them to the project’s Trash. From the Trash, you can permanently delete assets or restore them back to your project.
Trash Management: Balsamiq Wireframes provides a convenient toast message notification that appears after deleting assets, offering a direct “Empty Trash” option for permanently removing deleted items.
Selecting Unused Images for Cleanup
To further optimize your project and reduce file size, Balsamiq Wireframes provides a “Select Unused Images” option, found under the Edit menu.
Alt text: “Select Unused Images” option highlighted in the Edit menu of Balsamiq Wireframes.
Selecting this option automatically opens the Assets view and highlights all images that are not currently used in any wireframes within your project. This allows you to quickly identify and delete redundant images, streamlining your project’s asset library and minimizing file size. You can then delete these selected unused images using the context menu or the toast message prompt.
Alt text: Toast message in Balsamiq Wireframes prompting to “Trash Unused Images” with “Trash” and “Cancel” buttons.
Leveraging Icons from Font Awesome and Custom Icons
Balsamiq Wireframes comes pre-loaded with the extensive Font Awesome icon set, offering over 6300 icons across diverse categories. These icons are scalable from extra small (XS) to double extra large (XXL), providing flexibility for various UI needs.
Icons have their own dedicated category within the UI Library, making them easily accessible for drag-and-drop insertion, just like any other UI control.
Icons are also integrated into the Quick Add functionality. Searching for icons by name or keyword in the Quick Add box will display relevant icon results below matching UI controls, significantly speeding up icon insertion.
Alt text: Icon search results displayed in Balsamiq Wireframes Quick Add tool, showing icons below UI control suggestions.
Text and Icon Combination: You can seamlessly combine icons and text within any text-based control in Balsamiq Wireframes, enriching your wireframe elements with visual cues.
Adding and Customizing Icons via the Property Inspector
For controls that support icons (such as buttons), the Property Inspector provides two methods for adding and customizing icons: icon search and the icon library dialog.
Icon Search Functionality
When a supported control is selected, the Property Inspector displays an icon search box. This functions similarly to the Quick Add tool. Typing a few letters of the desired icon name triggers a dropdown list of icon suggestions, displayed as a grid. Simply click on an icon to select and apply it to the control.
Alt text: Icon search box in Balsamiq Wireframes Property Inspector with a dropdown grid of icon suggestions.
After selecting an icon, you can adjust its size, ranging from “XS” (16px) to “XXL” (128px), directly within the Property Inspector. A rotation button next to the search box allows for 90-degree incremental rotations of the icon.
Exploring the Icon Library Dialog
For a comprehensive view of all available icons, clicking the icon to the right of the icon search box opens the icon library dialog.
This dialog allows you to browse icons by category, preview them at different sizes, and select them for use. Double-clicking an icon immediately selects it, while single-clicking allows you to preview and then select using the “Select” button.
Alt text: Balsamiq Wireframes Icon Library dialog box displaying icon categories, previews, and the “Select” button.
Once an icon is selected and applied, you can further customize its size, rotation, and other properties through the Property Inspector.
Incorporating Your Own Custom Icons
Balsamiq Wireframes extends icon customization by allowing you to use any imported image as a custom icon. To do this, simply select an image that you’ve already imported into your project. Then, designate it as an icon. Custom icons automatically appear in the icon library under the “Assets” category, located at the bottom of the library for easy access.
Alt text: Custom icons displayed in the Assets category of the Balsamiq Wireframes icon library.
Best Practices for Custom Icon Creation
To ensure your custom icons render optimally in Balsamiq Wireframes, consider these best practices during creation and preparation:
Color Considerations
- Balsamiq Wireframes uses black as the base color for icon replacement at 100% opacity.
- Icons not created primarily in black may exhibit unexpected colorization effects when color is applied within Balsamiq.
- It is recommended to design your custom icons using black as the primary color for best results.
Transparency for Optimal Rendering
- Balsamiq Wireframes applies colorization to the entire opaque area of an icon.
- For optimal results and clean colorization, it is recommended to use transparency to “knock out” any areas of your icon that should appear as white or uncolored. Transparent PNG format generally works best for custom icons.
The example below illustrates the difference: the left column shows standard icons, the middle column displays a properly prepared custom icon with black fills, and the right column shows a custom icon that is not ideally prepared. To correct the icon in the right column, the exclamation point should be made transparent, and the icon’s fill color should be black. By adhering to these guidelines, you can ensure your custom icons integrate seamlessly and look their best within your Balsamiq Wireframes projects, enhancing the visual clarity and professional appearance of your prototypes.
