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.
closed as primarily opinion-based by JonW♦ Jun 8 '17 at 8:19
Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.
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.
...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.
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.
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.
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?
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.
In general we use,
Photoshop for, Photo enhancement , Photo color correction ,Software/Web/Mobile UI design. most of our designers is familiar with Photoshop.
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.
You should also check out Axure for interactive wireframing
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.