Effective responsive wireframing
I wonder if Axure, Visio, Omnigraffle or Fireworks are the best tools for this job. It's possible to make multiple designs of the same screen, but can it be done quicker?
I hear some IxD are using Twitter Bootstrap to create responsive prototypes, but maybe there is a better alternative. A library made for wireframing?
bq. Wirefy is a responsive wireframe framework for rapidly experimenting with layouts to create the best user experience and test functional features.
Nice, but can I use it?
That is where this post comes in, I'm writing this as I try to figure it out.
I started by cloning the git repository form github, but you can also download it. When the files are on your computer, you can open the index.html in your browser. Now, try to resize your browser, and see it change.
Before I use Wirefy on an actual project, I tried to create a wireframe for a simple site I've made in the past, a main image with 4 columns beneath. I expected it to take seconds, but it took a little longer.
Here are some pros and cons I noticed while using Wirefy.
- You only have to define your content once, it's responsive out of the box.
- It's designed for use on multiple devices.
- Using HTML elements are retina proof, except for images, it will look great on the iPad3.
- It uses some nice opensource solutions.
- Opening the "index.html" file can be frightning, it really needs to go on a diet.
- The Documentation is not satisfactory, you need to know your HTML and CSS. Also be prepared to dig for answers.
- The slider in the example breaks when adding more elements, not all elements work out-of-the-box.
- It has no option for adding notes, maybe in a future version.
Wirefy is a great idea, but I think it's not finished. It's too complicated, the documentation isn't finished and the basic elements don't work out-of-the-box.
I hope the people behind keep improving the framework. The field is changing, so must our tools.