>>Moving divs around, adjusting CSS or erasing pencil off a piece of paper is never going to be as efficient as clicking on a layer and moving, resizing it, etc.
As a visual designer and front-end developer (that knows Photoshop very well), code is actually far more efficient for modern UI's. It's much better organized than the PS layer model, CSS gives you tremendous reach with your changes (especially with SASS/LESS), and Developer Tools (or Firebug) give you amazing reactivity.
However, that being said, the designer must have both design skills and coding skills, which aren't, and shouldn't both be a requirement for the position. The most creative and best graphic designers tend to not know code well enough to become more efficient with it than their traditional layout tools.
The best middle ground for "thinking for UI" and quality graphic design is Sketch. Sketch eliminates 80% of the stuff you never use in PS for web design and adds the features you didn't know you wanted. Its styling options reflect the styling options of CSS. I can't recommend it highly enough.
Honestly, unless you have some very complex personnel issues, every web designer should be using Sketch over Photoshop (and maybe use Photoshop for image manipulation).
I LOVE Sketch. It's so good. What's lacking are proper video tutorials for complex things and different subjects. I'd love to see an hour long video of someone vectoring something or designing a mobile app from start to finish.
Started using Sketch a few weeks back, never went back to Photoshop.
When I design, I usually just have livereload running with my website on my right monitor and code in my left. Ctrl+S = refreshes the site = very easy to develop with just html/css.
I agree with most of your points except this:
>>Moving divs around, adjusting CSS or erasing pencil off a piece of paper is never going to be as efficient as clicking on a layer and moving, resizing it, etc.
As a visual designer and front-end developer (that knows Photoshop very well), code is actually far more efficient for modern UI's. It's much better organized than the PS layer model, CSS gives you tremendous reach with your changes (especially with SASS/LESS), and Developer Tools (or Firebug) give you amazing reactivity.
However, that being said, the designer must have both design skills and coding skills, which aren't, and shouldn't both be a requirement for the position. The most creative and best graphic designers tend to not know code well enough to become more efficient with it than their traditional layout tools.
The best middle ground for "thinking for UI" and quality graphic design is Sketch. Sketch eliminates 80% of the stuff you never use in PS for web design and adds the features you didn't know you wanted. Its styling options reflect the styling options of CSS. I can't recommend it highly enough.
Honestly, unless you have some very complex personnel issues, every web designer should be using Sketch over Photoshop (and maybe use Photoshop for image manipulation).