This is actually an old version of For the latest and greatest, check out the new site.

The Future of Slice and Dice

I'm fairly young in terms of web years. In fact, I just barely recall building sites with tables. I may have designed/built a maximum of ten sites before moving to a standards-based approach. During my career, however, I’ve been fortunate enough to work with people that have been in the business for a hefty amount of time. With some, the years have evidently bestowed justifiable experience and wisdom, while others have used the time to become set in their stodgy, old ways.

On a recent project, I was hired to build a small brochure site that was designed in-house. The designer was unfamiliar with web standards, but, aside from that, the project progressed like any other normal job.

As part of the initial assets, I was provided a source PSD, and the designer was kind enough to pre-cut all of the images. And therein lay the problem.

Due to the difference in coding approaches (table-based vs. separating presentation and content), the images were cut differently than I would have expected. A quick conversation with the designer revealed that he separated the imagery with the Slice tool in Photoshop and exported them from ImageReady, ultimately creating some images that I couldn't use with my coding approach. For instance, as a standard two column site, I received two background-images, one for each column, assumingly cut for each of 2 table cells. However, I would have cut a wider and shorter image for use with a faux columns approach. Also, the navigation link and hover states were cut as separate images, whereas I had to recut them for appropriate use of a faster rollover method.

Designers, is it worth your time to pre-slice images for your developer? Does it affect your designs to know how the developer will be coding your comp? Developers, how often do you receive assets that are usable? With standards-based designers being more educated about the process, are the days of slice and dice over?


Jeff Croft said:

I definitely think the person who will write the (X)HTML and CSS for the site needs to be the one doing the slicing and dicing -- or at least be involved in the process.

Even to standards-oriented developers are likely to chop up source PSDs differently.

Don't slice and dice your PSDs in a vacuum -- it's a waste of your time. :)

Posted on November 13, 2006 01:12 AM

zeldman said:

Agreed; the coder should do the slicing. Especially when the graphic designer doesn't understand the principles of standards-based design.

Posted on November 13, 2006 02:34 PM

Alex Giron said:

Unless you do both design and development, there's no need for a designer to do so. Man I didn't think people still did that :)

Posted on November 13, 2006 05:14 PM

Luis Escorial said:

I value the nice effort the designer has done in this project; even more considering as you said he didn't have much experience on designing for the web.

Years ago, I would work just a designer and pass my designs to a programmer. We used tables to set up the design (yes, I've been working on the web for a long, long time) and they would slice the psd anyway.

Working with other designers, I've come to realized how important it is that they have at least a base of knowledge on standard-based design.

Even if you don't end up slizing the psd, it makes the life and work of the developer much easier to do your designs already considering those standard-base rules. And it makes for a much better website design.

Posted on November 13, 2006 06:19 PM

Nathan Smith said:

I'd much rather receive properly labeled, layered Fireworks PNG or Photoshop PSD, than pre-cut flattened images. I haven't had too much trouble with people pre-cutting images. What I run into most are comps being handed off, done by someone without familiarity on how it might be coded. That though, I can deal with, because at least they are still the original files. Then it's just a matter of tricky CSS.

Posted on November 14, 2006 11:22 AM

Jacob Souva said:

I think to really achieve design bliss, the two parties would need to be on the same page. There are so many times that limitations or specifications in CSS dramatically influence my PSD mock-up. I'd say that the advantage goes to the team with a working knowledge of both sides. Great post.

Posted on November 15, 2006 03:11 PM

brendan cullen said:

Be glad that at least you get PSDs ... I get handed InDesign files, yes InDesign, to code and am the only one who sees a problem with webpages designed for an 8x11" printed page

Posted on November 21, 2006 02:35 PM

27 said:

Actually, I thought the future of slice-and-dice was in the past. Better to let the developer create the screen structure using compliant xhtml/css, which defines the visual spec for the graphic designer from which to work. Forcing a developer to make decisions from full screen psd or InDesign (!) files is putting the cart before the horse.

Posted on November 23, 2006 05:53 AM

Dan Mall said:

@27: Maybe I'm misunderstanding, but how can you create a screen structure without a design?

Posted on November 23, 2006 11:44 AM

27 said:

You're correct, Dan. I'm separating the term "design" into two phases or disciplines. There's the screen structure (where stuff goes), then the graphic/branding elements (colors, fonts, etc). The difficulty you described in your post sounds as if structural decisions were made at the topical presentation level. As others have pointed out, this problem is mitigated if one task is executed with the other in mind.

Does that make sense? Apologies for my being unclear.

Posted on November 24, 2006 05:15 PM

Dan Mall said:

@27: Ah, I think I understand now.

this problem is mitigated if one task is executed with the other in mind.

While I agree with the above statement, I see a big problem with determining screen structure (where stuff goes) before the design is resolved (colors, fonts, etc.). To break design down into choosing colors and fonts is quite the reduction. “Where stuff goes” is true design; communicating content should be the job of the designer.

I believe that structural decisions should be within the role of the designer. If the developer assumes responsibility of these tasks, she essentially becomes the designer.

Posted on November 24, 2006 11:41 PM

ezgi said:

I personally believe that design should be done considering how to code it.

Posted on May 17, 2007 03:41 PM

Sorry: comments are closed.