The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

Tools To Help Sketch UIs For Your Applications?

What do you use, besides pencil/paper, to sketch out the UIs when you are developing your applications? The tools I could think of are:

Paint.Net
MS Expression Design/Blend
Photoshop
Lucid Spec (Elegant Tech)
GUI Design Studio (Caretta Software)
MS Paint
Visual Studio (maybe??)

Optimally I am looking for something open source / free / cheap.

Ideas?
App Developer
Monday, April 21, 2008
 
 
This DoS question actually inspired me to write a blog post about this. I am in the same boat.

Right now, my leading candidate is Microsoft Expression Blend. But that is expensive for many people to just go out an buy. I am going to look into cheaper alternatives as well that keeps me even further away from the code.
Joel Marcey Send private email
Monday, April 21, 2008
 
 
I use PowerPoint.
John Topley Send private email
Tuesday, April 22, 2008
 
 
Visio or something like dreamweaver if you're prototyping a web UI

Tuesday, April 22, 2008
 
 
I use Visio in combination with Screenshots from the existing UI. Mostly i extend the existing UI thus this is a way to go for me.

For completely new designs use Visio: It does not provide too fancy features, thus forcing you to design a useable (since known to the user) interface. Sometimes lesser features is better than too much features.
Nils Drews
Tuesday, April 22, 2008
 
 
When I used to do GUI design, I used a sort of "paper prototype" process:

1) Used Visio to create a few pages of common GUI components (text boxes, push buttons, check boxes, etc.). Made the components oversized so that they are clearly visible from about 20ft. away. I didn't put any labels or text on the controls.

2) Printed the pages off onto magnetic paper. Used a dry erase press-on laminate on the printed side.

3) Cut out the individual controls. I used a fishing tackle box to organize and store all the bits.

4) I could then noodle with designs on a whiteboard, either by myself or with others, quite easily. Since the controls had the dry erase laminate, I could write on them for the labels, etc. I would draw the frame/window borders on the whiteboard then put the controls on and move them around.

This worked for well when collaborating with users; I found they could articulate their requirements much better when they had some control over the design of the GUI, and using a whiteboard made it much easier for them.
Former COBOL Programmer
Tuesday, April 22, 2008
 
 
1. For simple dialog-box-like utilities: Visual Studio.
2. Web pages and table-and-text-intensive web apps: MS Word.
3. Complex and graphic-intensive apps: MS Paint and/or CorelDraw.

I keep a small library of images of common controls for inserting in the last two.

Don’t forget the whiteboard.
Michael Zuschlag Send private email
Tuesday, April 22, 2008
 
 
Visio for desktop apps.

Dreamweaver for web apps.

Access for quick and dirty desktop prototypes.
Steve McLeod Send private email
Tuesday, April 22, 2008
 
 
Serena prototype composer
Nathan
Tuesday, April 22, 2008
 
 
I love whiteboards w/ dry-erase markers!
Brian Shipe Send private email
Tuesday, April 22, 2008
 
 
This is how you guys design the static graphics. How do you design the choreography / interaction model of the user interface?
Karel Thönissen Send private email
Tuesday, April 22, 2008
 
 
> This is how you guys design the static graphics. How do > you design the choreography / interaction model of the
> user interface?

I think a bunch of the tools like GUI Design Studio, Serena Prototype Composer, etc. have interaction model capabilities. There are some good links in Jeff Atwood's post and the blog post I wrote.
Joel Marcey Send private email
Tuesday, April 22, 2008
 
 
I'm in roughly the same spot as you.  After reading up on the options out there, I decided to go a "manual" route. 

Visio and the generic Office drawing tools are versatile and not difficult to use, but (1) I work better with a pencil or pen in my hand than with a mouse, and (2) I think there's value in making your early UI designs intentionally low-tech.  It helps you and your users see the through the interface to the "idea" of the software/site.  Google "paper prototying" for more on this.

I chose a tablet PC as my work laptop and I'm just getting started.  My plan is to sketch things out very roughly by hand and then email to my users.  I'm toying with using Inkspot, an open source vector drawing tool, in case my hand-drawn stuff looks a little *too* rough.

Good luck getting started.
Mike in Montreal Send private email
Tuesday, April 22, 2008
 
 
I may be crazy, but I prototype web UIs by writing HTML pages in XMLSpy (or Visual Studio if XMLSpy isn't available, though VS gives me a little too much "help").
Robert Rossney Send private email
Tuesday, April 22, 2008
 
 
XRCed
cynic
Tuesday, April 22, 2008
 
 
OpenOffice has a Draw module that's along the lines of Visio. It's a little limited but it's extremely free.
Rowland
Tuesday, April 22, 2008
 
 
"How do you design the choreography / interaction model of the user interface?"

By understanding the end user's goals, their mental model of how they do their tasks, by actually observing them in their environment.

Once you've got that figured out (and it takes a whole other mindset to do it right which the vast, vast majority of software engineers/programmers I've worked with over 20 years in the business simply don't know how or want to do...) you can then sktech things out on paper and then move to a tool like Axure - my favorite at the moment.

Once that is done, and the interactions and flows (yes, they're separate things) don't have too many rough edges, then you get to build it.
MT Heart
Wednesday, April 23, 2008
 
 
This was in another GUI thread today and looks pretty cool:

http://www.balsamiq.com/products/mockups
Osmyn Send private email
Wednesday, April 23, 2008
 
 
mockupscreens.com
OraDude
Tuesday, May 06, 2008
 
 
You can use the free version of Delphi/C++ Builder to make guis and test them realtime.

http://www.turboexplorer.com/
blur
Tuesday, May 06, 2008
 
 

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
 
Powered by FogBugz