4

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.

Improve this question
1

9 Answers 9

Reset to default
9

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.

Improve this answer
6
  • 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, 2011 at 23:00
  • Yes, specifically the visual elements can be freely modified and styled. In Illustrator those stylings can be limited.
    – jonshariat
    Jun 23, 2011 at 23:06
  • 7
    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, 2011 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, 2011 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, 2011 at 14:09
7

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.

Improve this answer
1
  • 2
    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, 2011 at 18:51
6

...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.

Improve this answer
2
  • "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, 2011 at 0:53
  • +1 for Balsamiq. Great tool that lets you concentrate on the UI rather than the details.
    – Jonathan Allard
    May 16, 2012 at 18:13
5

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.

Improve this answer
1
  • Great input, an excellent unbiased answer.
    – Ben Brocka
    Apr 30, 2012 at 16:58
1

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?

Improve this answer
1
  • 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, 2011 at 3:59
1

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.

Improve this answer
0

In general we use,

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

Improve this answer
3
  • 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, 2011 at 4:33
  • you are right @djlumley, i have change my answer.
    – Pir Abdul
    Jun 24, 2011 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, 2011 at 5:35
0

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/

Improve this answer
0

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.

Improve this answer

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