Should web designers use Photoshop to create websites?
A minor domestic broke out in my house last night. I am a software developer and know nothing about graphic design but I do know what web sites look good and work well.
My other half, a graphic designer, disagreed with my notion that the best looking websites were crafted by designers who were conversational with HTML and CSS, or at least used tools that generated it. In my world, rather than designing in Photoshop (or any other graphics tool), designers would translate wireframes (hand-drawn or digital) directly into HTML and CSS. She contends that websites should be implemented by passing static graphics files to a developer who can translate that into code.I have several reasons for thinking this is a strange way to work.The first is the word 'static'. Web sites are not static images. You can click them, scroll them, type into them and zoom them. You could have clever drop down menus, accessible keyboard navigable controls and lovely smooth jQuery animations.They say that "every picture tells a story" but in this case it only tells the first few chapters.The next issue is what happens to the PSD files the designers output. Effectively, these are an intermediate blueprint that get thrown away after the build. Following this model, I find it strange that designers, who are understandably protective of their work, allow it to be interpreted and implemented by someone else. The designer effectvely works by proxy and hands over the reins. They cannot directly make small tweaks and iteratively improve their work without asking the developer to make these changes.The final issue, related to the above, is change agility. The static image approach is clearly a hangover from print work. Deploying a website is not the same thing as sending a job to the printer.
A web page and corresponding stylesheet can be changed at any time. It is likely that at some point, the client may request changes that need the original designers' input.
Imagine the scenario: the client asks for a certain paragraph to appear inside a red box. Does it really make sense for a designer to open up Adobe Illustrator and draw a red box around the paragraph in question, manipulate the text and other jiggery pokery?
In HTML, this would be a case of adding: "background-color:red;color:white;padding:2" to the relevant paragraph. This could be done in the time it takes to open Illustrator. By abstracting away the web and treating it like an image, you throw away the benefits of working in a
powerful declarative content and presentation environment like HTML and CSS. It's a duplication of effort, at least.In no way am I suggesting that all web sites should be created by programmers nor I am not saying that designers should be CSS masters or gurus in browser quirks. I just feel that it is important to use the right tool for the job. If a designer is capable of using the frankly baffling Adobe CS4 then they should be able to use tools like CSSEdit in their sleep. Visual tools that emit working, web-ready code that can be used as a basis of the build give designers continued control of their work and allow them to directly target their deployment medium.
3 comments
First off, I come up with a wireframe sketch of each page of the site with the client, then I make them (the sketches, not the client ;) ) look pretty in Photoshop (or Fireworks) then I start building it in HTML/CSS/JS and tweak within the markup from then on in.
I think you MUST have a design to build from though, unless you're putting something really simple together. With the design, goes the planning - they're not exclusive, and I think without spending time on the design you fail to take into account the workflow of the site (or app) and generally end up with a big mess o at least something that isn't as good as it could be.
Of course it depends on the client budget as to how much time you can spend on planning, production, testing, tweaking and all that guff.
Have to say, I don't find Photoshop baffling at all though!
Initial wireframes, sketches and so forth do make sense to be done visually be it on paper, in Photoshop or in a wireframing tool like Balsamiq.
A point you make is that you go on to make further design tweaks *during* the build. This is fine as its your design to begin with... it may cause arguments if a lowly coder was to dare to butcher the sacred work of a god-like designer. :)


1. I don't use Photoshop.
2. CS4 is not 'baffling' in the slightest ;)
3. My rebuttal will be written in due course.
I mean the above as slightly tongue-in-cheek, of course. It's a much bigger topic which I shall discuss from both sides. Some good points made by both