Whats your favorite tool for creating a wireframe interface sketch?
10 comments
Denim rocks. Paper & pencil rule, but Denim makes it easy to get a working mock-up up and running.
After drawing out the pages, you can create active links among them, and export the site to HTML. Denim creates pages that have nothing more than image maps, with hot spots for linking and navigating around the site.
This is something you can run in browser and put in front of clients to verify general behavior and layout.
Plus I like how you can zoom in and out to see a site map or a single page or some detail in a form on page.
Note: Denim works best with a drawing tablet, such as what Wacom sells. But a mouse will work as well; the gestures, though, may be harder to execute.
After drawing out the pages, you can create active links among them, and export the site to HTML. Denim creates pages that have nothing more than image maps, with hot spots for linking and navigating around the site.
This is something you can run in browser and put in front of clients to verify general behavior and layout.
Plus I like how you can zoom in and out to see a site map or a single page or some detail in a form on page.
Note: Denim works best with a drawing tablet, such as what Wacom sells. But a mouse will work as well; the gestures, though, may be harder to execute.
I use InkScape for wireframes. It saves everything as SVG so the files are easy to send to people I'm collaborating with, and they can open in Illustrator if that's what they're using.
http://inkscape.org
http://inkscape.org
Sweet, thanks for the tip. I just installed inkscape and it looks awesome. I have been looking for a good drawing tool for linux, this might be it. Can't believe I never heard of it before!
OmniGraffle http://www.omnigroup.com/applications/omnigraffle/ + free web templates from here: http://graffletopia.com/
It's an excellent way to get stuff done. OG and templates have saved us a ton of production time and wireframes that we creted were very clean and most importantly, they were clear and anyone who looked at them would know how stuff worked and how things were connected. OG allows you to add the right amount of detail without wasting a ton of time on minutia that creeps up if you use PS.
It's an excellent way to get stuff done. OG and templates have saved us a ton of production time and wireframes that we creted were very clean and most importantly, they were clear and anyone who looked at them would know how stuff worked and how things were connected. OG allows you to add the right amount of detail without wasting a ton of time on minutia that creeps up if you use PS.
Before I design a web interface, I usually like to sketch it out to organize my ideas. I'm still using good-old graph paper and a mechanical pencil, then will often scan my sketches to post on our internal wiki. Are there better tools out there that would maybe allow for sharing & collaboration?
I don't wireframe. I get an ugly-but-working real interface working and wait for people to complain.
Pencil and paper
+1. Anything will do, but a pigma Micron pen and a stack of 11x17 paper are optimal. The paper gives you enough room to draw several ideas on a page but fits on a desk or table. The pen makes a clean, fine line that approximates 1px black on a screen, but lets you scribble quickly.
Pencil and paper to rough out ideas and proportions, and then HTML and CSS.
Here is a related post: http://news.ycombinator.com/comments?id=11777
Voodoopad. It's a sort of like a text editor, but it's a wiki.
photoshop
Personally (and I'm more of developer than a designer), I'm with wammin, pencil paper or many white board sessions are where I start for the first few dozen iterations. The last thing I want is yet another tool to get in my way, providing more complexity than value. Once things settle down, or if you have to work with off-site people, electronic versions make a lot of sense.