Designers read this and developers will love you

I've given thought in the past to a hypothetical tool that I'd love to see that does a lot of what Photoshop does. It would use a nested plaintext file structure, letting it work with a version control tool (imagine being able to diff two PSDs and know that all that changed was a label value, or a single layer being removed, rather than it being a completely opaque binary change?). It would effectively provide direct access to the advanced features of CSS, only with a nicer UI. It could be built to allow testing responsive layouts all within a single document. All this and more. It'd be great.

But designers wouldn't want to use it. It wouldn't be grounded in their essentially visual workflow. Sure, you could have intermediaries translate documents between the visual and the quasi-layout-based, but that's even more work than just having designers adopt better practices. What's more, these practices don't just benefit developers: it'll make life easier for designers too! That's what makes it such a no-brainer. Sure, some lazy or precious designers might object to being told how to do their job (nobody appreciates being told they're doing things wrong), but if you introduce these practices gently I'm sure they'll pay off.

• Organising files = project structure

• Resource & layer naming = variable naming

• Using templates & sharing common elements = DRY

• Keeping vectors when rasterising = keeping source code when compiling

• Minimising filters, blending modes, colour overlays, etc. = KISS

• Grid = idioms and “design patterns”

• Understanding licensing = understanding licensing

• Proofreading = code review

• Browser compatibility = platform compatibility

• Conservation of file sizes = consideration of performance

Sadly.

The best tool, that I am aware of, that is along the lines of what you describe is Fireworks. But Photoshop is more common simply because for the longest time it was far easier to obtain Photoshop than Fireworks in a suite from Adobe. For instance, right now there are five different Creative Suites and a version of Photoshop is in every one. Fireworks is in three. Therefore, in a big enough company with various people with various production needs you could assume that everyone has Photoshop. Thus, trading files in PSD is the norm. Also, I'm willing to bet most schools have a course in Photoshop but not in Fireworks.

Plus Fireworks didn't come into it's own as a HTML and prototyping tool until recently, I don't remember the version. These days it's a wonderful tool to design graphics for just about any device and I highly recommend it. But if you've been using Photoshop expect a slight learning curve since it is different.

Do I use Fireworks? Nope, much for the reasons stated above.

Does Fireworks address the developer part you mentioned? Possibly not, it just depends. Mainly because you don't really "code" in Fireworks. I'm not aware of any tool that allows a designer to create graphics and a developer to code for the same project. Usually that's broken up between software packages with different expectations, feature sets, and goals.

Now, a software tool that allowed designers to design and coders to code in the same file that outputted valid HTML (maybe even some server-side code) would be interesting. But I think it would just generate new issues to work out as opposed to solving current workflow problems.

I think it would be better for designers to learn HTML and CSS, the basics at least. Of course in my experience the same could be said of server-side developers. As a front-end developer I'm constantly amazed at the oddities I see being stuck in the middle of the design/front-end/server-side dynamic. But sometimes it makes things fun.

But anyway, that's a thing between designers, and we're talking about designer vs. developers.

The other difference is that in Photoshop you can easily find layer by using Move tool and CMD+clicking on the picture. And you can find text layers with Text tool.