I’ve been working on the layout for CuencaTravel.com. Turns out there’s too much to fit on the front page.
I’ve been struggling with a graphical tool for wireframing. The trial version of SmartDraw was a huge disappointment. Inkscape is awkward, primitive, and just ugly. Gimp can’t draw boxes, and is terrible at lining up text. Axure is practically a web development tool. I decided to try what’s supposedly the most popular – Fireworks.
It’s crap. I’d have been happier with Gimp, I think, if only it knew what a four-sided polygon is. It seems the only use of fireworks is to draw lines across the page from the corners of an image — but don’t try to layout your images in Fireworks – make sure they’re already trimmed. And if you want to actually view what you’re making, you need to open the PNG in another editor. It has practically no support to text, other than the Adobe collection of fonts. There seems to be no grid to snap to, but it still tries all the time with some bizarre fuzzy logic so boxes need to be deleted if Fireworks gets it into it’s head that the box for column A should be slightly higher than for that for column B. Selection is a buggy nightmare. If you try to select one box it will mysteriously add additional text or image sections to the selection. You cant copy an area (like say a button) and paste it without a lot of trial and error. And beware that something off screen wasn’t randomly selected and copied.
I can’t believe this is the state of the art in graphic design. I should have downloaded Paint Shop Pro. I wish I still had my PSP disk from 1997, that would have done a decent job. While it may not have had as many features as Photoshop, it’s still a better and easier to use graphical tool. Too bad there are no more page layout programs. What ever happened to FrameMaker? Or what was Adobe’s cheap web design tool back around 2000? That was better, though not really good for wireframing. I should have probably just fired up an HTML editor and played around with some tables. Only that doesn’t usually print well.
Okay, with a bit of reading, I was able to find out a bit more about Fireworks. It does have a grid, though snapping to the grid or using guidelines is still a bit of a mystery.
Selection is still a nightmare. I wish I could create an object. For instance: a label, one box (simulating an input) and another box (simulating a button.) And then reuse it to mock up a form. I’m surprised there aren’t compext template objects for things like input areas and buttons. I’m also surprised that there isn’t a better crop tool. Or that resizing isn’t easier.
Selection is the key, where it falls down. There should be working group select and the ability to shift click multiple items like you can in a file explorer. That way you can drag around several things. The answer fireworks pros probably propose is to use multiple layers, but sometimes you don’t know that say a banner and a form are going to want to be moved at the same time, while your main columns stay put.
Which brings me to the next thing. You should be able to have frames, and treat them as layers, so that you can group, say, an article, an image, and a caption, and then resize the frame. Textareas wrapping around image areas would be nice too.
On another note, more exploring with inkscape has made me almost like it. I think it’s better than Fireworks in that it’s default area alignment is more correct. And it’s group select is better. Once I got the hang of coloring (and transparenting) blocks, I like that better than fireworks too.
One thing I don’t like about inkscape is the difficulty with resizing. It tends to want to expand instead of reside so you’ve got to be a bit picky about selection mode. But I do like how easy corner rounding is, though it’s tough to round consistently without watching pixels. I’m surprised I couldn’t find a way to make rounded corner boxes on Fireworks.
By: fijiaaron on February 8, 2008
at 12:30 pm
This article might address your grouping problem – you can use the Symbols functionality: http://www.stuffandnonsense.co.uk/archives/work_smarter_with_fireworks_symbols.html
By: nae on February 21, 2008
at 5:13 am
what is the tool of wireframing with inkscape?]
thinks gays
By: yassine on March 3, 2009
at 8:01 am