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?"
On one project I worked on, we did a user interface JAD session that consisted largely of hand-drawn diagrams. When the users made a suggestion, we stuck a Post-It note over the part of the page that needed to be changed and drew in the suggested change. Incredibly fast turnaround, and we weren't restricted to whatever we could render in HTML. After the session, we went back and coded up some mock pages in HTML and curculated those as an appendix to the meeting minutes so the users could comment on what the "real" interface would look like. It's not too hard to write up some JavaScript to wire a few dozen pages together to produce a prototype that exhibits a lot of the behavior of the proposed system.
Just junk food for thought...
I'll chime in with another vote for inkscape. Takes some getting used to (basically think gimp for vector images), but is very good for this sort of thing.
Warhammer forums
Had a design template in Photoshop that contained all the graphics for buttons, checkboxes, text fields, etc. The designers just grabbed elements from the template and used them to mock up their design. I don't see any reason you couldn't do the same thing using the GIMP.
You should be able to grab screenshots of the elements you want out of Firefox and then reuse them in your layout. The only "hard" part is that for objects that have variable sizes, you have to grab the right and left sides and the middle as separate elements. Then for a "wide" button you stretch the middle portion to the correct width for your text and then place the right and left elements on the sides.
This may sound like too much work to you, but keep in mind that once you have captured all the parts you need, you can reuse them on future projects of a similar sort.
Interested in a Flash-based MAME front end? Visit mame.danzbb.com
Inkscape is a great tool. I recently revised the www.bazaar-vcs.org website. My SVG mock-up is here: http://people.ubuntu.com/~mnuzum/projects/bzr/BZR% 20Concept2006-07-26-1.svg (open it in inkscape for the real effect).
I plan on documenting this process soon, because I know a lot of people ask about it, but here's what I do:
* Get the newest version of inkscape that you can, they really are adding excellent new features with each release
* Open a new doc and assuming 1024x768 target browser size set the document to 1000x600 px. For 800x600 go for 760x600px
* Use the layers tool in Inkscape to separate portions of the document
* Create a layer on the very top called "slices" and in this layer, create rectangles that are 10% opaqe or so that cover individual elements that will become images in the final product. This layer will usually be hidden.
* Periodically save your document out as png... remember, most people have a screen res of *96 dpi* not 72.
* When you want to save individual components, for example the logo in the example above, show your "slices" layer, click the square that covers your logo so that it's selected, then hide the slices layer. The square will be selected but hidden. When you choose export, it will export just the visible portion of the image you have selected.
I'm happy to give more details, I'm newz2000 on irc.freenode. I don't have a lot of time to chat, but ping me and I'll help out if I can.
Once we get guasian blur in inkscape I'll probably stop using photoshop. (Yes, I run photoshop in Linux - using crossover office)
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.
On my current project, we had an interface developer create an HTML "demonstrator" - essentially, a non-functioning HTML mockup of the site. You could click through a single, typical use case, and it showed you how things would look.
The client loved it - it really gave them a feel for how it would look, how it would work, etc. It also gave them a powerful tool to get buy-in from their sponsors and other stakeholders, who had been somewhat sceptical at first.
However, it was a lot of work. Also, some people did expect rather too much of it, expecting some dynamic stuff (such as sorting of search results) to work. Yes, we could have mocked it up, but the amount of work involved would quickly have become unmanagable. One particular person on the client team was also an absolute stickler for realism of the data, yet refused to provide representative samples (real data couldn't be used, as it's classified); this burnt more time than was necessary.
On the other hand, when it came time to actually build the site, the HTML was already done. All that remained was to tidy it up a bit, slice it up into templates and integrate it with the code.
All in all, it was a useful exercise both for us and for the client, but it was also a time consuming and at times painful one. It's definitely not something I'd recommend for every project.
It's official. Most of you are morons.
...Xara Xtreme. Yes I'm biased. I used Xara 1.5 to create production quality graphics for a magazine nearly ten years ago and I still haven't come across an illustration program that was as fast or as easy to use until I grabbed the latest build of Xtreme. See here for the Web-specific features. Ignore the Windows-only requirements menu - there's a very stable Linux build in the Downloads section.
For a nice quick design prototype, I'd love to hear if there's anything better.
--- Hot Shot City is particularly good.