News

In this article I'd like to share my thoughts about the necessary tools in my work, how I use them and see how they've developed during the past years.

It all began with Photoshop

In the good old days every designer had to be familiar with Photoshop when they started working in the web design industry. Even when at a later stage some early prototyping tools started to appear, for almost two decades Photoshop was “the tool” to use when you want professional UI design. It provided unlimited freedom to create sophisticated interfaces – from the simplest icons and pop-ups to the detailed hero banners with ads and promos. It worked fine as a design tool, but there were few major drawbacks that all web companies and designers had to accept unwillingly – it was expensive, its interface was heavy and overwhelming while you basically used less than 10% of its options for your everyday UI/UX work. Not to mention how difficult it was for the front-end developers who had to learn to use Photoshop and all its complicated options in order to slice a simple web design into markup.

The era of the prototyping tools

There were some prototyping tools during the “reign” of Photoshop, such as Sketch, which was launched in 2010, although being an iOS tool only tool is a bit limiting. For me, personally, the big change came after 2016 with the launch of Adobe XD and Figma. I have to admit that I was skeptical about prototyping tools in general back then and I was an avid supporter of Photoshop. In the first couple of years I've ignored Adobe XD as a viable option for UI and web design – for me it was simply an UX wireframing tool. After some time I decided to give it a chance and I've realised how much I needed such a tool in my work. The first thing I noticed was the drastic difference in the interface. It was so simple, compared to Photoshop, that at first I had doubts that I'll be able to create an actual, complete UI design with it. It was difficult to adjust to not being able to edit every single detail, but then I've realised that I have all essential tools I need for creating the layout and it's not necessary to have a full arsenal of image retouching options while thinking about the UI. It might sound like a teleshop commercial, but I was truly amazed how I was able to create a website's homepage layout, both desktop and mobile for less than 1/3 of the time it would've taken to do it in Photoshop. Bear in mind that I wasn't familiar with Adobe XD's interface at all.

I’ve also had the chance to try out Figma in a few projects and I’m truly impressed with it. Its browser app is light, quick and I love some of the clever features it’s got, such as the Inspect sidebar widget where you can directly preview the CSS properties of an element or the live collaboration, where you can edit a layout with your colleagues, by seeing each other’s cursor in real time.

The other groundbreaking advantage of the prototyping software is the ease of use for people who are not graphic designers. Any front-end developer would love the simple interface, since they no longer need to “slice” an overcomplicated image of the design. In a prototyping tool they can quickly export images, icons, texts and inspect an element’s properties with a single click, making it easier for them to focus on building the HTML/CSS, instead of fighting with image editing interfaces, like it was in Photoshop. This ease of use speeds up the design process and the interaction with the clients significantly which is of utter importance for every web design company.

So is this the end of Photoshop in web design?

I dare to say we are about to see a generation of web designers who haven't even used Photoshop in their careers. Although many web development companies might not need Photoshop on their computers, it'll always be needed for the professional web designer. The fact is that the modern designs are getting cleaner and almost 90% of the elements are either pure CSS3 or SVG/PNG graphics and imagery, but there are still 10% for sophisticated interfaces with complicated graphics that need to be sliced or banner images that need to be created in a full-scale image creation software, such as Photoshop.