views:

273

answers:

6

Sometimes we use Photoshop, other times MS Visio. Is there any tool to design the User Inteface that is intuitive and easy to use? Also, is there any best practices.

What we want to accomplish is a simple and easy to see image of how the actual UI should look. We don't want to deal with any programming at this point, since this is done even before the estimate is done.

+7  A: 

Depends on how far you want to go with the design. I actually find that Balsamiq is the best tool for doing estimates and keeping the customer focused on what really matters. It's extremely easy to get complete mockups in mere minutes.

You should treat the true design the same as you treat the development - colors, images, fonts, details, embellishments are all implementation details and time-consuming work, and are exactly what tools like Fireworks and Photoshop are designed for - high-end, detailed work that require professional applications to accomplish. Just like development.

Rex M
+1 for balsamiq
Ólafur Waage
+1 for Balsamiq - it's not often that I see a piece of software and think "I gotta get one of those"!
Steven A. Lowe
I use Fireworks quite a bit. It ships with a Common Library of Windows / Mac controls that work really well. (Maybe Photoshop has this, too. Not sure.)
Kevin Swiber
Balsamiq is overkill. Wireframes can be done with paper and pencil folks, honestly, you don't need Balsamiq for wireframes. However, you are spot on with treating design the same as development.
Marc
@Marc wireframes *can* be done with paper and pencil, but you cant drag and resize your sketched elements around the paper. That makes collaborative prototyping much easier.
Rex M
A: 

You can also look at the 960 grid system to help the design process.

Ólafur Waage
+2  A: 

If you're just laying out the controls (that is, not dealing with graphic design issues like typography, colors, etc.), I recommend the the trusty paper+pencil combo. It shows people that it's not the final design, as opposed to badly spaced and randomly colored, real-looking controls that may look like a bad final design. It's also easy to draw and easy to discard - an advantage for any initial design.

If you can't draw straight lines well, then you can use dot graph paper. If you google for "dot graph paper" you'll find many sites that can produce dot graph paper PDFs you can print (I recommend making the dots as light and small as possible, btw).

If you already have the layout, and just want to make a realistic-looking mockup of the final product, then Fireworks would probably be my first choice. They have a nice GUI-controls symbol library, and bitmap/vector editing features that are similiar to Photoshop's and probably much better than Visio's (although I haven't used it much, so feel free to correct me). It also has some nice unique features like 9-slice-scaling (to draw round corners) and much better slicing tools than Photoshop's.

Eli Krupitsky
I do paper and pencil all the time with clients. However, half my clients I never see face-to-face, in which case I prototype in illustrator. And other times I use html/css because it's often faster than messing with design tools.
rpflo
A: 

Expression Web or Expression Blend.

JP Alioto
A: 

The easiest way is to find a site like cssplay or ALA and choose a layout that is already tested and in use on the web. Relying on any tool, especially a Microsoft one (expression), to produce working cross-platform CSS is risky.

SpliFF
A: 

I've used Axure. It's costy but you can use it to do stuff quickly and easily : http://www.axure.com/

mrmuggles