Boxes And Arrows : The Design Behind the Design

I just had a late thought: if someone is asking for “Wireframes as PSD” that sounds more like they’re looking for a design comp? That would be more the domain of a graphic designer than IA?

A wireframe in PSD isn’t the best move. Photoshop is raster program so if you ever need to scale your wireframes…no way Jose! Visio 2003 doesn’t do such a great job of scaling by percentage, but it is a vector tool. I’ve heard people use Illustrator or Indesign.

Yea, to me PSD = design comp, which is supposed to come after the Wireframe?

Anyone use Powerpoint, which is easy to drag shapes onto the main area/slide?

Here’s an article by some folks who prefer InDesign over Visio:

http://www.uxmatters.com/MT/archives/000161.php

Did you read that > http://boxesandarrows.com/topics/view/20709 already?

I gradate the different granularities of wireframes from mock-up to sketches of functions to wireframes.
http://www.boxesandarrows.com/files/banda/uxdesign-planni…

How about Corel Draw?

I feel it is a powerful tool, vector based and quite flexibile.

Defnitely a bettr option than Power Point and Photoshop.

I feel this is a good alternative to illustrator and Visio.

Hmmm… it seems that Visio is the app that most seem to want to have an alternate for :)

Holger, that’s a great diagram… is there an accompanying article with it?

there is an article – but not on deliverables – that will be the next what will be to be done :-) I will write an article about deliverables asap

this is the accompanying article:
http://boxesandarrows.com/view/ux-design-planning

Here are two nice tools, allowing you to rapidly create GUI mockups that do not look overly realistic.
http://napkinlaf.sourceforge.net/
http://www.balsamiq.com/products/mockups

There’s many great wireframing tools, but I am a fan of both Visio and Illustrator personally. You just have to pick the tool that works for you. Here’s a little general guidance on tool selection:

The primary tools used in our industry for wireframe development are VISIO, PPT, and HTML. Alternate tools may be used based upon user or client preference, however re-usability and overall cost are important considerations in tool selection.

Visio: (Visual Diagramming Tool) Microsoft Visio is a strong wireframe development solution. You can create stencils for commonly used shapes and web components, which you can re-use across multiple pages, and eventually multiple projects. It is an industry standard tool for wireframing, and you can find many examples and templates online to use as a baseline for your project. (the above may also apply to PPT)

HTML: (Code/Markup) HTML is commonly used to create simple wireframes outlining the general structure of the target application. HTML allows the developer/user to include links or demo functionality not typically expected within the construct of a wireframe. The use of HTML for wireframing or protyping necessitates the involvement of a developer or the use of WYSIWYG html editing tools.

Adobe Illustrator: (Graphic Design Tool) Illustrator, as a vector rather than pixel based tool, you can easily create resizable templates and re-usable components, which makes it an excellent tool for wireframes and design compositing. However, design products such as Illustrator or Photoshop present a steep learning curve and high cost point. The value of these solutions is primarily realized when transitioning to the Visual Design component of the project.

Additional Wireframe Development Tools:

* PowerPoint
* Omnigraffle (mac only)
* GIMP 
* Photoshop (Raster Graphics)

There are number of tools… but what is time saving? Over the years, I have used Corel Draw, Photo Shop, Illustrator, Visio and of late… Power Point. I found hard to come out of all the fancy tools every time I had to. But the winner is Microsoft Powerpoint.

Advantages of Power Point: No.1: With minimum fuss and maximum flexibility, you can create Wireframes within minutes (unlike the other softs where you might have to become an expert to do so). No.2: Update can be easily done. No.3: Your client and your end user can open the file and see. No.4: Scaling of images will not hamper your desired output at client’s location.

Any other software or creative design package comes to the stage only when your client is happy (so called!!!) with your wireframe for you move to the next step.

This is purely based on my experience for over years.

Has anyone used Fireworks CS3 for wireframing? I’m generally interested in the community’s tool suggestions for working in an agile environment …

Well, PowerPoint’s not too bad, though the standard shapes are not that great. However, here’s a PPT freebie – http://www.paulhibbitts.com/downloads.html

But, there’s something better now – I was referred to Firefox Pencil recently – awesome stuff – every UX person should try it