Rapid Prototyping with Middleman and Bootstrap

Early this year, I was on a project that required prototyping various ideas that were being gathered during the user research phase. I needed a tech stack that allowed me to quickly build and test ideas in the browser. I needed something quicker and more robust than HTML and CSS, but not something as heavy as Rails.

I chose Middleman and Bootstrap. Here’s why.

Middleman allowed me to:

  • Quickly generate a static Web site using my preferred markup, HAML and LESS.
  • Easily deploy to Heroku.
  • Quickly repeat blocks of content without duplicating markup.
  • Save and refresh development – nearly live preview.

Bootstrap allowed me to:

  1. Delegate underlying design decisions such as grid and typography.
  2. Leverage an existing UI library.
  3. Work in a documented frontend framework.
  4. Quickly consider screen size constraints.

Between these two workhorses, I was able to work independently from developers, which drastically decreased turn around time.

As a designer, I think it’s important to be able to prototype in the browser. Paper prototypes are great for a high level of understanding, but they can’t inform you on how a user interacts with a screen, mouse, or touch interface.

What do you use for prototyping?

  • Fraser says:

    I’ve been working with these tools together for a while now. They are perfect for testing out ideas, working on the UI flow and selling your ideas to the rest of the team.

    A clickable prototype speaks 10,000 words :).

  • Comments are closed.