I came across this item on Daring Fireball, an Illustrator file which mocks up Safari’s browser chrome for use in creating mockups.
This is a well executed illustration, and probably will help a lot of folks out. However if you’re doing “web design” completely in Photoshop or Illustrator you will encounter at least three major problems.
Number one: If you are making complete*, presentation ready, design comps in Illustrator or Photoshop, you are lying to your client.
There I said it.
While it’s necessary to use tools like Illustrator or Photoshop (or whatever) to make highly polished graphics for the web, if you are doing all of your design work in a graphics program you are basically making something that can never be truly executed in HTML/CSS.
The slick fonts, the pixel-precise layout, hairline borders, nicely tracked and kerned typography, the assumption that everything will fit nicely on a page…all lies.
The mockup you show your client essentially becomes part of your design contract. When you present a mockup, and the client approves, you are basically promising to deliver what you showed them. Unless you have a very savvy client who understands the difference between Photoshop and a web page, you are setting them up for disappointment, and setting yourself up for a headache.
Client: “That doesn’t look like what you showed me.”
Your Dumb Ass: “Well there are differences in capability between web browsers and blah blah blah blah zzzzzz snore ramble.”
Client: “Yes, but that doesn’t look like what you showed me.”
Only present mockups in HTML/CSS. Get a cheap hosting account. Put your comps online. Carry a laptop to meetings, and run them off your computer.
If you need to sketch or develop in Photoshop or Illustrator, fine. Do it. But don’t create a painting in Photoshop then lie and call it a web page.
If you present work exclusively in HTML/CSS you can do a number of things.
- You can present an accurate picture of what you’re developing to your client. No surprises.
- You can resolve potential browser display problems before you get to the client
- You can create a standard set of markup from the get go…saving work later (or just use a standard markup template each time)
- You can put the comps up on a web page, and let the client look at them at home, pass a link around to their colleagues. You know. Take advantage of the internet.
If you are making purty pictures in Photoshop, you have to cut up your graphic into web-able chunks, and write all the HTML anyway. This means you’ll probably have to make an intermediate graphic file to support your specific needs — like backgrounds for tabs that allow for expansion, or a template for header graphics that may change from page to page. Why do more work than you have to?
Number two: Safari’s browser chrome is Apple’s intellectual property. (And IE’s chrome is Microsoft’s intellectual property, and Firefox’s chrome is Mozilla’s intellectual property, etc)
Why are you stealing from Apple? Why are you putting someone else’s creative work in your portfolio? Also, unless you’ve got a hip client, they’re running Windows and probably Internet Explorer. Why are you showing them a browser they don’t recognize?
Why are you showing your client a picture of a web browser at all? It’s 2007. If you are making a web site for somebody, they know what a web browser looks like. You don’t need to stick a picture of a web site in a picture of a web browser. Design in HTML/CSS and put it on the web, and ta-da it will be in a web browser automatically when they look at in their web browser.
If you need to put a picture of your web design into print, or on a web page (and you can’t just link to a comp somewhere) leave out the browser chrome altogether. Your portfolio will have a title that says something like “web design” — or better yet you’ll actually have a description of the project which will indicate that it was a website and not something that only looks like a web site.
Number three: Pictures of web sites do not tell the entire story.
Chances are very good that your web design will include at least some level of interactivity.
- Maybe your navigation highlights when you move the mouse over it.
- Maybe you have a handsome (standards compliant) drop down menu.
- Maybe you have a form or two with some nice AJAX-y elements.
- Maybe you want to show how the design holds up at different screen resolutions, or how the type scales easily.
- Maybe you’ve designed a really nice print stylesheet.
While you can show all of these things in a picture, you’ll need many images to do it even marginally well.
It’s far less work, and tells a much better story to your client, to say “now click here” than to say “in this picture we show the initial state” [flip flip] “and in this picture we show the active or clicked state” [flip flip] “and in this picture we show the blah blah”.
Now, if you are the type of person who feels like their hands are cut off unless they have Photoshop open, this advice is going to be hard to swallow. I suggest — as a form of therapy — to do your designs the stupid old fashioned way, then convert them to HTML before showing them to your client. That way you’re only wasting time.
Sooner or later someone will demand a printout. It’s unavoidable. In that case you should still do all your work in HTML/CSS then screen capture the results. Place the screen capture on a page, scale it down so it doesn’t look to jaggy, and include a URL underneath it that points to the real thing. That way you’re indicating that the real thing is available elsewhere, and this print out is just the merest shadow of the actual glory of your design.
* I don’t mean prototyping. If you’re doing prototyping, it’s nice to have a paper version that people can scribble on in meetings. But doing a final design isn’t a prototype.
