Graphic Designers Guide to Creating Website Comps
This article should help eliminate the back and forth from designer to developer. This document will list some of the basic practices that will make this process run smoother and more organized.
Do’s and Dont’s
1. Don’t create multiple PSD files that distinguish the front page from an inside page or customized templated page.
– Do, group each page design in the same document as a separate layer. This way every page can be viewed by just turning the eye off and on. ( Better a 10MB PSD file than 5x 2MB PSD files)
2. Don’t leave layers untitled (Layer 1, Layer 2).
– Do name them exactly what they are using the colors and areas of the design as description. (ex. Yellow Footer Bar, Right side content image). This gives the developer a better understanding of what they are selecting and looking at when attempting to deconstruct your design to transform into web code.
3. Don’t just use whatever font you think looks best. Remember, most fonts require a license to be used on the internet, excluding text inside images or logos.
– Do research what fonts are open sourced, or see if the client is willing to pay for the license of a particular font. Otherwise, download the Google Web Font Library, there are a ton of good fonts and they are all open sourced.
4. Don’t leave layers with layer filters, clipping masks or fills. Some parts of the design comps have to be separated and saved as individual images to be placed by coding. If there are added parts to the layer, it can sometimes not cut out properly while saving the effect.
– Do instead Rasterize Layer Styles (click the layer and then choose from top menu Layer > Rasterize > Layer Styles). Remember, most web developers don’t really understand how photoshop works, and can be confused as to how you got a certain layer to look a certain way. This will result in the coder cutting the layer out and implementing it into the site as an image, which is not always the best practice.
5. Don’t leave unused layers randomly throughout the comp. This can get confusing when searching for a particular layer. It also adds extra weight to the final comp size.
– Do go through the final layout and eliminate any unnecessary layers and items.
6. Do use guide lines to separate parts of the site comp. This helps determine widths, heights, and spacing are perfectly set.
7. Do use 72dpi resolution. The web only displays in 72dpi resolution. Anything higher or lower will result in disproportionate web layout.
When designing keep in mind the that the site has to be broken down into smaller parts and then reassembled on the web. The days of cutting designs up into smaller images are over. No more totally tabled layouts. Most of what you design can be recreated by coding. Lets make the designer and coders relationship better.
