Three reasons why wireframing tools suck. - Colm Tuite

As I progress in projects, I sometimes forget the struggles I had at the beginning of the project. Designing user flows, redesigning user flows, redesigning redesigned user flows. After a while, I settle in and things get easier. Until of course, the next project comes along. All of a sudden, I'm reminded again of how there are no decent wireframing tools available.

None.

I've tried most of them and they all seem to get one thing completely wrong. That is, that the wireframing tools are not the interface, they are helping me design the interface. They should be there when I need them and gone when I don't.

I don't want my wireframing tools to look like this....

or this....

or this....

I want them to look like this....

.....exactly like my browser window.

Most wireframing apps make an attempt at this by allowing you to hide some controls but most of them insist on having some fixed elements like header bars or footer bars which just get in my way. When I'm drawing, the screen should look just like my browser. When I focus an element, the tools relating to that element should appear. When I blur, the tools should hide. Simple.

Playing with drop shadows, gradients and pre-designed sign up forms might be fun for a complete beginner but when you're a serious designer trying to design complex user flows, these toys just get in your way. All I want to do is draw some rectangles and write some text. Maybe the ability to import images. That's it.

Basic effects like flat background colors and borders would be useful but nothing too fancy. I can do most of my visual design in the browser while I'm coding the site. The point of designing wireframes is to design user flows. Not to obsess over color schemes, fonts or how shiny your buttons should be. I just want some boxes and some text, nothing more.

One of the main problems with wireframing on paper is that those designs are fixed width and in order for me to figure out how an interaction might work on desktop compared to mobile, I would have to get more paper and draw a whole new layout. Wireframing apps can fix this problem.

Any box that I draw should be fluid, unless I specify a fixed width. I should easily be able to set up a base font size and fluid typography structure with breakpoints, so font-sizing and leading scales automatically. I should easily be able to set breakpoints so layouts adapt to window size.

Ok, I know I said three reasons, but these tools really bug me. Another big problem with wireframing on paper is that it's difficult to keep multiple iterations of the same design and swap between them quickly. Wireframing apps could solve this problem too. People working in teams could comment on each iteration and vote for their favorite.

When I'm working on a project for a client, sometimes it can get messy trying to explain how the site might perform or look on mobile compared to desktop. At the moment, I use Illustrator or Photoshop to design visual mockups of multiple designs, one for each device breakpoint. A responsive wireframing app with version control would make this process a lot faster. When you're happy with your designs, just choose which ones you want and click export, then send them off to the client. Simple.

I've talked to some people who are happy with wireframing apps currently available, then some people like myself, design using a combination of paper and directly in the browser. I would like to minimize the time I spend both on paper and in the browser. I'm interested to hear your opinons.