For a long time now, I’ve been questioning the use of Photoshop when designing websites. It all dawned on me back in the days when I was working as a developer for an agency, alongside a talented graphic designer and his boss.
This is day seven of #30daysofcreativity.
As the story goes, the designer wanted to use Adobe Illustrator to do his website designs, and to me it sounds like the obvious choice. However, the boss strongly objected and directed him to instead use Photoshop, as he was used to getting psd-files to look at.
I know that a lot of so called web designers out there work with Photoshop, and I’m wondering why that is. Why am I wondering? Because Photoshop is in its essense a photo manipulation tool, not a vector graphics tool. In fact, let’s take a look at what the actual Adobe website says about the two pieces of software.
“Adobe® Photoshop® CS5 software redefines digital imaging with a strong focus on photography; breakthrough capabilities for superior image selections, image retouching, and realistic painting; and a wide range of workflow and performance enhancements.”—Adobe.com
“Create distinctive vector artwork for any project. […] Design graphics for banners, web pages, and interactive experiences, or lay out your entire website.”—Adobe.com
As I said, to me it’s a pretty obvious choice. In the “Photoshop-designers” defense though, Photoshop CS5 Extended is built as a tool for web design. At least if we should believe the website—I believe Adobe likely adapted to the market on this one. However, the same website makes use of the infamous p-word; “Make your web pages pop”. What the hell is “pop” anyway?
I still believe that web designers should really drop the use of Photoshop for things other than photo manipulation, and start learning how to use Illustrator and/or perhaps Fireworks. It’s a sad fact that many of those who call themselves web designers have no idea how to use it. It’s a shame.
Illustrator is truly built from the ground up to produce vector graphics, and vector graphics is what we want in a website design. The actual name “Photoshop” implies as well that it’s wasn’t created to be used as a tool for web design. So don’t use it as one.
A method that sounds really interesting is to sketch ideas and wireframes of the site on paper or in a wireframe software such as Mockingbird, OmniGraffle or Azure, and when the client agrees you proceed to build a mockup/prototype using HTML markup.
Using this method you would minimize the gap between design and development. You wouldn’t have to start all over from scratch with your markup once you have a pixel-perfect graphic design approved by your client. Furthermore, your clients will no longer complain that they can’t click around on your mockup.
Perhaps this method doesn’t suit every project, but I would certainly like to try it. Making a mockup of a basic layout before beginning the actual graphic design would give both you and the client a chance to first of all truly define the site structure and get a feel for it using a clickable HTML prototype. It would also allow you to better design the website around the content it should feature.
To me personally, it doesn’t seem like it would take more time than making several rounds of revisions using Illustrator or Photoshop. Making a basic mockup in HTML can be done very quickly, so long as you are fairly skilled and know what it is you’re doing.
It’s even possible you would actually save time since you would likely reduce the amount of changes the client wants. It’s very hard to see what’s right and effective based on a static design. Being able to click around on an HTML mockup is a wonderful freedom and the client will surely get a better feel for the site.
This is also likely to make your client a lot happier. Clients value clickable prototypes more than pixel-perfect graphic decoration. Other nice advantages include the possibilities for the real-deal text-rendering, hover effects, fluid layouts, and later on even Javascript behavior such as AJAX page loads.
These are all mentioned in the 24 Ways article “Make Your Mockup in Markup” by Meagan Fisher—a very nice piece that is highly recommended. She references another great article by Andy Clarke titled “Time to stop showing clients static design visuals”.
I won’t go into the how-to details of this here since Meagan does a very good job of explaining the practicalities in her article. So I suggest you head over to 24ways.org for a nice read right away. Enjoy!