Slashdot Mirror

← Back to Stories (view on slashdot.org)

Making Website Mock-Ups in Linux?

Posted by ryuzaki0 on from the web-site-storyboards dept.

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?"

2 of 88 comments (clear)

  1. One place I worked... by blueZ3 · · Score: 3, Interesting

    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
  2. Inkscape works great by mattnuzum · · Score: 3, Interesting

    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)