In the less than two years since its release, the HTML/CSS framework Bootstrap has become so popular and widespread that it can already be considered a de-facto standard. Thousands of websites worldwide are built on top of Bootstrap, including StumbleUpon, Squidoo, and Disqus. This isn’t surprising, as Bootstrap saves web developers time and hassle by providing a solid foundation that is well documented, regularly updated, and easy to customize.
Bootstrap Wireframing Template for PowerPoint
The usual way to get started with Bootstrap is to use one of the example layouts from the website and then fiddle with it. While this approach is great for becoming familiar with the framework and seeing quick results, serious projects should begin with a plan. Many web designers and developers use wireframes as a visual tool for planning the layout of a site prior to writing any code. Wireframes are easy to create, quick to modify, and help focus on structural questions before delving into design and coding details.
As a starting point for wireframing your next Bootstrap-based website, I have designed a set of template slides for Microsoft PowerPoint. It might surprise you, but PowerPoint actually makes a good tool for building wireframes. It has a rich set of drawing features, supports a variety of import and export formats, and the slideshow features are great for creating simple click-through prototypes.
You will notice from the screenshots below that the wireframing set is styled like an architectural blueprint. The blueprint metaphor can be useful for clients to understand that wireframes are about structure and functionality and not design details.
Example Wireframe
An example wireframe of a simple Bootstrap-based website.
Typography
Heading and text styles.
Lists, Tooltips, Labels, Alerts, Popovers
Buttons, Form Controls
Buttons in all sizes and variations, as well as typical form controls such as input boxes and radio buttons.
Table, Navigation Controls
A table element, as well as different navigation controls such as tabs, toolbars and pagination links.
Nav List, Modal, Images
A navigation list control, a modal dialog and various dummy image shapes.
Thumbnail, Carousel
A thumbnail box and a carousel control.
Bootstrap Icons
246 vector Bootstrap icons, originally created by Dave Gandy.
1170 Grid
A template slide with a 1170px Bootstrap grid in the background.
940 Grid
A template slide with a 940px Bootstrap grid in the background.
724 Grid
A template slide with a 724px Bootstrap grid in the background.
How to Use the Template
Using the template is easy: Simply open the .pptx file in PowerPoint, add an empty slide, and assemble a wireframe by copying existing elements from the template and pasting them onto the new slide. You can also make your wireframes interactive by adding links between slides. For instance, a clickable button can be created as follows:
- Add a button shape to the slide and select it.
- Go to the “Insert” ribbon and click on “Action”.
- Select “Hyperlink to:” and choose the slide to jump to when the button is clicked.
It’s worth noting that the button is only active when PowerPoint is in presentation mode (press Shift+F5).
Another way to add interactivity in PowerPoint is by using animations. For instance, you can create a button that when clicked displays a drop-down menu:
- Add a button shape to the slide.
- Add a drop-down menu shape to the slide and select it.
- Go to the “Animations” ribbon, click “Add Animation”, and choose “Appear”.
- Click “Trigger” → “On Click of”, then select the name of the button shape.
If you don’t know the name of the button shape, select the shape on the slide, and press Alt+F10 to show the Selection Pane. This pane lists all shapes including their names, which can be edited if needed.
When working with the template, you may find yourself longing for an easier way to search and use the template elements. In this case, I recommend taking a look at PowerMockup, an add-on that my company has developed. It provides a searchable library of wireframe stencils that can easily be dragged and dropped onto a PowerPoint slide.
Since PowerMockup also lets you create your own categories and stencils, I have used this feature to add the elements of the Bootstrap wireframe set and exported them as .pmst files. You can download the .pmst files and then import them into PowerMockup as follows:
- Switch to the PowerMockup ribbon.
- Click the “Import Files” button.
- Select the downloaded .pmst files.
Get the Template
The template set is available as a .pptx file for PowerPoint 2007 and higher.
The slides are licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. This means that you can use them freely in any way you want for both private and commercial purposes, but if you make your results publicly available, you have to do that under the same or similar license and give proper attribution to the original creators:
- The template set has been compiled by Andreas Wulf,
- The included icons are based on the Font Awesome font by Dave Gandy,
Here is a screenshot of how it will look like after you have imported the files into PowerMockup:
I hope you enjoy it. Happy Wireframing!
[freebiesub download=”http://cdn.onextrapixel.com/wp-content/uploads/2013/06/bootstrap-wireframing-set.zip”]