Ask Hacker Newsies: What tool(s) do you use to "wireframe" your UI?

1 point·vegashacker··7 comments

Any good tools out there for creating wireframe prototypes of web apps? With just HTML, trying different layouts of UIs is pretty slow-going.

View on HN

Sharpie and Paper.

Its quick and it helps you to focus on the bigger picture and not the details see: http://gettingreal.37signals.com/ch09_Interface_First.php

especially this part: The Orange Pen That Started Blinksale

The thing Sharpie has over pencil/pen is that it makes FAT lines. Just makes rough sketches feel better. You can get about the same thing with a whiteboard, as well.

The reason fat lines feel better in a sketch is that you're not forced to overcommit about the precision you want. Another alternative (often used by architects) is to make thin lines but deliberately make them wobbly.

Sketch and storyboard artists for film and animation often use sharpies for this same reason. You want to convey an idea first - people often zoom in on the finest detail in a drawing or design, and using inexact lines makes the design itself the thing you focus on.

Pencil & paper, or occasionally pen & napkin.

At work we had a dedicated UI designer, and he'd occasionally use Macromedia Fireworks for UI mockups. But that was primarily because our boss wanted professional-looking mockups to show to prospective customers. For communicating and iterating on ideas, I've yet to find anything that matches the productivity of paper. There were times where a week's worth of Fireworks mockups and meetings were resolved in about an hour when I brought a stack of paper into the designer's cube, took 5 minutes to sketch out a couple screens, and had him iterate from there.

As others have said, pen and paper... I happen to like colour so sometimes I use coloured pencils but it's really not required.

Check out omnigraffle (mac only).

Reply on news.ycombinator.com