This tutorial describes how to create project folders for your future projects that contain elements you may commonly use in your projects.
The general idea is to create project folder, with your common elements stored in the folder’s assets directory, and then duplicate that folder on your new projects.
It also includes links to some useful starter templates for UX and Bootstrap projects.
How to Create a Project TemplateNote: This process applies to Balsamiq Mockups 3 for Desktop. It can be replicated in web versions using projects instead of folders.
Your process might look like this:
- Create a new Project Folder Open your Balsamiq Mockups directory on your computer and create a new folder there. For instance, you might name it “Project Template - Web Apps,” if you had a standard at your company for Web App projects.
- Add an assets folder Create a sub-folder in the project folder you created above. Then add the elements you commonly use, e.g. your logo, or create a Symbols Libraries for elements you use.
- Create some default templates This is optional, but you can create some templates with the base set of controls you want in each type of page. In the UX and Bootstrap example templates we include examples to give you some ideas. For instance, we have a Desktop wireframe with a grid control, and we might have our header or annotation block placed in the same place in each template.
- Duplicate the project folder template on new projects When you want to start a new project, duplicate the project template folder. Then rename the duplicate with your new project name.
We have a few example templates to show how you might get started.
Using the UX Template
The UX Template (download here - components here) is designed for people working on UX Design projects who typically need to present a polished deck to clients. For this reason, this template is made to work with the Wireframe Skin (menu: View > Skin > Wireframe Skin) and System Fonts (View > User System Fonts).
The template contains a few example pages, including persona sheets, journey map, sitemap, storyboard, and wireframe pages with annotation. Using these examples, you’ll be able to open your project in Fullscreen/Presentation mode, or in an exported PDF that is suitable for client presentation. The screenshots below show some of the elements provided in this template.
Using the Bootstrap Template
The Bootstrap Template (download here) is designed for people who know they’re going to be using Bootstrap, and want to use the text elements, and components common to the Bootstrap framework. The screenshots below show some of the elements provided in this template.