Beyond Photoshop: Finding the Perfect Design Tool

The market of applications to design user interfaces is a bit more crowded than it was just a few years ago. As a consequence, designers are expecting more from the software programs they buy, and they are starting to question if the tools they have been using for years are the right ones today. In this article, we will see together what the market has to offer. We’ll even try to find a solution that can help the UI designer sleep at night.

When you work on a daily basis with a specific software, you get used to its imperfections. I'm sure you can relate to this feeling around Photoshop: if the design community keeps sharing .psd files, if your clients keep asking for Photoshop sources, if you’re sharing hundreds of .psd files with the developers of your team, etc, how can you doubt the most popular Adobe product? A lot of UI designers use Photoshop’s brother program, Fireworks, to design their projects. That makes a lot of sense considering that, according to Adobe, Fireworks is the tool “to create beautiful designs for websites and mobile apps in a snap.” There are tons of other designers who work almost exclusively in Illustrator, not just to create icons and logos but to design entire interfaces. It's been like this since I started this career. Each designer found his own harmony in choosing his favorite Adobe tools. Adobe still is the leader of the creative tools market, though these days we see the spreading of discussions about why something has to change. What caused designers to become aware of a lack in products offering? In my opinion, there are three main events that caused this mindset shift:

1. Adobe decided not to include Fireworks in the huge Creative CC update

Fireworks, the software created specifically to help designers realize user interfaces, will no longer be supported by its creators. Even though this is an unexpected and disappointing surprise, Fireworks fans should move forward and start looking for alternatives. Designers can choose to continue to work in Fireworks for years to come, but how can they rely on a product that Adobe doesn't consider worth updating? With the design software world evolving daily, I hardly think this is a realistic approach. All in all, the Fireworks “abandon” was Adobe's first strike.

2. Responsive design

Since I’m not a Fireworks user, Adobe's decision not to update Photoshop’s brother didn’t bother me. But the necessity to make design responsive made me think a lot. CSS3 is allowing front-end developers to design most elements in the browser, freeing designers from the need to export a lot of .png images. As a result of Responsive design and the evolution of CSS, designs started to become more and more minimal, and the Flat design style arose. The designer starts to realize he’s using less and less Photoshop features. Less textures, patterns, and brushes (and of course, all those features for photo editing, which makes up about 60% of the software).

3. The new MacBook Pro with retina display

We imagine in the upcoming years more and more high-resolution displays will populate our houses and offices. As a designer, opening an old 1200 pixels wide Photoshop document with the new retina MacBook Pro results in a document half the size, making it too compressed to work with. We may think: “OK, just double the size of the document, then, when you’ve finished, down-size it again”, but that approach doesn’t work well with images, textures, and in general, with every raster file. Are we Photoshop users just going to design everything at double size while working with high-res displays? I don’t think this can be a long term solution. I think you'll agree that it feels weird that the button I’m designing in Photoshop is 600 by 200 pixels, while the developers will ultimately have to make it 300 by 100 pixels.

---

The Photoshop user can’t turn a blind eye anymore. We pushed Photoshop beyond its limits. Designers' feature requests caused the Adobe team to add more UI features to the Creative Cloud package. The new Generator was created by Adobe, allowing for ease of image editing, vector work, and even smoothly exporting images. But what about Photoshop's video features and the 3D capabilities? They don’t sound UI design related to me. Is Photoshop still the best solution for a design tool? Or, after all of the years we've dedicated to working with this program, are we just holding onto it for nostalgia's sake?

What are the alternatives?

As anticipated in the intro, we're going to discuss how the market is working to offer new tools to the modern UI designer. First of all, I’d like to introduce Sketch by Bohemian Coding (Mac only). We already talked about Sketch before. Since then, the last update (version 2.3) was a huge improvement. Different from Photoshop, this application is focused entirely on UI design, and this is its real strength. The Bohemian Coding team works exclusively on features that will make UI designers' lives easier. We don’t expect to see video editing or 3D graphics features here. Since everything is vector based in this program, Sketch is a great tool for retina users. You can:

• Create multiple pages
• Create vector icons with boolean operations
• Add styles just like in CSS3 (i.e. infinite shadows)
• Link styles and create guides on the fly

Also, the price of the software is affordable at $49.99. You can learn more about Sketch in this article by Jean-Marc Denis or try it yourself by downloading the free trial. Another application to look at is MACAW. It hasn't been released yet, but it should be available in the App store soon. What I love about MACAW is the idea behind the tool: being web responsive, it lets you design and code at the same time! I can’t tell more because I didn’t try it yet, but check out the video presentation: it seems exciting, doesn’t it? Another upcoming product to follow is NoFlo. Recently funded on Kickstarter (over $100K!), NoFlo's main point is that Photoshop isn’t really THE design tool, but a communication one. NoFlo can’t replace Photoshop at all since it’s based on flow-based programming language that lets you translate the logic of web project into a graph. However, it can make UI designers re-think what the final purpose is of our job: making user experience better. At least we could re-think our workflow: we need a visual control on our projects. Photoshop or its alternatives would just become tools to represent that visual flow.

Conclusion

So what now? Should we keep using Photoshop, should we use Sketch, should we stick with Fireworks, or should we wait for something new to come? Well, there’s no magic solution here, and we are all on the same boat. While there's no perfect tool for UI designers, there are better and worse workflows. I’m currently using Sketch as main tool for mocking-up my designs, but I still need Photoshop for photo-editing, realizing patterns, and for a lot of other design processes. I’m using both Illustrator and Sketch for creating icons and logos, depending on their complexity. I can’t wait to try NoFlo and MACAW, too! My advice is: try the new tools the market has to offer. If you still feel like Photoshop is your cup of tea, stick with it. If you think it’s time for a change, it doesn’t matter how many years you spent on the Adobe suite; I encourage you to try something new. The best solution may be a combination of tools, not just one. What matters most is the logic behind our projects. The tools we choose to use don't affect our end-users, as long as we provide them with a great web experience. What programs are you using for UI design?