5 Easy Ways to Prepare Your Web Designs for Coding

Congratulations! You’ve designed your site and you feel like it’s ready to be sent off to a coding team. You might have a developer in mind, or you might be comparing the popular PSD > HTML shops that are out there… you might even plan to code it all yourself. No matter what solution you decide upon, there are a few tricks that I think every designer should know when they are preparing their designs to be coded into fully functional websites.

Philo Hermans is a freelance web developer from Utrecht, The Netherlands. He has over 9 years of experience and often works with designers to turn their designs turned into fully coded websites or web applications. Philo is also a successful plugin developer on CodeCanyon, and has written frequently at Nettuts+. With that introduction out of the way, let’s get started with the tips!

Tip 01: Make it “Pixel Perfect”

The theory behind creating “pixel perfect” comps can be stated like this: To us coders, what we see is what you get! Most coders won’t interpret your designs for you. If you hand over a design comp with mis-matching margins, padding, font sizes, colors, etc., most developers will code it exactly as we see it – including the errors! This can mean lots of frustration and wasted time (and money) making revisions; so save yourself a headache and send out pixel-perfect comps if you want pixel-perfect coding.

Prior to sending your design to the coding phase, take an hour or two to review it with a fine toothed comb.

The workflow solution here is simple – Prior to sending your design to the coding phase, take an hour or two to review it with a fine toothed comb. You don’t necessarily need to document your entire design (although some developers will require this), but taking care to make sure the following elements are exactly how you want them is crucial:

• Margins: All margins between elements should more or less match up. If you intend all margins to be 25px, make sure that they are exactly 25px inside the design.
• Padding: This is the same rule as with margins: make sure the padding inside elements is consistent with your intentions.
• Font usage: Make sure that every time you use a font in the design, it’s exactly what you want to be coded – if you want “all paragraph text to be 10px Arial with 18pt line height”, make sure that each paragraph in the design is set in this exact way.
• Colors: If you have an exact color in mind, whether it’s for a font, background, or anything else, make sure you use the exact hexadecimal value that you want used in coding.

It’s also worth taking a moment to set some “guidelines” inside the design files that you hand over. An easy way is to use a grid template like the 960.gs website provides. The guidelines in the grid template make sure that the widths of the elements are all precise. So instead of having a container that’s 957px wide, it will be the exact 960px that you intended.

Tip 02: Leave Notes

If you want something that’s not obvious, such as a navigation menu that has to slide down when you move your mouse to the top of the screen. Make sure that you make it clear by adding notes. There’s a few ways that you could do this (I’ve seen everything from PowerPoint documents to printouts with hand-writing on it), but my favorite way is actually pretty simple: Use the Note Tool in Photoshop (see image below). The note tool will automatically make notes show up when a developer opens up the file, and it’s easy quickly read up on what a designer has intended.

If you aren’t using Photoshop, that’s okay. Most graphics software that I’ve found (from Fireworks to Illustrator) have a similar way of adding notes. If for some reason this isn’t an option – just make your notes into a text file that you include with the files you deliver to the developer.

Tip 03: Include Designs for Interaction

The more detailed your design is in terms of interaction, the easier it is for a developer to code it. Be sure to add some examples of what your design will look like when it’s interacted with. Every design is going to be different, but the important interactions that shouldn’t be forgotten include:

• Dropdown Menus
• Link/Button Hover States
• Image Sliders
• Lightboxes
• Tooltips
• Form Elements

The reason behind this tip is this: if you don’t show a developer how you expect a certain interaction to look, chances are that they’ll use an unstyled generic design, which could stand out like a sore thumb. Sure, there are some coders (like me!) that will do our best to guess what you would have wanted, by why leave something so important to guesswork when it takes you just a few minutes to design it yourself?

Tip 04: Have a Script in Mind

Time is money, so if you design a website with a nice looking slider and you know exactly which script would be perfect for it, tell the developer before they start coding it from scratch! If you don’t have a particular script in mind, it’s probably worth your time to spend a couple minutes searching for whether or not one exists. Custom scripts can cost lots of time and money – and it’s a lot easier for you to create a design with a particular script in mind than it is to create a custom script from scratch to match your design.

Using pre-made scripts isn’t a bad thing! This might seem like advice meant to crush your creativity, but think of it this way: it can easily take 20x as much time to code something from scratch rather than using a pre-made piece of code. Pre-built scripts are usually easy to adapt and re-design, and there are thousands upon thousands of them available through a simple Google search. Envato even has it’s own marketplace for premium scripts if you can’t find a free one that works: CodeCanyon!

Tip 05: Get to Know the Technology You Are Designing For

Let’s imagine that you’re a designer on a major project. You spend weeks laboring over a design and finally get the approval of your client… only to find out a week later that the design is nearly impossible to code and that it’s going to cost 10x as much as the client had budgeted; All because you designed the entire site without an understanding for what is and isn’t possible with a certain technology (Flash, HTML, etc.).

One of the most important tips that I can give out is this: It’s vital that every web designer have some knowledge about the platform that they are designing for. This could be HTML, Flash, PHP, or even a device like a phone or tablet. How much you learn is up to you, but the basic understanding of how a platform works will save you a lot of heartache in the long run. Far too often I’m given a gorgeous design that isn’t practical (or affordable) to code because it hasn’t been designed with practicality in mind.

Far too often I’m given a gorgeous design that isn’t practical (or affordable) to code because it hasn’t been designed with practicality in mind.

I’m not suggesting that you limit your creativity (just about anything can be coded with enough time and energy); and I’m also not suggesting that you go out and become a coding guru (you’d put me out of a job!)… But having even a basic knowledge of the technology that you are designing for will help inform your designs with some basic rules of thumb that will make coding them easier and more affordable.

For instance: if you designed a site to be built as a static web page, it would make sense to learn a little bit about how HTML and CSS work. Having even just a basic understanding of how HTML and CSS relate to each other will be enough for you to make better decisions when you are designing. The more informed a designer is about the technology he/she is designing for, the better they will become at designing!

Bonus Tip : Speak Up!

You don’t need to provide a 20 page style guide for every website you design, but communicating principles that might not show up in comps can be really important to the success of any coding project. If your design has special requirements (ie: it needs to be meet certain accessibility standards, or it must be 100% compatible with IE5.1, etc.), make sure you let the coder know up front so we can plan ahead for it. Finding out major requirements AFTER the design is coded is a recipe for expensive revisions, which aren’t nearly as fun or lucrative for coders as you might imagine! Most of us would much rather move on to another exciting project rather than spend months making revisions with a frustrated client.

Conclusion

The last thing that I’ll mention is this: if you follow these tips, not only will you find that your designs become easier and more affordable to code, you’ll also probably notice that your work will improve as a result. Taking a few extra steps to ensure that you designs make sense in the practical world of web development can be the difference between a good website and an exceptional website. I hope you enjoyed this article!