Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have come across a lot of websites and forums talking about creating PSD wireframes which are later used by UI engineers to build the front end. I always thought Illustrator was more suited for wireframing.

share|improve this question
    
add comment

9 Answers

up vote 6 down vote accepted

While illustrator has cleaner lines and may create fine looking wireframes you will not be able to quickly move into designing the UI. But more importantly you should use what ever you can ideate and prototype with quicker and easier. Thats the most important.

share|improve this answer
    
Why do you say one can move easily into designing the UI in Photoshop? Are you specifically talking about the visual elements? –  Viraj Jun 23 '11 at 23:00
    
Yes, specifically the visual elements can be freely modified and styled. In Illustrator those stylings can be limited. –  jonshariat Jun 23 '11 at 23:06
5  
Photoshop versus Illustrator for web design is such a stupid arguement perpetuated by lack of knowledge. Photoshop is great for editing photos. For web design it's extremely limited. Illustrator is great for creating vector art. For web design, it's also limited. That said, I have 5 years experience with Illustrator (and a similar amount of experience with Photoshop) and find it much easier to create layouts in Illustrator, purely because you can move from wireframes to proper UI design easily - read this smashingmagazine.com/2011/01/17/… –  djlumley Jun 24 '11 at 0:50
    
Admittedly, previous versions of Illustrator haven't been as nice for pixel precision, but Photoshop plainly sucks for resizing things and having a fluid workflow - because it's not designed for this type of work. –  djlumley Jun 24 '11 at 0:51
    
+1 for whichever allows you to work quickly and iterate faster. That's the whole point of wireframing. –  Khal Weir Jun 24 '11 at 14:09
add comment

...It depends. If I had to choose between the two, I'd probably recommend whichever tool you knew best, just so you could prototype quickly and hassle-free.

But in certain contexts, a 'realistic' wireframe built by image editor is unsuitable anyway. If you just want to discuss workflows or broad concepts, the extra text and buttons of the real UI could be a distraction. This is especially true if you're speaking to clients, who have (from what I've seen) a bad habit of confusing the prototype with a nearly-released real thing, and get easily sidetracked talking about the trivia ("Ooh, but don't write the label like that...").

Now, you could just be using PS to create an 'abstract' mock-up, but then, why not use a tool like Balsamiq or Mockingbird?

As I said, it depends. I'd really need to know more about your circumstances.

share|improve this answer
    
"Whatever you know best" is probably the way most people do it. If you're used to Photoshop it's going to be quicker even if you have to redo everything from scratch then it will be to learn Illustrator, and vice-versa. –  djlumley Jun 24 '11 at 0:53
    
+1 for Balsamiq. Great tool that lets you concentrate on the UI rather than the details. –  Jonathan Allard May 16 '12 at 18:13
add comment

You should try FireWorks, its best of both worlds Photoshop & Illustrator with little compromises, it is build for Web development.

Here is my flow

Paper Sketch >> FireWorks >> HTML

Don't complicate your building process, keep it light as much as possible till you hit the HTMLs. Fireworks lets you have different states, Master Page, better slice tools. The whole project can be done on one file.

share|improve this answer
1  
If only Adobe would treat FW as a first-class citizen. I don't think there has been a substantial improvement made since about 2002. –  peteorpeter Oct 6 '11 at 18:51
add comment

I'm UXD at Adobe.

Johnathan Shariat is correct, go with whatever is quickest and stay tool agnostic when possible. I would especially encourage sketching or balsamic mockups in order to produce less polished looking wireframes.

The sketchier it is, the more the focus stays on the core concepts and content as opposed to getting entangled in the details or look and feel.

As for our team;

Mostly we use illustrator and omnigraffle for wireframes (with Fireworks and InDesign being used but slightly less common) We also mostly use illustrator for visual design and screen designs / final UI components. Since it's extremely easy to go from wireframe to pixel perfect and reuse components.

It's not ideal, but it most cases it beats the crap out of Photoshop workflow.

Whoever said photoshop was not good for wireframe --> polished screen design should really omit that detail from the answer, it's entirely misleading.

share|improve this answer
    
Great input, an excellent unbiased answer. –  Ben Brocka Apr 30 '12 at 16:58
add comment

Its pretty simple to answer this question very accurately. There is a continuum that each stage sits on, and it has a relevant 'best' software package to use.

Conceptual > structural > prototype > actual UI

depending where you are in this process dictates what you use. A few of the commenters speak about easy of jumping into the final UI, but you may only consider this a plus if you are very close to the end of the process.

Here are the corresponding software packages (which follow a similar number of stages but are more fluid.

Illustrator > Balsamiq/Mockingbird/Visio etc > Photoshop [Conceptual > structural > prototype > actual UI]

I have ordered the software to align to the function that they can complete the quickest, and most efficiently. Of course you could use Photoshop for designing the structure, but why do yo need all that visual, power, and little organizing power at that stage?

share|improve this answer
1  
You can use Illustrator or Photoshop for all of stages you listed. Just because you use Photoshop, it doesn't mean you're implementing the final graphical designs with it. Balsamiq is a much better tool for conceptual/wireframe design. –  Jin Jun 26 '11 at 3:59
add comment

I switched from Photoshop and Illustrator to Balsamiq more than 3 years ago and have never looked back.

It's impossible for me to imagine a more efficient way to create wireframes.

I tried Fireworks and Omnigraffle as well, but Balsamiq is the best.

share|improve this answer
add comment

In general we use,

Photoshop for, Photo enhancement , Photo color correction ,Software/Web/Mobile UI design. most of our designers is familiar with Photoshop.

share|improve this answer
    
See my comment @jonshariat. Photoshop is only used for software/mobile/web ui design because that's what people are familiar with, or because they've been told it's the best. In reality, Photoshop is not notably superior to Illustrator in any way for this type of work, and is inferior in many cases. Fireworks is useful too, as is InDesign. Making broad sweeping statements like you have are bad, and lead people to using Photoshop for tasks where it's workflow may not be optimal and another program might be better equipped. –  djlumley Jun 24 '11 at 4:33
    
ok thanks for the suggestion. –  pir abdul wakeel Jun 24 '11 at 4:44
    
you are right @djlumley, i have change my answer. –  pir abdul wakeel Jun 24 '11 at 5:17
    
I do agree with you about colour correction and photo enhancement though, Photoshop is really the best program for that sort of thing :) –  djlumley Jun 24 '11 at 5:35
add comment

I've used Illustrator, Photoshop and Omnigraffle for wireframing. However recently I came across using keynote for wireframing. In keynote you can have click states and animations that resemble what the user will experience.

Here are a few sites that have info and templates if you are interested.

http://keynotopia.com/themes/

http://keynotekungfu.com/

You should also check out Axure for interactive wireframing

http://www.axure.com/

share|improve this answer
add comment

I guess it depends on the requirements and skills of your organisation. My personal experience would be neither. I would use a tool specifically designed for wireframing/prototyping.

Omingraffle/Axure are popular desktop based solutions. Focussing more on prototyping than just wireframing but are pretty powerful. Personally I find the learning curve a little high for Axure when used for anything but basic click through wireframes.

Visio is a good starting point if all you require is static wireframes. It has a decent enough templating engine built in.

Personally I find the ability to rapidly iterate wireframes/prototypes useful and would go for a web based tool such as: Hotgloo/Balsamiq/Gliffy/mockingbird.

Moving away from wireframes and towards prototyping: If you need richer functionality and have the skills I would consider using a framework such as Bootstrap to develop a HTML/CSS/Javascript prototype.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.