How can I as a Front End Web Developer take advantage of tools like Photoshop?

So quite often I read that using Photoshop or something equal as a Web Developer can help a lot in actually making a concept of the Page and or moving stuff around more quickly to see how it looks, but I cant imagine that this works because you cant have the Interactions and look of a Website 1:1 in Photoshop with the same Feel for the look.

But im interested in learning new Stuff which helps me improving and in my current Project where im the Solo Dev + “Designer” its the perfect time to move and learn new stuff which helps me to be more efficient in the future.

How can I learn good PS habits to be actually time efficient when making a Website and is the time to learn it even worth it?


I think you asked this question like ~10 years too late. Sort of… Then the answer would’ve been “absolutely”. Now websites are responsive and there are more options out there. Photoshop is still being used, but in ye olden days the full design was be made in PS and then manually converted into code. This was a really good way to do it back then.

These days a lot of designers use PS (or other photo editing applications) in the workflow sort of like you would in print design: for photo editing or graphics that are easier to do in PS. Or more specifically in the case of web design, things that are impossible to do using CSS. Illustrator may serve a similar purpose in the workflow if the need is vectors.

A lot of designers have moved over to other applications like Adobe XD, Sketch, Figma and Webflow.

All of these are aimed towards website/app design and therefore have varying degrees of awesome “new” functionality that makes life a lot easier. Things like: content aware auto resize, tools for building responsive designs, interactive prototypes, collaboration, sharing, global swatches, etc…

Out of all of these apps I mentioned, I would say Webflow is the most… technical. You’re essentially coding a website by dragging and dropping elements and dragging sliders without writing any code. You need to know how to code or at least there are some key points that, if you get wrong, will break the design. Like if you position everything using absolute positioning, responsive is going to fail hard. The other apps are more… designer oriented.

I’ve used all of these apps I mentioned and I still use PS and AI for asset creation. Though sometimes I still just use PS for everything.

On the surface level, it’s way faster to use PS to design something than by hand coding it. I don’t know if I can answer if it’s worth it for you to learn PS, but If you design things by coding them by hand, PS or some other app would likely speed up that workflow. A design application allows me to try new things more easily. Coding by hand can involve problem solving that takes a lot of time.

Source : Link , Question Author : Badgy , Answer Author : Joonas

Leave a Comment