Ralf Kienzler

1.12.2014

Adobe Photoshop as UI design tool, problems and alternatives

"It won't be without reason that probably most people work with Photoshop," I leave in my research in search of alternatives to the old design warhorse Photoshop. An opinion that turned out to be a decisive argument for Photoshop when trying out new design tools. Even though there are less reasons for using Photoshop as an all-round tool than because Adobe's market position makes it extremely difficult for competitors to position themselves against the top dog.

But before that, the question arose as to why a tool that has established itself as the first choice for designers should be replaced. When Photoshop took the stage at the end of the 1980s, it marked the transition from analog image processing to digital. The name refers to this original function, to which the central tools are still optimized. Since user interfaces, to put it extremely crudely, are nothing other than interactive image compositions, Photoshop has established itself in this segment in addition to photo editing. However, apart from the visual aspects, there are other factors that play a role here, to which Photoshop reacts only slowly and has integrated few useful solutions so far.

To name just a few central problems:

  • User interfaces consist of numerous, successive screens that use a common visual language. In order to design them quickly, libraries are required with which elements once defined can be managed and adapted centrally. Despite Smart Objects (a grouping of image elements for recycling) and Styles (a collection of image effects), such libraries are not available in Photoshop or at least not integrated in the files or are very cumbersome. One reason why Adobe reacts so slowly here could be the fear of cannibalizing their own competing products like Indesign. The result: Adjustments have to be made in many places and numerously, which leads to a high expenditure of time and a high error rate.
  • A decisive advantage when designing screens with Photoshop is that the composition is visible at a glance when designing. Smart Objects are edited outside of the design. Therefore the interaction with other elements is only visible after adjustments have been made.
  • Hardly any provider today will rely on just one platform, such as the desktop. Offers must therefore be optimized for numerous devices and resolutions. Responsive Design is not a foreign word at Adobe, but solutions such as Adobe Edge Reflow take place outside Photoshop and are currently still cumbersome and seem unfinished.
  • User interfaces are more than just an interactive poster, that's for sure. The elements vary in content and their position is relative to each other. But Photoshop only allows absolute placements. An adjustment in the upper part of the composition usually leads to extensive corrections in the following image sections.
sketch3screenshot
A promising Photoshop alternative for screen designers: Sketch 3

Competing software companies have recognized these problems and are trying to make life difficult for the overpowering giant with alternatives. On the one hand, there are programs that specialize in screen layout, such as Sketch 3, which tries to meet the requirements of interfaces and ignores traditional image editing functions.

On the other hand, there is a large number of programs today that tend to include software development processes and are often used in an HTML-oriented manner. Examples of a structure-oriented approach are Webflow, Pinegrow und. However, the use of such programs is only worthwhile if the source code is actually used. In terms of design, such programs are cumbersome and not very intuitive.

Screenshot Webflow
Example of a structure-oriented tool for screen design: Webflow

In addition to this, alternatives from our own company should also be mentioned here. In Adobe Illustrator, drafts can be created just as well as with Adobe Indesign. It should be noted, however, that both programs are expert tools, which causes problems for developers, especially in the further processing.

I am currently not able to make a prognosis as to how great the potential of possible alternatives is. Finally, I would like to mention the strengths of Photoshop:

  • Photoshop remains a highly efficient tool in combination with bitmap and vector elements, which makes creative ideas visible quickly and easily.
  • The wide distribution, even among non-professional designers, allows for easy file sharing. Really all designers know the program and can take over started projects. Developers also generally accept Photoshop files and are able to convert designs into source code without measuring.
  • The numerous export possibilities of Photoshop are worth mentioning. Alternatives are mostly limited to PNG and HTML export, Photoshop proves to be highly efficient in combination with other programs.

As a conclusion, I recommend a targeted use of new tools. For example, by precisely defining the files to be transferred for further development, source code generating programs such as Webflow can be used in Responsive Design. In case of an extensive declaration of screens, Sketch 3 would be an appropriate tool to save time-consuming copy&paste.

My biggest wish, however, is that Adobe would open up possibilities in Photoshop itself faster, to meet the not so new requirements with appropriate tools. This is also happening in the beginning, for example with the newly added functions such as Creative Cloud Libraries or external Smart Objects. However, Photoshop is expanding only slowly and the new functions often seem very cumbersome.

Ralf Kienzler

Wizard

rk@coeno.com

Newsletter

Stay up to date!

With the newsletter, which is published 4 times a year, you will receive the latest news from our agency every 3 months. We will not use your e-mail address for any other purposes and you can easily unsubscribe from the newsletter at any time via a link in the mail footer.

Thank you! Your submission has been received!
Oh! Something didn't work. Please try again.