: As a developer that works closely with designers, here's what I like to see: Photoshop images of the different design styles. Usually, sites have two or three major design styles (often a

As a developer that works closely with designers, here's what I like to see:

Photoshop images of the different design styles. Usually, sites have two or three major design styles (often a front page, and everything else, sometimes a third for forms or blogs or whatever). I'd like one for each style. Preferably, with the layers optimized (that is, if you have 15 layers that make up an image of an iPod, merge them into one; I don't want to deal with "copy3 of carrier bar layer 1" a hundred times). The layered image will allow me to slice out the graphics. It's also nice if the gradients are on separate layers from the base color, so I can accurately get base colors, since I generally use CSS for colors wherever possible. (On a side note, if you're coming up with widths, placements, sizes, and exact colors and don't have a full design image, then you're falling behind in your due diligence.)
A .jpg image of each of the styles. As a developer using open source technology, I run Linux as my primary environment, which makes running Photoshop sketchy. Gimp and other tools can open Photoshop files, but sometimes things don't translate. A .jpg of your design helps fill in any discrepancies. While you don't necessarily need to do this if you know your developer has the same version of Photoshop as you, it's also useful in case they have an older version, which might not have all of the same features, either (after all, we don't live in Photoshop like you do).
If you have a textured background that can be tiled, a smaller, tileable version of said texture. The Internet is a slow beast, especially when it comes to images. If you want asphalt or wood or paper or whatever as your background, give me an image that's no more than about 100x100 pixels and tiles seamlessly. Ideally, the smaller the better, but there are certain points, especially on full-page backgrounds, that it starts causing issues again. A giant, 10000x10000 pixel behemoth of an image is going to take forever to load, waste bandwidth, and make your site look terrible while it's loading.
If you're the type to notice the difference between #ac432b and #ad442c , then notes, somewhere, about the intended hex values of colors. These can be in a Word document or on an additional layer in the Photoshop image, depending on what your developer prefers.
If you're a pixel-perfection freak, then some measurements, at the very least for the width of the main content. If your Photoshop image is 100% scale, then it should be pretty easy to get the rest, but it can be difficult to tell from the image if you intend the page to be fixed width at 1000px or to be a more full-width layout, especially if you and your developer haven't worked together before.
Notes on reactions of interactive elements. Should a menu item text change color on mouseover? What color should it change to, and should it fade to it? Will this item trigger a dropdown menu? What items will be underneath it? (The menu items may or may not come from you, but you should be aware of it so that the design is created appropriately; I've had far too many designs not take submenus into account and look odd because of it.) Should the menu fade in/out? Answering these up front will save time going back and forth later on.
Basic understanding of the web as a medium. Web design is filled with graphic designers who have migrated to web design. It's hugely important (in my opinion, at least), that you understand that web design is not print design. This means that your design will look slightly different in different browsers and on different platforms. Unless you have the money to spend two to three times as long on development (especially if you have to support legacy browsers, such as IE6), I highly recommend getting over the need for every single browser on every single platform to look exactly the same down to the very pixel as your design. Doing so will likely not only choke your developer, but also your own design (which I'm sure will have snazzy gradients, text or box shadows, and other shiny stuff in it), and for what? So you can have the satisfaction of knowing that it's absolutely identical in every browser known to man? The general public barely even knows what a web browser is, let alone that more than one exist. They won't know that your boxes should actually have a drop shadow, because they won't ever see it if all they run is whatever version of IE their computer is running, and that's okay. I have two phrases for you: "graceful degradation" and "progressive enhancement." Learn them, understand them, embrace them, love them. Your developers will thank you.

10% popularity Vote Up Vote Down