Should Photoshop be used for presenting web page designs to clients or has the art of design now evolved to such a level that it’s no longer effective to present a flat image to a client? Can HTML/CSS be used to streamline the design process?
Traditionally Graphic Design has been straight forward in terms of getting ideas down on screen which is then signed off before going to print, however is it really as simple to design for the web?
My approach in the past has been to sketch ideas out first and design a flat image in Photoshop which would then be agreed with the client before developing it into HTML/CSS and any functionality added. However, Andy Clarke’s recent article on Time to stop showing clients static design visuals highlighted a number of problems that I often run into due to the dynamic nature of a web page.
The main issue for me is when designing fluid width sites as there’s only so much a Photoshop file can show when it comes to presenting the design effectively whilst also demonstrating the restrictions of using a fluid design.
By presenting a web page to the client as HTML/CSS via a web browser, this restriction is immediately lifted as it effectively demonstrates how the final page will appear.
Andy Clarke raises another interesting point in his article regarding browser consistency and using progressive enhancement to use some of the CSS3 modules which have been widely implemented in the modern browsers.
If a static image is used to present the design to a client then it’s impossible to take advantage of CSS3 properly as the results will vary considerably in different browsers and therefore if your client is using IE6, for example, then you can forget about it looking like the Photoshop mockup.
However, if a static HTML page is put together which demonstrates how the page will look, then the client will be given a much better representation of what the final site will look and feel like when viewed through a browser.
How important is it to you that everything is pixel perfect and looks identical in all browsers? Yes, it must be legible, usable and accessible but for things like rounded corners on boxes, text shadows and even multiple background images (once they’ve been more widely implemented) is it important that in an old browser, you may not get the full experience?
I’ve been holding off using CSS3 for a while until IE6 has lost more of its share, but I’ll strongly consider this approach for future projects.
I’ve run into this problem many a time, when either working on the back-end as subcontracted by a graphic designer or in presenting my own designs. When working underneath a graphic designer (Many of whom I hate to say it have no concept of the web), it’s often difficult to explain to them why their amazing-on-print ad won’t be able to transpose to the web due to css restrictions, certain parts not being able to be fluid, etc. I’ve tried my best to present new designs in a browser however it does require a lot more work- and if the client doesn’t like the design it takes more time to code something else by hand. The benefits outweigh the drawbacks, however, and I feel that the browser approach is best. Good article, and a great observation.
This makes perfect sense. Its an issue a lot of people have had but never really talk about. The difference especially sometimes in IE can be way off the map and you really do not want to try explaining this to clients after you show them the shiny static file. The comment about GD’s not having a clue sometimes is unfortunately true but of course not always the case.
I have found over the years if someone is first a graphic designer and takes a GOOD coding class (even basics) you will SSSOOO understand how to get around things and therefore understand what is what.
Many many discussions have taken place about the designer vs. coder debate but in the end what comes out on the code side to a client is reality vs. wanna be.
Again great post and looking forward to seeing more.
It seems to me that there’s a tradeoff here between the amount of work upfront and the amount of imagination required on behalf of the client. There was once a time when you could show clients ideas mocked up on paper with a big black marker. That’s no longer possible — they expect something a lot more finished. But I don’t think that means we need to keep pushing this line forward.
There’s another argument implicit in the one you’re making: you can’t really be sure of communicating any ideas to the client unless they are complete. What about the interactive elements? Websites are not brochures, after all — the design is as much about how it works as how it looks. So why stop at HTML/CSS? Why not code all the JS too?
If we continue in this way, it’s not long before you have to show a client a completely finished website first. What ever happened to good client education? Want to make it clear that the design might vary from browser to browser? Tell them. Or, if you must have a visual aid, show them an example. No need to dump piles of time into something only to learn you’ve been going in the wrong direction…
@Phletch – Indeed. I love the idea of showing the client a living, breathing example of their finished product, but the more work invested in creating it in the browser (and indeed, where do you stop?), the more potential wasted time if you want any significant changes.
I’m convinced by the argument in principal, but I don’t think we’re quite at the point yet where it’s worth doing. When CSS3 is widely supported, and funky features and rounded corners are easy to implement and don’t require box model workarounds, etc, then perhaps it’ll be feasible to work this way. In the meantime, I think that a little client education and a mix of Photoshop and live examples is the Way To Go.