Quick and Easy Interactive Wireframes with Bootstrap

Replace static wireframes with interactives in Bootstrap

Web design is an evolving profession. While a keen eye for color, typography, and layout will always be important, these skills are being trumped by a need to understand user motivations. Just as movies depend on quick cuts, lighting, and mood to draw users in, websites rely on transitions, interactivity, and timing. These details often get lost during the design phase— or worse, are never accounted for. Trevor Pierce will show you how Bootstrap can replace static wireframes and bring these details to the forefront earlier and with less effort.

 

The first step is to download the latest stable Bootstrap and jQuery builds. Though jQuery is hosted by a number of CDNs, Trevor Pierce prefers to include all files locally so he can work with or without web access. Go ahead and set up a directory structure like the one above, and copy the unminified Bootstrap CSS, Bootstrap Responsive CSS, and Javascript files. Tweak names and locations as needed, but using this structure means you can also leverage his HTML template in the next step. Now would be a good time to create a third stylesheet, which he will call user.css. This file will be used to override Bootstrap styles as needed.

Comments

Be the first to write a comment

You must me logged in to write a comment.