Slashdot Mirror
Making Website Mock-Ups in Linux?
The Ubiquitous Web Designer asks: "I am trying to design a rather complex web page and am wondering if there are any tools which will allow me to make non-functioning mock-ups of each page so that a programmer can work from them. Obviously, it's hard to use the GIMP to make radio buttons, check-boxes, data entry fields, and so on. Can something help me design a page without much knowledge of HTML, or am I better off just doing it with paper and pencil by hand?"
In short, no.
You can technically find a tool that will let you place checkboxes + radio buttons, etc pretty easily, but you'll find that the visual design of those elements are what require the HTML and CSS skills. You're better off just drawing them how you want them to look and letting the HTMK/CSS gurus actually do all the coding, otherwise all the work you do making them look how you want will have to be redone anyway in code.
1. Rough sketch on paper
2. Draw the complete layout in Inkscape
3. Export elements into the Gimp for final touch up and optimization
4. Link to images in stylesheet
Inkscape is an excellent tool becuase you can scale you're elements as much as you like without losing quality.
If you're just making a non-functioning mockup, who cares how lousy the code is? I agree completely if you're talking about production source, writing it by hand is the *only* way to go. But if you're just trying to put together visual mockups, and your alternatives are GIMP or pencil and paper, then clearly it doesn't matter what shape the source is in.
[Z?]
His point was that you use the WYSIWYG editor to create the initial mockup, see how it looks and feels, and then code it from hand - you throw out the WYSIWYG editors code entirely, all you are after is the visual 'OK' before starting the actual coding yourself.
Personally, I *always* mockup in Fireworks prior to doing anything. Get the look and feel of the site perfect, then handcode the html. Its significantly easier to move around something in a graphics package or WYSIWYG editor than it is in handcoded html, especially if you are doing it a dozen times an hour.
Seconded. HTML mockups, whether hand-coded or bastardised together in something like Dreamweaver, are too much like hard work. I've also found that if you email them, or put them up on a site for users to look at, people forget that these are mockups and bitch about the things that don't work yet. As long as whatever you use is obviously not a web page, and a programmer can make sense of it, it doesn't matter what you choose.
I would say paper prototype, and use the chance to get some user feedback before you've poured heart and soul into a full-blown mock-up (or, worse, application). You'll probably find it easier to accept when these crude user tests show up problems - once you've got too much emotional investment in your design, it's far harder not to come up with reasons not to change it.
Of course, some people won't believe in paper prototypes. (I have one or two of those around here.) The compromise that works best here is to use - ick - PowerPoint. You might want to use whatever the OpenOffice equivalent is. As long as whatever you use is obviously not a web page, and a programmer can make sense of it, it probably doesn't matter what you choose.
Paper-making is not a closed source process. You won't be betraying the ideals of the open source movement if you pick up a pen or pencil and just start doodling.
You can probably do a couple iterations on your design in the time it takes you to install and boot up any software package. Hand the best one to the programmer, or scan it and e-mail it to her.
egypt urnash minimal art.
I was just about to say the same thing. Inkscape (or any vector editing software) is perfect for this sort of thing. You won't draw perfect radio buttons per se, but draw circles with as much or as little similarity to radio buttons as you want. This is what I do for all of my sites after I've created an initial idea.
My Method:
1) Paper and Pen
2) Inkscape / Vector editor
3) HTML
-dave
http://millionnumbers.com/ - own the number of your dreams