My Amish neighbors are known for their ability to raise a barn in one day often with simple tools. Likewise, with simple, free tools we can quickly achieve responsive and flexible wireframes/prototypes suitable for this modern responsive web design world we live in.

There are many tools out there to create wireframes. Some are SAAS hosted, some are desktop based software. But there is no need for you to pay for software. Jade and Zurb Foundation are free, and if you have CodeKit, you have an easy way to construct your RWD wireframe.

• Demo
• Download

How it all works

By using the templating engine Jade to create our HTML files, we have useful functions including mixin, extend, block, include and features such as variables and conditionals. These allow us to utilize the DRY “template partials” approach to create our wireframe. We’ll make one wrapper layout template that has empty blocks in it and then we’ll fill them using extend with content from blocks on our pages.

Anatomy of a layout template

• Add markup to the layout template that is repeated throughout the wireframe — the head, header, footer, nav and sidebars.
• Load as many offsite resources as possible to keep our wireframe codebase lean. jQuery, Foundation JS and Font Awesome icons are all hosted on CDNs so let‘s use them.
• Create several block regions in the layout template for page content to populate. That way when you’re building pages, you’ll have flexibility.
• At the top of the layout template, add some global variables and that will be overridden by the pages’ variables.

- var site_url = 'https://s3.amazonaws.com/creative_loupe/website/demos/wireframing'
- var site_name = 'Wireframe Inc'
- var layout = ''
- var section = ''
- var sidebar_content = ''

block vars

Here is the final layout template file.

Creating pages

Now that we have our master layout file, let’s fill up those layout template blocks with page content.

Let’s look at the press page as an example. At the top of the press page are the page variables.

block vars
  - var page_name='Press'
  - var slug='press'
  - var section='about'
  - var layout='left-sidebar'

extends ../../layout

When CodeKit renders the press page the extends layout will override the variables in the layout.jade file with the page‘s block vars. I use these variables to control…

• page_name - name of the page
• slug - conditionals to control ‘active’ nav states
• section — conditionals to control ‘active’ nav states and sidebar navigation
• layout — hooks for CSS to show or hide a sidebar

After you fill out the variables, load up your content into the block content. First, create two of press articles using a mixin.

mixin articles
  article
    .row
      .large-3.columns
        br
        a.th(href="press-single.html")
          img(src="http://placehold.it/200x200&text=[img]")
      .large-9.columns
        a(href="press-single.html")
          h2.article-title Article Title Lorim Ipsum
        p posted by: Author's name on August 8, 2011
        p Lorim ipsum excerpt donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor.
        p.text-right
          a.button.small(href="press-single.html") Read more
  hr
  article
    .row
      .large-12.columns
        a(href="press-single.html")
          h2.article-title Sem Lorem Pellentesque Quam
        p posted by: Author's name on August 8, 2011
        p Lorim ipsum excerpt onec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.
        p.text-right
          a.button.small(href="press-single.html") Read more
  hr

Next, copy and paste that mixin in the block content several times like so.

block content
  h1.page-title #{page_name}
  mixin articles
  mixin articles
  mixin articles

Here is the final press page code.

Lather, rinse, repeat for the rest of the pages, and in short order you’ll have a completed wireframe. For simplicity, I like to host my wireframes in my “public” dropbox or Amazon S3 folder for clients to view.

Some more wireframing tips

• Make use of placeholder image services like placehold.it or placekitten.com
• Create some partials to hold placeholder content like link lists and lorim ipsum content
• Wireframing is an important part of the process to finalize the content strategy. Be explicit when placing form or content fields. At this stage of the process client changes can be easily accomodated.
• Add developer notes to the wireframe to remind you of functionality requested.

<p class="dev-notes">Content slider with maximum of 3 slides</p>

• If you are using Panic code editor Coda, you can hide your html files to keep your directory nice and clean.

What are your favorite wireframing tools? Any tricks that you care to share? Leave a comment.