10 reasons NOT to use Photoshop for web design

Over the past few years, I have noticed that despite the presence of many modern web design tools, there are still people who consider Photoshop to be a good tool for web design. Understandably, among people who are not involved in the industry, there are those who think that designing a website boils down to preparing static graphics that later become interactive with the help of a programmer. Of course, this is possible because this is how websites used to be created. Nowadays, websites are created completely differently, mainly due to responsiveness and many other new standards.

Photoshop is still a great tool for photo editing or photomontage. It is a powerful graphic tool, but it does not quite meet the requirements of modern web technologies. In this article, I'll try to outline 10 reasons why Photoshop is dead as a web design tool, and I'll present some tools that are worth looking into.

This is not only an outdated approach, but a very bad practice

Photoshop was every web designer's first choice - well, it was.... in 2003. Back then, everything was fine because you could immediately see what a website would look like. All you had to do was cut the graphics into pieces and glue the images together using HTML and CSS. Responsiveness was practically non-existent; at the time, so-called mobile versions were created, i.e. separate websites for mobile devices, so websites were usually created for a single screen resolution.

We are seeing an increasing share of mobile devices in web traffic, so responsiveness is an obvious direction. It is not only web applications that require responsive design, but also mobile applications, or applications for TVs and other devices. The number of different devices and their diverse range of sizes and resolutions mean that one image in Photoshop is not enough to talk about responsive interface design.  

There are many applications on the market for mock-ups and prototyping responsive applications, such as Figma, Adobe XD or Sketch, for example. Even Adobe has a programme on offer that excludes Photoshop as an interface design tool.

Why not use Photoshop for web design?

1. There are better tools than Photoshop

Photoshop was not created as a tool for web design, but for photo editing. Of course, it was once used for this very purpose, but it is worth pointing out that these were times when responsiveness was not as important as it is today.

The presence of modern tools created for the design of graphic interfaces, their ease of use and compatibility with web standards is, in my opinion, a sufficient argument to use it. Therefore, referring to the disadvantages of Photoshop, we will compare it with the following tools:

• Figma
• Adobe XD
• Sketch

2. Photoshop "does not speak the language of the internet".

When preparing a graphic in Photoshop, we get a static view image for a particular resolution. We can approach something like this in two ways. The first is, of course, to cut and create a website that is not responsive. The second way is to create a website that is correct. This way will involve painstakingly extracting various values from the PSD file (which are not necessarily directly usable) and recreating the design using HTML and CSS, and then trying to give responsiveness that is not apparent from the design itself.

A correctly created website is a collection of information describing its appearance. Web pages are rendered by browsers based on this information and adapted to the device. In order to create a responsive website, you need to make a skeleton (DOM) using HTML and describe its external appearance using CSS. Each element has information about its shape, colour, position. The properties with which one element can be described are hundreds. All filters, masks, shadows, gradients and much more must be described using CSS.

Based on this information, the browser renders the web page in a vector way, so that the page is of high quality and loads faster than elements made as raster graphics.

3. Difficult to export assets from Photoshop

To extract an image, icon or other graphic element from a PSD file takes many clicks and settings in dialogues to do so. Photoshop is designed for image editing, so a single image will be the result of a single PSD file. You can, on the other hand, extract individual layers from it, but this is not as easy as in interface design programmes such as Figma, where it only takes two clicks to export a ready-to-use element.

In addition to graphical elements, programmes designed for interface design allow the export of the CSS code of individual elements, so that well-designed elements will automatically be responsive.

4. No prototyping capabilities in Photoshop

Photoshop natively does not have any tools to create an interactive prototype even before the developer has started. The ability to prototype allows designers to design not only the look and feel of a website, but also how it works. When creating web applications, it is not only responsiveness that matters, but also responsiveness. Responsiveness means that the user, when interacting with the interface, immediately sees the effect of his or her action, receiving a completely different experience than if the page were to reload with every click.

Current technologies give us the ability to create interfaces that asynchronously exchange information with the server, so that when a button is clicked, there is no need to wait for the page to reload. By performing an action, the content on the screen changes, not the whole page.

5. poor vector management in Photoshop

Vector design is the primary way to create responsive websites. If anyone has worked with programs such as Adobe Illustrator, they understand how counterintuitive the vector tools in Photoshop are. The user has very limited options when it comes to what can be done with vector elements in a project in Photoshop.

All applications designed for graphic interface design are based on vector graphics, which means that the result of the work is bound to be responsive and of high quality.

6. A design made in Photoshop is not responsive

To talk about responsive design, the design must react to changes in screen resolution and adapt to it. In interface design software, there are various tools that allow us to create layouts in which elements automatically arrange themselves to the area in which they are located. By manipulating the dimensions of this area, we can observe how individual elements arrange themselves or change their size.

These techniques correspond to those used when creating web pages, such as flex or grid. This is an example of how well these tools 'understand' the idea of creating responsive layouts.

7. There are no components in Photoshop

Components are elements that can be created once and then used freely in a project. When needed, they can be changed at will and their instances will also change, without having to fix all instances of the component in the project.

The idea of creating components is something that is taken for granted when developing web or mobile applications. It is the basis of the DRY (Don't Repeat Yourself) rule. The ability to create components is provided by virtually any programme such as Figma or Adobe XD.

8. Photoshop is slow

It's not just a lack of components that can make a project take longer to complete. Photoshop was created as an image editing tool, so it comes with a huge number of tools to do this. These tools are mostly not needed for web design. This translates into its performance, as it needs a lot more computer resources to work.

The web design tools have exactly as much as is needed for their task, so they are light and fast.

9. Working in Photoshop costs more

Photoshop is a heavy, feature-laden photo editing tool, and consequently its price tag is much higher than that of lightweight tools for created interface design.