Free Bootstrap Wireframing Set for PowerPoint

Free Bootstrap Wireframing Set for PowerPoint

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.

Example Wireframe

Typography
Heading and text styles.

Typography

Lists, Tooltips, Labels, Alerts, Popovers
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.

Buttons, Form Controls

Table, Navigation Controls
A table element, as well as different navigation controls such as tabs, toolbars and pagination links.

Table, Navigation Controls

Nav List, Modal, Images
A navigation list control, a modal dialog and various dummy image shapes.

Nav List, Modal, Images

Thumbnail, Carousel
A thumbnail box and a carousel control.

Thumbnail, Carousel

Bootstrap Icons
246 vector Bootstrap icons, originally created by Dave Gandy.

Bootstrap Icons

1170 Grid
A template slide with a 1170px Bootstrap grid in the background.

1170 Grid

940 Grid
A template slide with a 940px Bootstrap grid in the background.

940 Grid

724 Grid
A template slide with a 724px Bootstrap grid in the background.

724 Grid

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:

  1. Add a button shape to the slide and select it.
  2. Go to the “Insert” ribbon and click on “Action”.
  3. Select “Hyperlink to:” and choose the slide to jump to when the button is clicked.

PowerPoint Action Settings

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:

  1. Add a button shape to the slide.
  2. Add a drop-down menu shape to the slide and select it.
  3. Go to the “Animations” ribbon, click “Add Animation”, and choose “Appear”.
  4. 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.

Animation Trigger and Selection

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:

  1. Switch to the PowerMockup ribbon.
  2. Click the “Import Files” button.
  3. 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:

PowerMockup

I hope you enjoy it. Happy Wireframing!

[freebiesub download=”http://cdn.onextrapixel.com/wp-content/uploads/2013/06/bootstrap-wireframing-set.zip”]

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.