10

I've used Photoshop extensively, but the fact of the matter is that it's a photo editing tool. It has some complicated effects built in, such as the drop shadow and inner and outer glows etc., but it just isn't enough when designing a graphical interface. You can't add multiple editable gradients, for example. And you have to trick the tools into pulling off the effect you want, when they weren't designed for that.

I've also started using Fireworks, and there's a few things I like, such as being able to keep changing the curves on a rounded rectangle, but the color picker in that program just isn't usable. When you go into the mac color picker, it says the color is something different to what it is, due to Fireworks not handling color profiles correctly. This makes adjusting colors a very difficult process. And the software as a whole feels like a pre-release version (and maybe it should be).

So, I'm wondering what software everyone would recommend for creating a GUI? There must be some software out there which allows you to have a range of editable effects which you can change, change the order of, move around at any time, along with all the other tools required to create great graphics.

Improve this question
1
  • Based on all the answers here, we need you to clarify the question. I believe you are asking for software to create the actual GUI elements...icons, buttons, etc. Or are you asking about wireframing?
    – DA01
    Feb 13, 2012 at 4:11

5 Answers 5

Reset to default
7

There is no universal "best" software for GUI design. It just depends on your software/workflow preferences.

Photoshop

I'm not sure what you mean by "multiple editable gradients", but if you know what you're doing, Photoshop provides all the tools you need to design any GUI you can imagine. No "tricking" of tools needed.

Despite its name, Photoshop has evolved far beyond being a simple photo-editing/manipulation tool, and there's no reason why you can't do GUI design in it. Photoshop probably provides the most comprehensive set of raster image editing tools of any graphics program on the market, and it's used for everything from digital painting to comic book coloring to illustration to web and UI design to video production and creating 3D game art to even photo forensics.

Features like adjustment masks, layer styles, vector paths, smart objects, layer comps, etc. make it a natural choice for UI design for those already familiar with its interface and deep featureset. Another plus is that it's well integrated with tools like Illustrator, Flash Catalyst, and many 3rd party apps/plugins.

Fireworks

Many people prefer Fireworks for web design as that's what it was specifically designed for, and for this reason it's also a good tool for GUI design. Being object-oriented and supporting pages, symbols, and styles, Fireworks lends itself very well to a UX design workflow. A lot of people also find Fireworks gives them better pixel-perfect control without resorting to rulers, guides or measuring tools.

Additionally, Fireworks has a lot of nice features like gradient dithering, ASE swatches, and in some ways better typography control than Photoshop. Fireworks' web layer and its integration with Adobe's Device Central also makes it easy to rapid prototype for multiple devices.

Illustrator

Another popular app amongst UX designers is Illustrator, which shares a lot of strengths with Fireworks. Like Fireworks, it supports symbols, advanced object styles, multiple artboards (similar to pages) and even better vector editing facilities.

Photoshop, Fireworks, Illustrator, as well as InDesign, all have wireframe/stencil kits and UX templates available for them on the web, but modular UX design is easier in Illustrator and Fireworks because of their support for reusable symbol libraries.

Illustrator also supports character and paragraph styles, making its typography design features far superior to either Photoshop or Fireworks. Additionally, Illustrator is great for illustration, so any icons or web graphics you might want to create can be made in the same program.

InDesign

InDesign is another very popular app amongst IAs, IxDs, etc. Its graphic design facilities may be limited, but its support for pages, paragraph and character styles, snippets and object libraries make it ideal for a lot of UX design tasks. InDesign also has very advanced typesetting facilities and supports grid layouts. This, along with InCopy integration and Adobe Digital Publishing Suite make it a natural choice for print media companies looking to design mobile apps for their magazines.

But at the end of the day, every tool has its strengths and its weaknesses. The most UX-specific apps like Axure, Balsamiq, OmniGraffle, etc. have a lot of great UX-specific features for layout/wireframe/interaction design. But at the end of the day, you still need to actually design the graphics for the UI, which graphic design tools like Photoshop/Fireworks/Illustrator are needed for.

That's why most UI design workflows include more than one app. So unless you're only concerned with a single part of the UI design process, e.g. wireframing or building the UX library or prototyping, then there isn't going to be a single "best software".

Improve this answer
2

Pencil is a small and easy to use GUI design tool.

Top features:
Built-in stencils for diagraming and prototyping
Multi-page document with background page
Inter-page linkings!
On-screen text editing with rich-text supports
Exporting to HTML, PNG, Openoffice.org document, Word document and PDF.
Undo/redo supports
Installing user-defined stencils and templates
Standard drawing operations: aligning, z-ordering, scaling, rotating...
Cross-platforms
Adding external objects
Personal Collection
Clipart Browser
Object snapping
Sketchy Stencil
And much more...

enter image description here

Improve this answer
1
  • It's a nice wireframing tool, but I think the OP was looking for a graphic editing tool.
    – DA01
    Feb 13, 2012 at 4:10
1

Where I work we use Indesign. We tend to create clean grid-based layouts with careful typographic styles, and for those Indesign is great. It has fine control on character, paragraph and object styles, which translates well to CSS and allows for fine tuning these elements at any point in the process, as well as permitting a more coherent layout. It isn't so great when exporting graphic elements, but we find the trade off worth it.

Improve this answer
1

One of the most unexpected GUI prototyping tools is actually Keynote. I know quite a few top-notch UI designers who swear by it, and Keynotopia is a fantastic resource for using Keynote this way. If I hadn't seen it being used so effectively, I probably wouldn't have believed it, but it does work pretty well. If you're on a Mac, try it out!

Improve this answer
0

I'm working at Pidoco.

With our prototyping tools you can develop prototypes for Website, mobile App or Software. You can simulate the mockup directly on a desktop, a smartphone or a tablet by using the free Pidoco App from the AppStore and from Google Play.

Key features ares:

  • Real time collaboration
  • Export to HTML, PDF, Word, PNG, SVG
  • A lot of stencils
  • Templates
  • Custom stencils
  • SaaS so you can use it from any browser
Improve this answer
1
  • 2
    Please don't promote your company on every question asking about wireframing. Though thank you for being open that you are an employee there.
    – DA01
    Jun 23, 2014 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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