Designing website mock ups?

June 13, 2008 12:29 AM

What is the best way to draw website mock ups?

I have tried using MS Visio, OO Draw and ConceptDraw WebWave but all of them feel a little bit too 90s and present me more difficulties then improvements in the workflow and at the end everything looks very bad.
From the searches that I made it seems that there isn't better software then these three but I really hope I am wrong.

posted by tseo to computers & internet (18 comments total)

Depends on the goal of the mockup. Information architecture? Graphic design? Who's the audience? Clients? Designers? Implementers of the design?

It depends on what you're trying to communicate and to whom.

I use Photoshop a bit. Just started trying to use OO Draw (you mean OpenOffice, right?) for an information architecture thing - no graphics. Was OK.
posted by amtho at 12:34 AM on June 13, 2008

Don't blame your tools for problems in workflow and look and feel. But, it sounds like you have a 2 part question.

1.
For more complicated interfaces, before you even start designing pages, you should be working on information architecture and flows (and user scenarios etc). MS Visio and Omnigraffle are excellent tools for this, and if you are far enough along, is really handy for making wireframes.

2.
Once you've figured out your interaction and flow, you can work on how it looks. Here, more common tools are graphics programs like Photoshop. Or if you're handy with the HTML/CSS, just code it up. Or, if you're handy with Visio, you can with a little effort, create some pretty kick-butt stencils that make it really easy to pull together consistently polished pages.
posted by bumpybear at 12:49 AM on June 13, 2008

Best web place I've ever worked with uses paper. Big paper. With colored pens.
posted by rokusan at 12:50 AM on June 13, 2008

Assuming by mock-ups you mean wireframes? I just found this stencil set for Omnigraffle today. Seriously, test drive OG. I think it's what you're looking for.
posted by quadog at 1:23 AM on June 13, 2008

Ditto paper and visio for information architecture and flows. Low-fi is your friend at that stage.
posted by cocoagirl at 3:27 AM on June 13, 2008

I am young and still new in this area which may explain me not knowing what wireframe meant until now. Wireframe is what I need and is mostly for providing visual reference for clients and then designers and developers. I am not having such problems with the architecture part of this because it just needs to be understandable and not so pretty so I don't need to tweak it so much. Photoshop doesn't work for me mostly because I am not proficient enough.

Here we actually use mostly paper and pen ofcourse but after that someone (me) needs to put this in a presentable image file so it can be sent to a client. I just found something called Axure and am going to try it out.
posted by tseo at 4:36 AM on June 13, 2008

I use OmniGraffle (yes, Mac-only) with the Wireframe Palette to develop my wireframes. OmniGraffle is the only tool I found that made doing what I wanted to do with my wireframes (mock up design and get a good idea where controls and parts should all go) easy.
posted by SpecialK at 5:12 AM on June 13, 2008

My husband is an AI with a very, very large company and they used Visio until this year, and now they use Axure, so I think you are on the way.
posted by Medieval Maven at 5:24 AM on June 13, 2008

Partially hijacking the thread: I (designer) am looking for a similar tool; I am comfortable enough in making wireframes with html prototypes and using photoshop for complete page drafts and designs not to want to change that.

What I would like to, however, is some way to merge the two, being able to link a psd file (or an exported jpg) as a snapshot of a certain status/case and - here is the tricky part - letting the developers - or myself - add code segments and annotations to single parts of the designs, down to which DB tables are queried and code (html and server side languages) snippets and what have you (I'm mostly talking about rather complex webapps like management or reservation systems or collaborative platforms, not the usual "who whe are - what we do - where we are" website).

Bonus if it was an online app and/or the process could be easily shared with collaborators.
posted by _dario at 5:44 AM on June 13, 2008

If you want to mock the actual design, use photoshop or equivalent. Then you do the "cuts" from there. That's industry practice.

Wireframe isn't for visual reference, its for functionality. Wireframes can look ugly as sin- but they demonstrate execution flow.

MeMail me with an email address and I'll send you a few mockups if you wish.
posted by mattoxic at 5:50 AM on June 13, 2008

For those who've recommended OmniGraffle or Visio, I'd also highly recommend grabbing a copy of the Yahoo UI Library's stencil set. It's gorgeous and comprehensive and covers a lot of ground. Common widgets, grouped stuff for common interaction models like pagers, etc.

http://developer.yahoo.com/ypatterns/wireframes/
posted by verb at 6:43 AM on June 13, 2008

I do paper sketches and then use InDesign. But that is because I am stuck on a PC (I might use OmniGraffle otherwise) and I hate the way Visio looks. Plus, having known Quark in my previous life in publishing there was less to learn.
posted by dame at 8:32 AM on June 13, 2008

Visio is pretty much walk up and use and is used by 90% of the information architects I've met. Also, there are tons of examples online, etc. that you can find to start from. I've also used PPT.
posted by xammerboy at 8:45 AM on June 13, 2008

Some advice:

Don't make your wireframes pretty.

Wireframes are meant to show the structure of a site, the rough placement of the major UI elements. If you make the wireframe too pretty, clients will *always*start critiquing the look-and-feel, they'll start talking about the colors and the fonts and the like, and the important structural questions will get left behind. It's really tempting to start decorating the wireframe, but if you do it at all you'll spend the whole meeting talking about the decorations instead of the wireframe itself.

So for a wireframe you want boxes and labels, not much more than that. Any tool that can place boxes and labels where you want them is fine -- visio, omnigraffle, pen and paper, whatever.

The graphic design comes in a later design mockup, which is based on the results of the wireframe discussion. For this you want photoshop.
posted by ook at 9:56 AM on June 13, 2008 [3 favorites has favorites]

I think, ook, that sets up a false conflict. There are pretty boxes and ugly boxes and you can want pretty boxes without designing or distracting.
posted by dame at 12:12 PM on June 13, 2008

Well, you'd think so, dame. But I can't count the number of times I've sat through meetings that were supposed to be about the functional UI, which ended up being all about the decorative parts of the UI because people kept mistaking the pretty wireframe for the first draft of the final design.

No matter how many times you tell the client, no, this isn't the graphic design, this is a tool to help us talk about the structure of the product, it's very easy for them to keep veering off into look-and-feel territory if you give them the slightest opportunity. (And I've seen this across the board, everyone from the my-first-website types and from corporate product managers who should know better.)

I find that even when I'm just working for myself, the simpler and more bare-bones I can make the wireframe the better -- a pretty wireframe can mask structural problems because you're looking at the pretty. I'm not saying it needs to be ugly, I'm saying it needs to be pared down to the absolute simplest form possible.

(The exception would be a wireframe that's part of a pitch to the client, a "here's why you should hire us to redesign your site, look what we can do" kind of thing. But that's a completely different animal.)
posted by ook at 4:26 PM on June 13, 2008 [1 favorite has favorites]

Yeah, I'm with ook. Also, avoid putting anything that looks like real text as well, as clients can also get hung up on wording.

My favorite wireframe pages look something like:

Cart

I am the cart page. I show a list of all of the products in the customer's cart. If the cart is empty this page displays some kind of message saying that the cart is empty, with maybe instructions on how to add products

Outgoing links:

• continue shopping
• remove an item from the cart
• checkout

This way there's no way that they can hung up on design or wording, and it becomes very clear that they're looking at something other than an actually web page.

Incidentally there are server-side wireframe apps out there that make it easy to make pages on the fly..basically something that very simply stores a "page" and the links on that page and creates more pages as you go along. I'd look into that for wireframing as it's a lot faster than doing it all in HTML (and for a large site it's nice that it keeps track of the pages for you).

On the other hand, once you start hashing out the visuals, I'd do paper and the "final prototype" and nothing in between. When you're sketching on paper the client will understand that it's a temporary thing. Once it looks even vaguely like a website, the clients will start thinkig it's the real thing, so you may as well make it the real thing rather than make a throwaway prototype.
posted by Deathalicious at 8:04 PM on June 13, 2008

Ook and Deathalicious are right on the "don't make it pretty." I have had the same experience many times. I have even taken wireframes and deliberately "uglied" them up so there would be no confusion about what it was.

Keep it black and white, too, because people react emotionally to colors and can't think past that.
posted by rokusan at 8:47 AM on June 20, 2008 [1 favorite has favorites]