Do you show your client static pictures of the web design or do you code the mockup in HTML?
Recently Meagan Fisher published an article in which she discusses an alternative way to present a web design to a client: Don’t emulate it in Photoshop, but build it in HTML and CSS. There are some advantages to it. A client can see more than just the design. He/she can also see:
- Behaviour of the fluid design
- Interaction like hovers
- How the website looks in different browsers
On top of it, she also mentions some disadvantages of using Photoshop:
- It crashes, leaving you with hours of work lost.
- Font rendering sucks
Photoshop is still king
Although creating a website directly in HTML has it advantages, I think designing in Photoshop is better in most cases.
Photoshop is faster
Yes, a simple design could well be created directly in HTML. But not all designs are simple. Changing a background color is easy in CSS, but dragging columns around, changing or altering visuals and all kind of other alterations are quicker in Photoshop. Designs can change dramatically before it is finally approved by the client. Those changes are quicker done in Photoshop.
Photoshop is static
Being static isn’t not just a disadvantage. A static design is in fact helpful because it helps you focus on how a website should look like and not be bogged down by browser incompatibilities. This too gives you extra speed in designing.
Photoshop is versatile
Just because CSS can do stuff like round corners and text shadows in some browsers, doesn’t mean it has become a designing tool. Photoshop can do more than just that. When designing in HTML I start to think too much in the constraints that both HTML and CSS have. In Photoshop I have much more design choices. Because of that I’m able to think more out of the box.
Crashes and font rendering
I was suprised that Photoshop crashes are mentioned as a major problem. I consider Photoshop as a very reliable product. The only problem is that saving can take a while, so not everyone saves regularly. If you don’t save regularly you’re asking for trouble. Even with stable products.
The issue with font rendering is indeed a problem, but that’s more an issue for designers. Clients don’t even know it’s an issue. They’ll only notice differences when they’re dramatic like with webfonts. Just compare this weblog between Apple Safari and IE on the PC: it’s hard not to see the difference.
My preference
Since I’m a web developer I ought to be tempted to skip Photoshop and start coding right away. But that’s not the case. I designed my blog twice last year. In both cases I chose to do the basic design in Photoshop. Only when I was happy with that basic design, I started developing and added extra elements on the fly. The current design of my blog could just as easy be built in HTML/CSS from the start, but I’m convinced it’s better to work in Photoshop first.
Agreed! I’m a developer, but I like to have the “vision” down before I start the website, and Photoshop is my preferred tool. I’m more likely to research ways CSS can be made to implement my design vision, than vice versa.