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

Comments

Nvu

[Sodki]

Try Nvu, it's good enough.

Re:Nvu

[DittoBox]

No it's not. WYSIWIG editors are horrible, and produce nasty, unmanigable code that in the end will cause more headaches and time trying to fix it than it would have had you you written it by hand. Learning XHTML/CSS is a must and it's not that complicated.

Re:Nvu

[Tremor (APi)]

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.

Re:Nvu

[Richard_at_work]

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.

Re:Nvu

[aonaran]

He did say he wanted to create a non-functioning mockup.
This is normally done in Photoshop. for some reason he's finding it hard to do radio buttons in GIMP (which I really don't understand) but he could concieveably do a mockup in NVU, but it'd be hard and he'd never get it to look as nice as if he used a graphics proram. I still think GIMP would be a better mockup program, but the point of my post is that the kind of code NVU creates is irrelevent for this purpose, as it is never going to be used/looked at. he's just making a screenshot of a non-existant website so the programmer has an idea of what this guy is talking about. Designers do this all the time in ways that have nothing at all to do with HTML.

Re:Nvu

[Anonymous Coward]

I use the Composer that comes as part of the Mozilla suite. But then I'm not into fancy bandwidth-wasting Web pages.
And buttons, while real, can be quite nonfunctional if you don't specify what function a button-click will call.
Until you are ready to write that code, of course.

Re:Nvu

[hey!]

Actually, if you're talking about programmers, they shouldn't be mucking around with the appearance of the web page. What you really want to do is give some idea of the content of the page and how it is supposed to work and fit. Then designers skin the page using CSS.

So, what you need is someting that lets a non-techincal person do simple layout, but maybe link things like buttons. In the day, HyperCard would have done the trick. Maybe Open Office's presenter? I've never used it myself. In any case if you can create a slide show, you can "lay out" the pages, and create links etc., then take the whole thing for a spin with realy clicky buttons and linky links.

Re:Nvu

[Anonymous Coward]

You obviously haven't used a WYSIWYG in about ten years.

I'm using Dreamweaver to write ASP and PHP pages and I have no problem with improper tag sets, unclosed tags, weird placement of things, and it never clobbers my work unless I hit the ol' delete key and tell it to. The worst that ever happens is that when the page source comes out in the browser, sometimes their are bad indents that can cause some (very) brief confusion, and that's always because of the way I indented things while jumping in and out of PHP/ASP blocks.

Of course, this is Windows. The nice thing about Windows is that it has tools available to it so you don't have to constantly excuse crapplications with "It's good enough".

Of course, on the flipside, I believe Dreamweaver runs in Crossover Office.

Re:Nvu

[Richard_at_work]

You are assuming the luxury of being able to break down the job roles in such a manner, unfortunately its something the vast majority of small to mid level businesses simply cant afford to do.

Re:Nvu

[theshowmecanuck]

Read the original poster's entry!

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

From the OP's post, they obviously have the luxury of breaking down the job roles... Also if you read, the OP wanted something that would work in Linux. Macromedia products work on windows. If you are a developer, learn to read the specifications (The post's title is: Making Website Mock-Ups in Linux?). :-/

Re:Nvu

[WebCrapper]

Its odd, I've been looking over editors for Linux over the last couple of weeks.

I can agree with Dreamweaver, I personally like it. I've only had a few cases where it messed with my code but its not like FrontPage where it forces you to do what it wants - we've all done REALLY stupid things in our past... Now, Fireworks tosses code right out the door and creates a jumbled mess. Unfortunately, Dreamweaver really doesn't function on Linux very well...

I've used Nvu a little, didn't like it too much before, but it looks like its changed enough for me to try it again.

Bluefish tends to crash every once in awhile for me but is otherwise pretty decent. The main thing that I don't like, other than crashes, is that Bluefish doesn't offer an option to FTP to inside the program.

Now, I started a trial of phpED a few days ago and while I like a lot of the built in features its got a lot of problems. A small list is (again, Linux version):

Cutting & Pasting Problems (doesn't view clipboard after opening)
GUI can be a pain to wonder around in. Sometimes there is no rhyme or reason for certain features.
Won't exit properly after its been open for several hours - you have to kill the damn thing with -9.

In researching editors for Linux over the last few days, I've seen a fair share of complaints about Zend Studio as well. So many, in fact, that I'm not really inclined to try it.

Re:Nvu

[ryen]

what part of m o c k u p did you not understand?

Re:Nvu

[DittoBox]

I start like this: Pen/Pencil -> Image Mockup in Photoshop -> XHTML/CSS mockup with real structure. The last step is the dove tail into the real thing. It gives me the basic starting point and gives the client a chance to see the real deal and interact with the page elements before I plug it into a back end or start replacing bits of it with server side scripting. I don't start with an xhtml page, I start on pape then move into. I probably did communicate that well in my first post.

At any rate this means I can plan out the semantic structure, and how I'm going to marry this with the CSS and design side of it. I just thought that using NVU or another WYSIWYG editor to do an XHTML mockup wasn't a good idea, especially if you're going to rewrite it by hand later. By writing it all by hand to start with most of the "code" and graphics can recycled for later use.

The problem with WYSIWYG editors is that they rarely can give you exactly what you want. I wasn't worried about code soup or ugly code, I was worried that using NVU would produce oddities in a document that can take any professionalism out of it. They can introduce spaces by creating extra line breaks, by not setting margins and padding properly, they generally are only built with a certain browser in mind (though not NVU I suppose) and generally use tags that have odd defaults in some browsers. If you copy and paste text from other programs they introduce the formatting from that application, often poorly (EG they don't just copy the ASCII text). Deleting the text in the WYSIWYG editor most often only deletes the text and not the tags or CSS, which will cause all sorts of strange text problems, spacing, lines and other garbage that can't be easily fixed. A lot of WYSIWYG editors will even introduce plenty of proprietary tags and other rubbish which might not be treated friendly by your browser(s).

The mockup stage is important to the customer/client. If it's not right and isn't professional they'll go elsewhere. In effect it does matter what shape the source is in if the source effects the visual elements in a negative way.

Re:Nvu

[hey!]

Even if you don't have the luxury of breaking down the jobs by postion, you can certainly separate them in your head. The reasons this is good practice don't change.

Re:Nvu

[6Yankee]

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

This is wonderful, and allows you to get the best of both worlds. However, in practice I've found that having an HTML document, any HTML document, tells your PHB that the HTML is "done". I remember being handed a bit of HTML (for a form that was maybe 200x300px) straight out of Dreamweaver and told to JSPify it. Six levels of nested tables, and a printout that ran the length of my desk and down to the floor. "But Dreamweaver's done all the hard work for you, just drop the JSP tags in..."

One more reason not to have HTML mockups and go for paper prototyping instead.

Re:Nvu

[TheOtherChimeraTwin]

I have to disagree. The best way to create a non-functioning web page is to use Frontpage which is only available on Microsoft Windows.

Not much out there

[Se7enLC]

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.

just the thing

[greenguy]

Inkscape is perfect for this sort of thing. I've used it many times.

Re:just the thing

[legoburner]

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.

Re:just the thing

[MankyD]

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

Re:just the thing

[SpectreHiro]

I agree with the parent. Vector is by far the easiest way to produce mockups, and Inkscape is an excellent program. However, I'd also like to throw in a recommendation for Xara Xtreme which got slashdotted a couple days back. I'm quickly falling in love with it. I initially started using it because I couldn't get the newest release of Inkscape to run... Now, I don't think I'll be going back.

I think

[GavrocheLeGnou]

I think that you should really design everything on paper, then scan the paper, and upload it on the web ! and ... voilà !

Paper Prototype instead

[kognate]

Please do not do what you've asked about doing. Instead, pick up a copy of Paper Prototyping at http://www.paperprototyping.com/ then read it, and then you will save yourself a huge amount of time (much more than the time you take to understand the concept).

Your users will thank you.

Re:Paper Prototype instead

[6Yankee]

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.

Re:Paper Prototype instead

[Tim C]

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.

Re:Paper Prototype instead

[WebCrapper]

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.

Ha!, this is so damn true. I've all but stopped handing out mockups to people because of this. I even tried printing one out recently for the folks I work with and they still complained about certain things on it. "This info is wrong, it should be this...", "Why are you using this picture. You need to change it before we get in trouble from XXXX"...

Re:Paper Prototype instead

[nurb432]

"people forget that these are mockups".....

I cant tell you how many times ive sent mockup database form screenshots to people: "why cant i type" or another common oe "the buttons dont work, its broke" *sigh*

Paper and pencil

[Doctor Memory]

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.

Paper and pencil?

[DittoBox]

I use paper and pencil with a ruler to sketch a basic idea and layout. It gets scanned, I open it in Photoshop and start working. Without layer styles in GIMP you might be SOL...

If you do use gimp just download a GTK 2 theme based on the image or experience engine and pull out some transparent PNGs of the controls you need.

Sounds like a job for denim

[afd8856]

Java tool, optimized for tablets though. http://dub.washington.edu/projects/denim/

check out DENIM

[sweeze]

http://dub.washington.edu/denim/

It's like paper prototyping, but without the paper!

Sounds like Visual Basic

[BigNumber]

It sounds like you're looking for something that you can just draw the screen the way you want it to look with all of the controls and such. It sounds a lot like the Visual Basic interface (or any of the visual programming tools). Obviously buying Visual Basic to do layouts is silly but there are other freeware programming tools that work the same way. A quick search came up with Lazarus.

Re:Sounds like Visual Basic

[smbarbour]

Well, putting aside arguments of "using the right tool for the job", you don't have to buy Visual Basic anymore. The 2005 Express editions of the Visual Studio tools are free (and not in the 30-day trial sense). Naturally there are some moderate restrictions such as not being able to use Visual SourceSafe with it or creating custom controls (which is easily worked around if you are worth your salt as a programmer), but you can develop applications with it that can be compiled and redistributed without royalty or licensing issues.

That said, Visual Basic would obviously be a poor choice for doing web mockups on Linux.
A) Does not run on Linux (natively)
B) Does not create web pages (except in the paid versions or the Web Developer Express package)

Re:Sounds like Visual Basic

[xsonofagunx]

not saying if it's a good idea or not, but your B point is somewhat moot in that they're not trying to create a webpage, they're trying to create a mock-up of a webpage.

I kind of think it's a good idea, just in that one would be able to position elements, including radio-buttons and check-boxes (and, if they really wanted to, they could make them functional without too much effort, Visual Basic does have its positive side - and that's RAD [rapid application development]), images, and other user-interface bits and pieces. No, it wouldn't load up in IE or Firefox, but a piece of paper with a sketch on it wouldn't either. The point is to communicate the idea, and VB would achieve that (I personally think it would be easier in VB6 or lower, I haven't put time into getting my head around VB.Net yet - it's hard to 'know' a language, and then be presented with something that's 'a newer version' but much different).

Of course, given the requirement of Linux, your point A trumps my counterpoint to your point B, but I figured I'd just chime in pointlessly and waste bandwidth.

Re:Sounds like Visual Basic

[tehcyder]

I figured I'd just chime in pointlessly and waste bandwidth

I think you just wrote slashdot's new mission statement.

These are the steps I follow

[dduardo]

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.

Screen Capture...

[jte]

...has always suited me very well for those very elements mentioned in the post - that and your web browser.

One place I worked...

[blueZ3]

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.

Actually, it's not hard in Gimp, but...

[Anonymous Coward]

You say it's hard to do that sort of thing in Gimp, but it isn't hard at all -- just create all the relevant elements as brushes or patterns, and you can paste them in wherever you want.

That said, you still won't likely create anything worth looking at; mock-ups created in a graphics package just don't cut it. Trust me, I have a colleague who does the same thing in Photoshop, and it's really annoying to have to re-create his mock ups in HTML... especially as he's fixated about getting it 100% perfect, down to the pixel.

In the end, your best bet is to start with HTML. Whether you're coding it or creating it in a WYSIWYG designer, you really do need to have the HTML so you can see it working in a browser.

Re:Actually, it's not hard in Gimp, but...

[Anonymous Coward]

Trust me, I have a colleague who does the same thing in Photoshop, and it's really annoying to have to re-create his mock ups in HTML... especially as he's fixated about getting it 100% perfect, down to the pixel.

That's what a designer does. It's his job. Your job is to "make it so".

Re:Actually, it's not hard in Gimp, but...

[try_anything]

That's not what a web designer does. You can only get it right down to the pixel for users running a single browser at a single screen resolution with a single set of browser settings. A good web designer has to understand what a web page is and design to its strengths and weaknesses, not pretend that he's doing design for television or print media.

Re:Actually, it's not hard in Gimp, but...

[Anonymous Coward]

Nah, you're doing it all wrong!

You can code it all in Flash, that way, EVERYONE has it looking the same.

Accessibility is for wimps!

*runs*

Re:Actually, it's not hard in Gimp, but...

[mini me]

A designer's job is to design to the medium. This requires that they have a working knowledge of HTML/CSS/related technologies. Just like a print designer must have a working understanding of paper. You don't expect the print-press operator have the designer's animated GIF run on paper.

just the thing-webdraw.

[Anonymous Coward]

JASC Webdraw could do the same.

Duh

[Anonymous Coward]

Why don't you just use Microsoft Word like I do? It's *SO* easy to use!

Yes there are

[ajs318]

You want a tool to generate mock-up web pages in Linux? What's wrong with

# cd /var/www/html
# pico example_page.html

?

Failing that, just get yourself an A4 quadrille pad and a propelling-pencil.

Re:Yes there are

[computational super]

You left off a step:

• # cd /var/www/html
• # pico example_page.html
• ^xvi example_page.html<enter>

Re:Yes there are

[hazem]

ummm because the correct syntax is:

# vi example_page.html

Or is it:
# cat > example_page.html

followed by a ctrl-d?

Whatever works . . .

[Evardsson]

When I worked as an HTML code slave, I would get mock-ups done in Photoshop, GIMP, pencil and paper, Dreamweaver, Word, Publisher, Open Office, whatever. What it all boils down to is that you need to work the way you work best and leave the coding up to the coders. If you are most comfortable doing your mock-ups in crayon, then do them in crayon. The important thing is to be sure that you have gotten your ideas across clearly and plainly, and have a little faith in your coders to do the job. If you can't trust them, then maybe you need new coders. o_O

Paper!

[Peganthyrus]

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.

Re:Paper!

[Tim C]

Speaking as a programmer, I'd ask him what exactly he expected me to do with the piece of paper. But then perhaps I've been spoilt; while I can (of course) do HTML, CSS, etc, we have people dedicated to that sort of thing. Just as you wouldn't want me admining live servers (although I *can*), you don't want me (or any other programmer) creating the HTML from scratch.

Re:Paper!

[falconwolf]

Speaking as a programmer, I'd ask him what exactly he expected me to do with the piece of paper. But then perhaps I've been spoilt; while I can (of course) do HTML, CSS, etc, we have people dedicated to that sort of thing. Just as you wouldn't want me admining live servers (although I *can*), you don't want me (or any other programmer) creating the HTML from scratch.

A few years back I met a graphic artist turned webdesigner and using pen and paper was a drum she beat frequently. Get it first on paper then fireup photoshop to sketch it out and export it, then cleanup the code. About the same tyme the professor I had for Dreamweaver said the same thing.

Falcon

Re:Paper!

[Peganthyrus]

The original question seemed to be all about 'how do I communicate a bunch of forms to programmers without actually learning how to give them HTML?'. Paper works pretty much as well as anything else, IMHO.

Ideally, of course, a "ubiquitous web designer" would be able to, you know, open up a text editor and pull out their favorite cheatsheet to refresh themselves on how forms work and give the programmer something to work with. But somehow it sounds like the original questioner is convinced they can never learn HTML.

No!

[also-rr]

Inkscape is king, or try one of the several other (Free, free) vector drawing packages available.

You can easily bolt together page elements and then create copies to drop anywhere on your mockup, and group select to alter attributes accross many elements. It can also import raster (bitmap) graphics to show where photos etc would go on the page.

Output is as .png or .svg, easily convertible to pdf or whatever you need really. You can also use it to create frames and then animate them with the command line tool animate to show functionality that wouldn't work well as a static image like so.

For starters, don't use GIMP or Linux

[Piata]

I do this sort of thing all the time (make mockups in Photoshop and then create the HTML and CSS for them). The only form elements you really need to be worried about is radio buttons and check boxes because you can't style them by normal means. Everything else, design the way you want to. Also, I'd recommend getting away from Linux, GIMP and pretty much any open source piece of design software if you see yourself doing a lot of this kind of work. Linux isn't designer friendly and open source design software isn't even in the same league as professional design tools. I'm sure a lot of people here won't agree on that point, but they're also the same people that will (falsely) proclaim GIMP to be a valid substitute for Photoshop. Don't get me wrong, I love open source, but it's not up to par in the design world.

Re:For starters, don't use GIMP or Linux

[msuarezalvarez]

From this post, it is not hard to see why Linux is not friendly to you...

Re:For starters, don't use GIMP or Linux

[onlyjoking]

Agreed. Much as I admire how far GIMP and Inkscape have come along graphics is one area where you really need those fine-tuning little extras that come with professional tools like Photoshop and Illustrator. The other big issue I find with Linux is font rendering and line spacing. Why is it that open source's flagship browser, Firefox, renders pages horribly compared with OS X and Windows? Reason - because graphical rendering was an afterthough. Linux, like other *NIX variants primarily excels in data handling/process management. Graphical display is secondary and it shows in the awful, bitty fonts found in the dialogue boxes of nearly all Linux distributions. The irony here is that many OSS tools work better on Windows and OS X. The X11 rendering system on Linux is still second rate and will hold back "Desktop Linux" from widespread adoption until it is replaced. It may also explain why Adobe isn't porting Photoshop to Linux anytime soon.

A Constructive Observation.

[LifesABeach]

If simple HTML is a challenge for you; You have wondered into the deep end of the pool. The best advice you can receive is either climb a little higher on the learning curve; Or hire advice from someone who has been there before. Either way is relatively painless, and causes the project to be completed on time.

Re:A Constructive Observation.

[dhasenan]

He's looking for fast prototyping, and he doesn't need functionality. He can ostensibly do the work in HTML, though that isn't his job; he just doesn't want to spend a week or two developing a prototype when he might be sending out a dozen for a single job. It's inefficient.

Re:A Constructive Observation.

[J05H]

Sounds like a job for Paper! I have 3 active & 1 reference notebooks for my current project. Lined yellow legal pads rock!

Josh

www.PostcardsToSpace.com

wtf, just use pico (nano)

[Anonymous Coward]

"The Ubiquitous Web Designer"

"Can something help me design a page without much knowledge of HTML"

That probably sums up 90% of web designers right now sadly ....

how to make mockups that are easy to make dynamic?

[Pootie Tang]

I have a question that's been bugging me for a while that is related to, but not quite the same as what the submitter asked. It's more relevant to the company I used to work for, but I still want to know the answer even though I don't so much have the need anymore.

The submitter wants to make non-functional mockups without spending a lot of time. Our designers would do that in photoshop and once the client approved the design, they would then do the mockups in HTML.

The HTML mockups weren't bad, they did their best to make them as "real" as possible. For example the form submit actually take you to the next page instead of just "#". But if the form was edit.jsp and after you press submit it takes you to view.jsp, we'd have to go in and change it so that the form actually submitted to EditSubmitAction which would then display view.jsp. I wanted them to be able to point it to EditSubmitAction and give them an accessible way to map that to displaying view.jsp.

Another example would be they would have on view.jsp something like:
    [tr][td] Name 1:[/td][td] Bob Smith [/td][/tr]
    [tr][td] Name 2:[/td][td] Chuck Jones [/td][/tr]
    [!-- etc for each row --]

I wanted them to just be able to use JSTL tags to create the actual while loop. If they had a way to put in some sample data like Bob and Chuck that would be great too, but it was usually "ipsum dolar epsum" or however that goes anyway.

It seems to me that creating a framework that would allow them to do that wouldn't be terribly hard. It would save the programmers a lot of time integrating the code with the design. And I don't think it would be a significant burden on the designers (they were paid less, so even if it was a burden to some extent the company could come out ahead).

For whatever reason this suggestion went nowhere. I wasn't expecting it to be perfect. I was expecting to have to fix some things, change a lot of the names the designers gave, etc.. But it seemed feasible to get a pretty good return with fairly minimal effort.

Has anyone had any experience with a framework such as this? Or perhaps a different approach to accomplish the same thing?

For me, what works...

[WebCowboy]

...is usually what is being used for development of the end product. If you are making a website mock-up, do it with web development tools. If you are mocking up a windows forms app then use Visual Studio (whatever language because it doesn't matter, especially in .net--the point is to use the form-building GUI tools). If it is GTK use GTK-based tools, etc.

What it all boils down to is that you need to work the way you work best and leave the coding up to the coders.

I don't mean that you should do this and expect your coder to retain all the code you generated or wrote, becasue as you suggest your coders should know how best to code the actual application. As a developer, you'd posess the skills to determine how much (if any) of the mock-up can be used. A good mock-up may be nearly perfect, but more than likely if you use VS.NET like a drawing program then all the form objects will have meaningless names so what little generated code might be useless anyways.

So why use VS.NET to mock up a Windows UI, or FrontPage to mock up a web app (or the Free Software equivalents...whatever) if

If you are most comfortable doing your mock-ups in crayon, then do them in crayon.

Although I don't think that someone designing a UI needs to have advanced coding skills, I do think that such people should have at least introductory knowledge of the development tools and/or target platform and what their capabilities are. If you've got no knowlege of HTML at all and have never designed a web interface then you'd better learn a bit about the tools and technology behind web apps before venturing out to design one. Someone with adequate knowledge would at least know how to doodle something out in Dreamweaver or FrontPage. Yes, the code from such a person may be atrocious but the code is not the point (and the designer should not take offence if the code/underlying HTML structure is differnent--if the coder wipes out the table-based layout you futzed with for a couple hours to get just so and implements an almost-equivalent layout using proper CSS it is the coder's perogative--he knows best because coding is his job function).

So if none of the code matters, what's the point? Some might assume that mocking up using the same/similar visual developer tools as the coders will use would be so as to re-use whatever code supporting the mock-up but trying to re-use such code is actually a bad thing. The actual point is to convey the *intended behaviour* in ways dificult or impossible to do on paper, or powerpoint, or MS Paint or whatever. That is best done using the same technology/tools as the developer uses because NOTHING ELSE truly duplicates that behaviour. Drop-downs in Windows forms are a little different than in windows forms and simulating the behaviour of a drop-down in Powerpoint is too tedious to bother, and you cannot express a drop-down well on paper at all. Designing in this fashion also keeps the designer in tune with the characteristics, limitations, best-practices, etc. of the platform. For example, too many websites try to look too much like native desktop apps, supported by large amounts of kludgy code. AJAX is now popular and unfortunately in all too many cases it is used solely to make it more closely emulate the "desktop experience" without adding meaningful value. I think that brainless website layouts (those with fixed widths, javascript-heavy visual effects, accessibility-breaking purely-graphical buttons/links, non-resizeable fonts and so on) aren't dying off as fast as they should probably because of the legacy left by the practice of using graphics editors and other static techniques.

Submitting a mock-up in crayon to a coder might be good enough, and the coder will thank you for not trying to do the job he is best qualified to do himself, however you are doing your developers a disservice by such practice. Nothing can substitute for the visual interactivity of a "live" mock-up, and if the end users evaluating your mock-up com

why not use xfig?

[belmolis]

If you just want to show layout and don't want to draw by hand on paper, why not use xfig or some other diagram-drawing program? If you do a lot of this and want higher quality drawings, you can create a library of objects.

Inkscape works great

[mattnuzum]

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)

Re:Inkscape works great

[Tony]

(open it in inkscape for the real effect).

Or in the beta version of Firefox 2.0. I just tried it-- very nice.

Re:Inkscape works great

[hullabalucination]

Yes, I use Inkscape a lot also to do my initial visual design and will often generate graphic elements (custom buttons, for example, or logos) directly from the program in PNG then do the final touchups/format conversions in GIMP. I use Bluefish http://bluefish.openoffice.nl/index.html for the actual page coding.

I wish I could say that I've extensively tried other Linux graphic apps/code editors but I haven't. XaraLX is just now getting to the stage of usability for Web stuff; I'll have to spend more time with it. Other HTML/programmer's editors I've got but haven't explored yet: Screem and Quanta Plus. I know a lot of people use emacs and vi; I just don't seem to be able to find the time to learn all the key combinations to get really efficient in either.

Nvu is enjoyable simply because I used to do a lot of down-and-dirty page designs in the old Netscape Composer on Windows and Nvu seems very similar in the user interface and functionality (I think Nvu was derived from the Mozilla codebase), but I don't use it for much of anything important because I enjoy the brain stimulation of hand coding.

* * * * *

What happens if a big asteroid hits Earth? Judging from realistic simulations involving a sledge hammer and a common laboratory frog, we can assume it will be pretty bad.
--Dave Barry

Re:Inkscape works great

[mattnuzum]

hullabalucination: Check out aptana http://www.aptana.com/ for the implementation phase. It has a preview tab so you can tweak your CSS and html and get pretty fast feedback. Even better, it has CSS/HTML/JS auto completion so you don't have to switch back and forth between your different files as often.

How about this

[Anonymous Coward]

I set up an Apache server on my local computer (http://localhost) and save directly to the /var/www directory. I work with the "live" file on that server as I go along. I tweak in Kate or Gedit or Bluefish or GIMP or bla bla bla, ALT-S with my left hand to save while I hit the refresh button on my Firefox browser. I can frame a table or DIV, adjust the css to suit, save images directly out of GIMP as I go, and la la la. I'm done a template in about 45 minutes. Then it's just a matter of plugging in raw content (ick) or php code to generate content where it's required.

It's not a question of the tools you're using, but how you use them. Knowing how to use them effictively is more important than how you mock up a website. Sometimes I use pencil & paper sketches. Sometimes I write out snippets of code on napkins at the bar. (I'm such a hot date on a Friday night). Sometimes I use GIMP to do a 1024 x about 700 @ 300dpi layout. Sometimes I'll just whip up a banner or logo or icon set and build around that. Sometimes the content requires a specific presentation (ie. chemistry lab reports) so you have to work with that.

Try pencil and paper

[dtfinch]

It's the holy grail of all user interface design.

XHTML isn't really that hard

[martinultima]

Personally I'd have to agree with everyone else who suggests learning XHTML and CSS; it's really not very hard at all... or of course, you can just run something like DreamWeaver on Wine, I'll admit I can't stand those GUI editors at all but it might be worth checking out anyway if it might be easier...

I will admit, I'm a real GIMP addict myself, but it can definitely be a pain in the ass to learn, it took me around a year or so of playing around with it off-and-on before I really got the hang of things, although it was really just silly things like techniques, not the interface or the program itself – and once you've gotten past that, it's a lot easier...

Have you tried maybe OpenOffice.org Draw? Not sure how useful it would be for a Web site, but I've found it's a great program for lots of other stuff, use it all the time for basic desktop publishing...

The newly open sourced...

[mav[LAG]]

...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.

Re:The newly open sourced...

[Ron Harwood]

I think this is the link you want: http://www.xaraxtreme.org/

Re:The newly open sourced...

[mav[LAG]]

Duh - it is, thanks.

I think what you want is called...

[oohshiny]

"pen and paper"

PowerPoint for wireframes, Photoshop for art

[200_success]

At my previous company, our UI designer used PowerPoint to create wireframes. That was to get a feel for where the UI elements would fit on the page. One nice thing was that he could easily share his work by e-mailing the PowerPoint file. He even did some crude scripting so that clicking on certain elements would take you to the next page. The software developers joked that we should just ship his PPT file as our product.

The artistic factors (color scheme, logos, etc.) were handled by our graphic designer after the wireframes were done. I think he used Photoshop for that.

If you insist on doing it in Linux, you could try OpenOffice and GIMP.

Thanks!

[hullabalucination]

I'll give it a try. "JavaScript-focused" sounds intriguing.

* * * * * *

Boy, those French, they have a different word for everything!
--Steve Martin

You are better off not doing it at all.

[LWATCDR]

Find a real web designer. And not I am not being mean.
CSS/XHTML imposes limit on what fonts you can use and what is possible and what isn't
Not only that but you have to make sure it runs on standards compliant browsers and hunk of trash that Microsoft calls IE.
it is the height of arrogance to think that you can design a web page and no nothing about HTML. Kind of like someone that can't change their oil thinking they can design a car.
Find a web designer and tell him what your page needs to do. Then work with them until you like it.
Do not give him a pretty picture and expect him to get it to render on every browser and resolution on the planet.

Here's what I use

[Qbertino]

I do professional webdesign and use Linux. I'm also using OS X but for reasons unrelated to classic webdesign.
First of all I'd like to note that the available OSS tools have come a long way since a few years ago. Inkscape as a vector tool looks impressive, Gimp is a usefull tool for professional work and Openoffice Draw isn't to bad either, allthough it's best suited for flowcharts and stuff.

For professional Print and Web work on Linux I personally use Corel Draw & Corel Photopaint for Linux (CD Version 9) for which I was fortunate enough to get a licence a few years ago (cost me about 400$). Yet Corel Photopaint Linux was released for free (beer) just a year later. I doubt it's still available from the corel website, but I'm shure many people downloaded it back then and have it somewhere on their HD. Ask around in Linux Forums like linuxgrafics or something, you'll find someone with a copy of that in no time. Despite Gimp being powerfull, I'd say Photopaint is still the most powerfull Pixelapp for Linux. Then again, for mockups Gimp should actually be just fine. I designed the buttons on my homepage with it.

I do use Photoshop (on Mac OS X) sometimes, because some filters are unmatched by others until now and Gimp doesn't have bump-displacement mapping which can be a real downside. But when it comes to editing, Gimp is a very good tool. You should give it a try aswell.

gui and graphics

[falconwolf]

It may also explain why Adobe isn't porting Photoshop to Linux anytime soon.

I'm not so sure Adobe is taking so long to port to Linux for this reason. Afterall they're not porting their software, PS, to MacTels until the third version of CS comes out.

Falcon

Seamonkey (Re:Nvu)

[mah!]

actually, Seamonkey's editor has similar codebase pedigree, gets updated more often, crashes less and its GUI is a bit less of a pain... still quite basic though.

By hand

[Tinned_Tuna]

I find that when I'm designing stuff quickly, I need to have something that I can use easily and quickly, even when my mind feel like it's going faster than my hands can go, so I draw. Just scribbles, but when I have one that I think is good enough, I'll pull out the ruler and colouring pencils, and see if it really does look that good.

When I'm done, I'll open up Vim and see if I can get a working style sheet & HTML. If I still think it looks good, then I'll go ahead with it.

Re:just the thing ... another vote for inkscape

[pbhj]

Yeah I use inkscape for page layout too (crayon first!). It's good for doing a visual that you can instantly edit if you're chatting with clients (similarly I use the webdev CSS editor at a later stage for this type of thing) ... I haven't used it but wonder if inkboard (a part of inkscape for collaborative drawing - I think) might help here too?

Oh and Xara ... I couldn't get it running initially, when I did I couldn't get used to the funky UI. That's not totally because I'm wedded to Inkscape; I've started off with CorelDraw X3 recently and took a lot better to that.

Quanta Plus / KDE

[aaron_pet]

Quanta plus is so nice and easy to use, with support of CSS, and a bunch of other tools to help you code right.

Basically make your content, name the blocks. Start writing CSS that makes the page look right.

To do a website elegantly, you need to consider CSS from the ground up.

quanta plus has a wysiwyg environment now. Plus it uses konqueror--the browser that passes the acid2 test. and it has some great code collapsing features from the advanced text editor.

--AP

Re:just the thing ... another vote for inkscape

[SpectreHiro]

I hadn't noticed Inkboard. I'll have to check it out. I'm reminded of similar functions in openCanvas (back when it was freeware) and Yahoo Instant Messenger (it's pretty basic, but it can be fun to doodle with friends).

Personal taste is a large factor in clicking with a UI, especially among creative professionals, I'm finding. I was never a real fan of Inkscape, and I still can't use the GIMP for anything other than the most basic tasks (I'm a Photoshop junkie). Then again, I'm really getting into Blender, while 5 versions of Max never did it for me. C'est la vie.

If you decide to give Xara another shot, check out XaraXone. They've got 10 years worth of tutorials onhand, and you can find out how to do pretty much anything, with a little searching.

An unorthodox approach

[Bostik]

I start like this: Pen/Pencil -> Image Mockup in Photoshop -> XHTML/CSS mockup with real structure.

I know (from personal experience) that GIMP takes some time to learn, and creating graphics from scratch with it is not exactly easy. But for the image mockup stage I have a somewhat unorthodox suggestion. Try Scribus. Since you are doing visual layout anyway, why not use a software that actually is designed to create and manipulate such? Different elements are not tied to graphical layers, and dropping sample texts into them is dead simple.

The really interesting part is that if you end up doing the layout this way, you already have a visual model for CSS box elements. Of course, for the final mockup and image spots you may need some heavy-handed image manipulation (also known as "cheating") but then again, you're selling a project and sales material usually only approximates the truth... (And CSS provides the tricks to pull the same stunts off in any case.)

Personally I have changed to using Scribus when creating diagrams. Takes a little longer than with dia, but the results are damn good-looking and certainly worth the effort. Combine that with some good clip art and you have near-professional quality results.

Unorthodox, or outright heretic? You decide.

Re:An unorthodox approach

[ultranova]

But for the image mockup stage I have a somewhat unorthodox suggestion. Try Scribus. Since you are doing visual layout anyway, why not use a software that actually is designed to create and manipulate such? Different elements are not tied to graphical layers, and dropping sample texts into them is dead simple.

I have a better idea: use Inkscape. Faster than Scribus, much better tools for lining things up, and generally much better in drawing tools. The resulting SVG might even be directly usable in the page in some circumstances (intraweb application used with Firefox), and can be exported to pixel image files in any case.

Altought, for the first design phase, pen&paper are the king. They're still far superior to everything else as far as ease of use and flexibility are concerned.

Paper

[Macgrrl]

I tend to use tracing paper, felt tip pens and a photocopier.

Establish your basic grid - photocopy a bunch of shells, you can layer elements to see how the screens build on each other using either light trace or bank paper.

I also find that colour can be useful in mockups - hence the felt tip pens. If links are going to be a different colour, etc... show them as such on your mockup. HMTL is a GUI, chances are they won't be using the site in B&W - colour does impact on the choices people make while using the site.