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 …

I’ve been using Axure for about six months now and I think it is unbelievably awesome. You lay out shapes on a screen like in Visio, but you can have onClick/onMouseover attributes for elements (eg onClick this tab, go to this screen) – then you just press F5 and it generates a clickable HTML prototype. And then you press F6 and it generates a Word doc with a screenshot of each screen, a list of every element on every screen, its behaviours, any notes you have associated with it. Just awesome. (Even the little things. You know how when you copy-and-paste between screens in Visio it pastes it where the hell it likes? In Axure it pastes it AT EXACTLY THE SAME X/Y CO-ORDINATES! That one feature alone saves _so_ much time! And masters! Use a master across many screens. Change the master and it changes it on every screen that uses that master!)

People used to use Visio because it was about the only tool around. Not the right tool, but the only tool (I never have and never will use Word of PPT for wireframes). Axure is the _right_ tool. It has its rough edges, but I’m sure every release will iron more and more of them out. And the wins are huge!

There’s a free 30-day demo (the full software is about £350 from memory: worth every penny IMHO, and it has already paid for itself many times over).

I am not connected with the company that produces Axure in any way – I am just a passionate user of the software. It has changed my life!

Kinda like Ian, I’ve also used iRise for wireframing…mostly to demonstrate behavior. It allows the visual layout of Visio with the capabilities of HTML along with the ability for your analysts to work in the same document to capture requirements per screen. However, I’ve found it to be very clunky in a lot of places, requiring a fair amount of knowledge in coding different behaviors, and is nowhere near ready to justify its cost. With a little time and attention, this could be a worthy tool but for now, Visio suffices much better.

Anyone used protoshare for wireframes:

http://www.protoshare.com

I just went through the online tutorial. Looks ok… It’s a monthly license.

Matt

If you need a zero budget tool, try OpenOffice Draw – it’s similar to Visio.

I know this post has been up for a while, but I think it’s important to reiterate that the best go-to tool for wireframing is really finding one that you are comfortable with and fits your needs. This may be one tool or a combination of tools, depending on the project.

Many designers and developers still begin with pen and paper to get the ideas flowing. Others work internally with their teams, so desktop apps are sufficient. Still others need cleaner, high fidelity functionality that can be shared with remote teams or clients.

What is important is getting the architecture and functionality of the website or web app across to stakeholders to result in a better final product. There are a lot of no cost and low cost options. Good luck in your search!

Cheers,
Andrea
@ProtoShare (web-based, collaborative prototyping)

Exciting!!!!

Quite good idea

interesting discussion—most of the points are already covered here. Let me try to give my view

Wireframe tools –
PowerPoint
1. Easy to learn and use + very fast
2. Easy for client to give their feedback, just matter of putting some odd shape and writing comments.
3. it allows us to do number of iteration with less effort.
4. Gives different file format
5. Has great linking + animation features

Visio
1. another great tool from MS Box :).
2. great repository of web elements
3. creates great navigation + sitemap
4. 2010 has very good visuals to make high prototype

Sketch Flow
If some one is looking for highly interactive prototyping tool – here is the Sketch Flow[Microsoft Expression’s family]. I am not going into much details.. simply i can say whatever we can think we can do here[http://artsmaths.blogspot.com].

Pencil
lovely cute + free tool with limited features

KeyNotes
recently got a chance to look this, very effective has great visual elements

BEST ONE – completely free + very effective
White Board + Camera