Twitter Bootstrap GUI & Wireframe Toolbox

Not since Blueprint or the 960.gs has a front-end framework hit the popularity heights that Twitter Bootstrap is currently enjoying. And rightly so. It is perhaps the most complete framework available ever. With its clear and concise documentation, all of its common UI elements, its 12-column responsive grid and all of the optional Javascript components it offers, Bootstrap is the perfect tool for rapidly kick-starting any web project.

Having said all that, you do need to know your way around code to truly enjoy the power that Bootstrap offers. So, what if you are a designer that doesn’t know how to code and your developer does want to use Bootstrap? We have the solution for you.

In this post we have collected a selection of GUI and wireframe templates that have all been designed for when you are working with Bootstrap, making it very easy to pass your designs on to the developer. They are all in various formats (psd, ai, png…) and available for all popular applications like Photoshop, Fireworks, Illustrator and Omnigraffle.
Here they are:

Bootstrap v2.0 GUI (.psd)

Bootstrap v2.0 GUI GUI Resources

From RepixDesign, this vector based Bootstrap GUI PSD includes all of Bootstraps base elements layered in Photoshop for typography, buttons, grids, navigation, and more.

Bootstrap v2.0 GUI →View Full Preview →

Twitter Bootstrap 2.0 (.psd)

Twitter Bootstrap 2.0 GUI Resources

This GUI template, from Bent Design Studio, includes all of Bootstrap v2.0s major components, including: The grid, tables, typography, forms, autocomplete, buttons, icons, alert messages, progress bars and much, much more.

Twitter Bootstrap 2.0 GUI →

Twitter Bootstrap v2 Template (.psd)

Twitter Bootstrap v2 Template GUI Resources

Twitter Bootstrap v2 Template →

Bootstrap Assets for Adobe Fireworks (.png)

Bootstrap Assets for Adobe Fireworks GUI Resources

Bootstrap Assets for Adobe Fireworks →View Full Preview →

Sparo – Free Web Elements based on Bootstrap (.psd)

Sparo - Free Web Elements based on Bootstrap GUI Resources

Sparo – Free Web Elements based on Bootstrap →

Twitter Bootstrap UI Mockup Templates for Keynote, PowerPoint and OpenOffice

Twitter Bootstrap UI Mockup Templates for Keynote, PowerPoint and OpenOffice GUI Resources

These vector UI components have been designed from scratch to work with Apple Keynote, Microsoft PowerPoint and OpenOffice Impress, and are fully editable and customizable without needing any additional design tools.

Bootstrap UI Mockup Templates for Keynote, PowerPoint and OpenOffice →

Twitter Bootstrap Widgets Library for Axure RP

Twitter Bootstrap Widgets Library for Axure RP GUI Resources

Twitter Bootstrap Widgets Library for Axure RP →

Twitter Bootstrap UI for Omnigraffle

Twitter Bootstrap UI for Omnigraffle GUI Resources

This is a basic set (not a complete set) of Bootstrap UI components to use when wireframing applications using Omnigraffle.

Twitter Bootstrap UI for Omnigraffle →

Twitter Bootstrap 1.4 Assets & Grid for Omnigraffle

Twitter Bootstrap 1.4 Assets & Grid for Omnigraffle GUI Resources

This UI kit is based on the Bootstrap CSS Toolkit 1.4, providing a 940px grid for laying out your mockups and includes the design and layout assets.

Twitter Bootstrap 1.4 Assets & Grid for Omnigraffle →

Bootstrap Grid System for Adobe Fireworks (.png)

Bootstrap Grid System for Adobe Fireworks GUI Resources

This Bootstrap Grid System is based on its 1170px responsive grid and comes with 3, 4, 6 and 12 columns options.

Bootstrap Grid System for Adobe Fireworks →

Bootstrap Scaffolding Grid Templates (.ai & .psd)

Bootstrap Scaffolding Grid Templates GUI Resources

Here is a set of templates, in both Photoshop and Illustrator formats, that are based on Bootstraps default responsive grids. You can use these grids to set out the guides before you start designing.

Bootstrap Scaffolding Grid Templates →

Bootstrap Grid Pack (.psd)

Bootstrap Grid Pack GUI Resources

This Photoshop grid pack, from Jared Erickson, includes a mobile template (300px one column), tablet template (724px 12 columns), desktop template (940px 12 columns) and a large screen template (1170px 12 column). These grid templates accommodate both Bootstrap and Foundation from ZURB.

Bootstrap Grid Pack →

Bootstrap Responsive Grid Photoshop Templates (.psd)

Bootstrap Responsive Grid Photoshop Templates GUI Resources

This download package includes three Photoshop .psd files, with each .psd layer containing the Bootstrap 2.0 table of screen/grid sizes, a layer of columns in red, and vertical grid lines at column edges. Each file is 1200px wide with the grid in the middle.

Bootstrap Responsive Grid Photoshop Templates →

Bootstrap Illustrator Template (.ai)

Bootstrap Illustrator Template GUI Resources

This Illustrator grid layout is based on the default 12 column grid released in the 2.0 version of Bootstrap.

Bootstrap Illustrator Template →

Bootstrap Grid Layout for Balsamiq Mockups

Bootstrap Grid Layout for Balsamiq Mockups GUI Resources

This is a set of grid layouts using the Bootstrap framework's default responsive grid. The different layouts correspond to min-width and max-width media queries for different viewport dimensions.

Bootstrap Grid Layout for Balsamiq Mockups →

Free Printable Twitter Bootstrap Wireframe Template (.pdf)

Free Printable Twitter Bootstrap Wireframe Template GUI Resources

Printable Twitter Bootstrap Wireframe Template →

Author: (588 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments