3 ms·

I love this manifesto. BUT. This reminds me of a problem I've pondered for a long time now, without coming up with an answer. Why are web pages designed with P

I love this manifesto. BUT. This reminds me of a problem I've pondered for a long time now, without coming up with an answer. Why are web pages designed with Photoshop in the first place? Photoshop was never meant to be used for web design, any more than Visio was meant to make wireframes. It's simply the best tool available for the job, and requires a lot of workarounds and good behavior on the part of the designer. Spending days or even weeks designing Photoshop comps that then have to be cut up, converted, and manually translated into suitable graphics for coders to work with is inefficient, and often leads to final products that don't match the designer's work. Text is the most obvious example, but I'm sure anyone can think of myriad places where this happens. Is there a tool that lets designers think about the structure coders will have to build WHILE they're designing the screens? I'm not talking about a WYSIWYG code generator—those have been tried over and over again, and they all suck. I'm talking about a tool that lets designers design, lets coders code, but helps the designer think about what the coder will have to do with the graphics, including keeping text as text, identifying UI elements that need to be reused, seeing how layouts will look when the browser resizes, etc. If this tool doesn't exist, it sure would be a great project for someone to build.

chrislomax 15y ago
Now I am going to get killed for saying this but it's almost like you are referring to Microsoft Expression Web or something to that effect. When we were doing work in Silverlight (god rest its soul), there was the facility to have designers working on the design and developers working on the code. Now, what you are referring to may be the actual Expression Web product they offer. I don't know, but it sounds very familiar to the Silverlight version. No, I am not suggesting everyone moves to PC to use this software, I am just bringing to light the possibility the software may already exist! We personally have no issue mocking up our sites in Photoshop then them being sent over to the developers to be sliced and used. We have never really felt this process to be in-efficient either. I think so long as the designer has a clear understanding about what the developers need then it's fine. When you have print designers getting used to web development for the first time, that's when you have problems.
kapowaz 15y ago
I would love for this hypothetical tool to exist, but the problem doesn't lie with the tool, but that you're talking about essentially different workflows. Designers tend to use the tools that they're most familiar with, that give them what they need. Usually that means Illustrator + Photoshop (or sometimes, Fireworks). 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.
talmand 15y ago
I'll take a stab at this. 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.
feverishaaron 15y ago
Note to interested developers... there is a HUGE market for a disruptive tool in this space. If anyone is interested in working on such a tool, I'm game. This is a constant frustration for web designers. Photoshop allows you to create fantastic visual effects, but the layout tools are abysmal. Fireworks is well... Fireworks – Adobe's "redheaded stepchild" in the tool chain. It's buggy with a slow, horrible UI. While some of Fireworks tools solve some of the layout problems (nine slice scaling, better vectors, grouping), their lack of decent masking and the horrible color picker and WTF interface actually slows designers down to where it become a draw.
- jaysonelliot 15y ago
  I'd like to talk to you about this. Drop me a line on gmail, it's jayson.elliot
- robszumski 15y ago
  The Illustrator-style layer selection is enough of a reason to use Fireworks over Photoshop. You spend more time trying to navigate the layers in a PSD than actually designing. Drives me crazy.
- twfarland 15y ago
  Check this first: http://www.pixelmator.com/ http://www.pixelmator.com/ - works like a lighter/prettier Fireworks, currently only 30 bucks, and no annoying licensing thingy. Mac-only, but most designers are on mac anyway.
psweber 15y ago
Some designers would love to use this tool you speak of. The smoke weed and try a bunch of crazy things type of designer is pretty well served by Photoshop. You can hack things up easily, try visual ideas very quickly and then clean up your files when you find a direction that works. Systemic designers would loooooove the tool you describe. Global control of grids, headline styles, body copy styles, form elements, buttons, links, graphic elements and scaling behavior. This is how they already think. Photoshop makes them update most of these things manually. Want to make a change to every page you are working on? Time for some tedious production work. Want to see how an idea would actually function? Too bad. Note: Smoke weed designers are not to be underestimated. They come up with things that systemic designers never would. You might want a smoke weed designer working on your branding and a systemic designer on your web app.

chrislomax 15y ago

Now I am going to get killed for saying this but it's almost like you are referring to Microsoft Expression Web or something to that effect. When we were doing work in Silverlight (god rest its soul), there was the facility to have designers working on the design and developers working on the code. Now, what you are referring to may be the actual Expression Web product they offer. I don't know, but it sounds very familiar to the Silverlight version. No, I am not suggesting everyone moves to PC to use this software, I am just bringing to light the possibility the software may already exist! We personally have no issue mocking up our sites in Photoshop then them being sent over to the developers to be sliced and used. We have never really felt this process to be in-efficient either. I think so long as the designer has a clear understanding about what the developers need then it's fine. When you have print designers getting used to web development for the first time, that's when you have problems.

kapowaz 15y ago

I would love for this hypothetical tool to exist, but the problem doesn't lie with the tool, but that you're talking about essentially different workflows. Designers tend to use the tools that they're most familiar with, that give them what they need. Usually that means Illustrator + Photoshop (or sometimes, Fireworks). 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.

talmand 15y ago

I'll take a stab at this. 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.

feverishaaron 15y ago

Note to interested developers... there is a HUGE market for a disruptive tool in this space. If anyone is interested in working on such a tool, I'm game. This is a constant frustration for web designers. Photoshop allows you to create fantastic visual effects, but the layout tools are abysmal. Fireworks is well... Fireworks – Adobe's "redheaded stepchild" in the tool chain. It's buggy with a slow, horrible UI. While some of Fireworks tools solve some of the layout problems (nine slice scaling, better vectors, grouping), their lack of decent masking and the horrible color picker and WTF interface actually slows designers down to where it become a draw.

jaysonelliot 15y ago
I'd like to talk to you about this. Drop me a line on gmail, it's jayson.elliot
robszumski 15y ago
The Illustrator-style layer selection is enough of a reason to use Fireworks over Photoshop. You spend more time trying to navigate the layers in a PSD than actually designing. Drives me crazy.
twfarland 15y ago
Check this first: http://www.pixelmator.com/ http://www.pixelmator.com/ - works like a lighter/prettier Fireworks, currently only 30 bucks, and no annoying licensing thingy. Mac-only, but most designers are on mac anyway.

psweber 15y ago

Some designers would love to use this tool you speak of. The smoke weed and try a bunch of crazy things type of designer is pretty well served by Photoshop. You can hack things up easily, try visual ideas very quickly and then clean up your files when you find a direction that works. Systemic designers would loooooove the tool you describe. Global control of grids, headline styles, body copy styles, form elements, buttons, links, graphic elements and scaling behavior. This is how they already think. Photoshop makes them update most of these things manually. Want to make a change to every page you are working on? Time for some tedious production work. Want to see how an idea would actually function? Too bad. Note: Smoke weed designers are not to be underestimated. They come up with things that systemic designers never would. You might want a smoke weed designer working on your branding and a systemic designer on your web app.