there’s an excellent resouce for this:
6 Things to Do Before Sending a Site Design to a Developer
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
- Ten Things Every Beginning Developer Should Know
- Design and Code a site with Gimp, HTML and CSS
- Design and Code a site with Gimp, HTML and CSS (Part 4/4)
- Great Firefox Plugins For Any Web Designer or Developer
- 8 Web Development Mistakes that Make Any Site Look Bad
Unleash the true potential of your business. Get The Unlimited Freelancer and start transforming your freelance business,
now only $19.
September 16th, 2011 at 9:42 am
I also ask my designers to send my a flat jpg or png for each template as reference.
I use Fireworks as it covers more bases, but sometimes it doesn’t handle photoshop layers as the designer intended – trying to work out which layers should be visible for which page can get messy, but with a flat image for reference it’s much easier.
The style guide should also explain dividing lines and borders – are they one pixel wide but anti-aliased or actually a two pixel line of two different colours?
And if everything is supposed to line up on a grid, please say so. zooming and measuring is frustrating – leave some guides in place.
September 16th, 2011 at 9:46 am
and another thing, if boxes have backgrounds, and they’re supposed to expand with content, make the backgrounds big enough – recreating gradients for taller than illustrated boxes isn’t much fun.
And please consider that an expandable rounded corner box with a gradient background and a drop shadow over a textured gradient body background is quite tricky to code for all browsers. (CSS3 will save us all!)
September 16th, 2011 at 10:17 am
Wow! I wish our designers did this! I am posting this to everyone of them right now
September 16th, 2011 at 11:20 am
I would add to this: Make sure you and your developer speak the same language. I worked with a developer last year who did NOT understand the concept of point sizes for fonts. He only worked in pixels. It took 3 days to redo the style sheet I gave him and get everything to where it needed to be.
I very highly recommend Fireworks. I have been using it since 2001 and much prefer it over Photoshop. It is much easier to use and to me, it makes more sense. It also has a bunch of great graphic effects under Window > Styles. Click on the Styles button, then click on the drop-down menu that comes up. The effects can be modified in Photoshop and Illustrator.
September 16th, 2011 at 11:25 am
“I worked with a developer last year who did NOT understand the concept of point sizes for fonts. He only worked in pixels. It took 3 days to redo the style sheet I gave him and get everything to where it needed to be.”
Point sizing for the web is unreliable as it is affected by display DPI, that’s why developers use pixels or relative font sizing. The web isn’t print.
September 16th, 2011 at 11:47 am
Ugh, if I had to tell you how many times I had to work with a JPEG for design work I’d go crazy. I always made it important to do proper structuring in my PSD’s simply because I had been on the receiving end of jumbled messes far too many times; didn’t want to pass on that pain ha!
(Btw, also here in Tampa, cool to randomly see a local group here on FF)
September 16th, 2011 at 1:27 pm
@Tony: Since I have been desiging Web sites for 14 years and designing print publications for more than 30 years, I am very well aware of the differences between points and pixels.
However, everyone commenting here and the blog author are talking about using Photoshop and Fireworks. Those programs only allow you to size type in POINTS. If you’re working with a developer who only understands PIXELS, it leads to confusion and frustration — which is what I experienced with this developer.
So I guess I would expand on my comment and state that when you create your style guide, be sure to put your font sizes in pixels, not points, and do the conversions before you send the information to the developer.
September 16th, 2011 at 1:32 pm
“So I guess I would expand on my comment and state that when you create your style guide, be sure to put your font sizes in pixels, not points, and do the conversions before you send the information to the developer.”
Now I understand you.
since a pt is not a px unless you have a 72dpi display, it is essential to design a layout that works with a variation in text size. What DPI will you choose for your conversion?
I’m hoping you understand that the font size you’d like isn’t the one that you’ll get in every device.
September 16th, 2011 at 1:58 pm
“What font measurement unit do you recommend?”
Visual designs that don’t allow for text to be bigger/smaller/different fonts *will* break.
You can’t guarantee that the font size you want will be the one that you get. A developer can make it look like that for *you*, but someone with an old or mobile browser may see something completely different.
This article suggests using the new CSS3 rem unit. All very interesting, but the reality is no matter what font and size you specify, someone somewhere will want it larger, or smaller.
September 16th, 2011 at 5:30 pm
I’ve used ems, a mix of % and ems and px. I think the debate over which is best, still hasn’t been resolved. I like ems, as you can change the whole site by just changing the body font size.
MoSeptember 17th, 2011 at 1:39 pm
Make a style guide, organize and name layers, clean up the mess … Absolutely! But rasterize fonts and make such a nasty ugly rollovers (deprecated word) … that belongs to year 2005.
September 17th, 2011 at 2:36 pm
I agree with all the points…We should care for developers as well.Thanks for sharing:)
September 19th, 2011 at 8:48 am
I agree with your points and from reading the comments here I can imagine how big a problem it actually is. I suppose I’m not aware since I both design and develop but I do know how to keep my design stuff understandable from when I check them a few weeks after I first made them.
September 20th, 2011 at 5:17 pm
These are so good to be aware of. @Tony Agree with you on the EMS flexibility and power.
September 21st, 2011 at 3:58 pm
Also, remember to include some instructions on how the site should degrade on older or less capable browsers and devices. Specially on these days of mobile, laptops and tablets, sometimes with restricted bandwidths and smaller screens.
September 28th, 2011 at 2:11 pm
Awesome points! I am new to web design and am a bit nervous about submitting my first project over to the developer. This post was a HUGE help to me and I will be bookmarking it for future reference!
November 26th, 2011 at 7:02 pm
The seamless background tiles becomes a problem if not done right. I’m not sure why most people fail to do that.
May 1st, 2013 at 11:46 pm
How much of an exciting piece of writing, continue creating companion
- 6 Things to Do Before Sending a Site Design to a Developer | SEO Copywriting and Content Creation | Scoop.it
- 6 Things to Do Before Sending a Site Design to a Developer … | Blog Links
- 6 Things to Do Before Sending a Site Design to a Developer … | Blog Links
- 6 Things to Do Before Sending a Site Design to a Developer
- 6 Things to Do Before Sending a Site Design to a Developer | Exposed Elements
- 6 Things to Do Before Sending a Site Design to a Developer | FreelanceFolder » Web Design
Sign up for our product discount list to get a free copy of Why Some Freelancers Thrive and Others Barely Survive. You can unsubscribe anytime.
- SEO Techniques All Top Websites Should Use
- When a Client Can't Afford You: Why It's Still Better to Bid High
- How To Stop Scrambling For Clients And Get A Steady Stream Of Paying Gigs
- A Simple Way To Stop Clients From Rejecting Your Proposals
- 3 Reasons Your Rates Are Still Low (And How To Start Raising Them)