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.
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 pageslug
- conditionals to control ‘active’ nav statessection
— conditionals to control ‘active’ nav states and sidebar navigationlayout
— 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.
Leave Your Comments
blog comments powered by Disqus