Agile Design – Quickly moving from Photoshop to CSS

I recently read a post over at 37 signals about why the designers there skip Photoshop in the design process and I found myself agreeing with most of the conversation. There are some good reasons for designing this way, along with some good counterpoints.

The Photoshop mockup just isn’t a website.

A while back I used to always fully develop a design in Photoshop, with all the polish and finesse that could possibly fit into a flat two dimensional image and present the design to the client for approval.

This worked reasonably well when the only real interaction was the click of a hyperlink or perhaps a drop down menu. You could explain the functionality, describe the interaction and hope the client had the imagination to perceive the concept clearly enough to approve it.

Of course, we could always create several designs to demonstrate the different phases of the interactions, which took more time. In the end though, the mockups just never looked or felt like a real website, so we were always left relying on the clients imagination.

While I’m not suggesting that we shouldn’t use Photoshop in the design process at all, I do recommend an agile approach of starting in Photoshop and moving to code the design as soon as possible, and then presenting the client a website concept rather than a Photoshop mockup.

No matter how good the Photoshop mockup is, it isn’t the same as a real website. In a Photoshop design concept the client can’t …

• click the links.
• see hover effects.
• see image transitions.
• see javascript transitions and effects.

In modern web design and web applications, the interactions can be just as important as the design itself and can only really be demonstrated as a web page. These interactions are ultimately what the end user experiences, and having this in mind at the start of the design phase can only help to create a quicker, seamless development path.

Photoshop concepts don’t look like web pages.

Above all else, the text in Photoshop is just not the same as text on the web. When clients see a Photoshop mockup, they can get a certain expectation of how the text will look. Photoshop text appears completely different, the sharpness, the font size, the spacing.

Designing the site in code, can show the spacing of the text and paragraphs better than in Photoshop, demonstrating a more realistic, finished design.

Code early and speed up the design process.

Don’t repeat yourself.

Designing in Photoshop first and then recreating the design in HTML/CSS is extra work. You can spend a lot of time polishing a Photoshop mockup, present it to the client and then still have to code up the design and tweak it to suit the web. Start in Photoshop and move to code quickly, its a real time saver.

Use code snippets to speed up the coding of the design process. All good web designers/coders should have a collection of code snippets that they can reuse.

Design with SEO in mind

When designing in Photoshop, your main focus is aesthetics. By designing in HTML early, you’re immediately thinking about the search engine optimization of the design.

You start to be concerned about how to treat headings and the flow of text on the page. You think about maximizing the SEO opportunities from the start of the design. All of this is important when designing for businesses – the SEO is just as important as making the site look appealing. After all, the SEO helps bring the traffic that appreciates the design.

Listen to the client

Some may argue that it could be a waste of time coding a site and presenting the design, only to have the design rejected and start designing and coding again. The key is to really listen to the client from the very first meeting.

Most clients will have an idea of what they like and what their end users will like. If they don’t, guide them early, ask the right questions and prepare them for your ideas. If you take care in the preparation, you should only ever have to code a design once.

Agile design.

Once you present your design to the client, its common to need to make minor style and layout adjustments. Again, its much easier to do this in the code and send the client a link to the design, rather than have to rework a Photoshop design. And you’re a step closer to having the project finished, no need to re-tweak the Photoshop design, get final approval and then start coding the concept.

Moving from a Photoshop concept to coding a site as early as possible, speeds up the design process and gives a more realistic result.

The only real downside to the agile approach is that the client might start thinking that because they can see the website concept functioning as a website, the project must be almost finished. Its important to explain the design process early on, so that the client understands whats involved.

In the end though, it comes down to the client. How good you are at listening to them and how well you can communicate your ideas with them.