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?

  • It takes 20 minites to learn so not really all that much of a time investment.
    – joojaa
    Oct 16 '18 at 12:34
  • Personally speaking, I'd say that Photoshop is total overkill, and so complex that it really just gets in the way when trying to us it for "making a concept of the Page and or moving stuff around more quickly to see how it looks". Use Adobe XD instead. It's much simpler. If you have a CC account, you already have access to Adobe XD.
    – Billy Kerr
    Oct 16 '18 at 15:37
  • @BillyKerr Yes thanks Adobe XD looks perfect, I also saw that its free now?
    – Badgy
    Oct 17 '18 at 5:31
  • @Badgy - no, it's part of Adobe's Creative Cloud, and that certainly isn't free.
    – Billy Kerr
    Oct 17 '18 at 22:17
  • 1
    @BillyKerr, yea I like crayons. No judging please.
    – Joonas
    Oct 18 '18 at 8:55

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.

  • Add also Affinity Designer to that stack - like Sketch it has good interactivity and mockup sharing tools. So far myself I now prefer to use either Sketch or Affinity. Oct 16 '18 at 15:14

I still do not understand why people use PhotoUseItForWhateverShop. There is a lot of questions people using it wrong, rasterizing assets, using a wrong resolution, flattening stuff, etc.

In my opinion, this part should be made in a vector based program. Illustrator, Corel Draw, Affinity Design, even on Inkscape.

The advantages are that you have resolution independent assets in many regards.

The problem is: People actually use PhotoShop to do this. So you have to deal with it.

But I think we do not have the same concept when you say "concept of the Page".

One step is the layout, the first step. This first step has nothing to do with interaction. That is an additional step.

As a developer, you are probably used to just pull a Script and paste it on the spot. That will not happen with PS.

How can I learn good PS habits to be actually time efficient when making a Website

Ok, this is too board. My answer would be... Put simple objectives and practice. But the problem I see is that I really do not know if you have a clear concept of "design". Is design simply move boxes around? Or you want to explore different treatments of images and spaces to mean something an solve a communication problem.

And is the time to learn it even worth it?

Probably yes... That is why there are zillions of tutorials and users... using it right way or wrong way but that is another issue.

where I'm the Solo Dev + "Designer" its the perfect time to move and learn new stuff which helps me to be more efficient in the future.

A more efficient way could be not working alone. I think you want to live in your own echo chamber. If you are working alone, it really does not matter what you use. I would look for some other tools as Joonas commented.

Tools are always evolving, so again Is the time to learn it even worth it? PS or any other tool. I say yes.

Not the answer you're looking for? Browse other questions tagged or ask your own question.