As web designers, sometimes it is far too easy to look at a completed design and think it is ready for production. But any developer will tell you that bringing a design to life in code takes more than just a pretty design. To expedite the coding process and ensure the product more closely reflects the design, make sure you do these six things before handing off your next design and your developer will love you forever:
1. Provide or Rasterize Your Fonts
Let’s face it—the likelihood of a developer sharing all the same fonts as you is about the same as finding a unicorn in your liquor cabinet (before the liquor was consumed, friends). For any text that will be part of an image or graphic, it’s usually safe to rasterize the text. For text that will likely be formatted as HTML, the best option is to provide the fonts separately so the developer can change or copy the text if needed. Finally, if you have used a font that will be embedded into the code, be sure to provide the code or a link to the code so developer has access to that as well.
2. Create Seamless Background Tiles
Unless your background is a solid color, your developer will likely attempt to repeat an image across the background to expedite loading time. The problem is, if a background design has any texture at all, the tiles may have seams, giving the site a very 1995-esque appearance. Save them the headache and create your own seamless tile background.
After you create the tile, use it in your design by placing and repeating it. It’s important to do this before you send the file to your client so they see a close replica of what the final output will look like.
Finally, include the tile in the files you send to the developer.
3. Develop a Style Guide
If you haven’t been creating style guides, you will probably find that it is just as useful to you (and others on your design team) as it will be to your developers. Take the guesswork out of styling the site by creating a simple guide showing the hierarchy of headers, body text, and links, at a bare minimum.
Style guides should also include a color palette (with hexadecimal values, please). With a guide in hand, developers can jump headfirst into coding CSS, rather than muddling through your design and making guesses.
4. Include Rollovers
For each menu or button, include a visual for what it should look like in the unused state, rollover state, and active (or as it is being clicked) state.
The illustration to the left is one example of what this could look like.
5. Organize and Name Your Layers
It cannot be emphasized enough how important it is to give each layer a meaningful name. Clean up the layers palette by grouping major elements into folders, and arrange everything in the same order as you would see them if you were scanning down the page of the design.
At the topmost level, the header, main content, side column, footer, and background should be visible, plus any other major sections of the site. It’s also wise to include each page as folder within the main section, rather than as separate files altogether—that way, if the header changes, it only changes in the one file and you don’t have to make the change on every other page (and the developer doesn’t have to guess which version is correct if you didn’t make the changes perfectly across all pages).
6. Clean It Up
Clear any guides that wouldn’t serve a purpose for the developer, and delete any layers that will not go into the website. Also make sure the file name itself isn’t a mess (website-version6-final-090211-v2 can be replaced with something simpler like website-final). Your developer will appreciate the time it saves from not having to wade through unnecessary elements to get what they truly need from your design.
These are just a few things that can make your developer’s job (and yours, in turn) much easier. What are your tips? Feel free to share them in the comments.
Images by Mandy Barrington