How can I code a complete website

5 Easy Ways to Prepare Your Web Designs for Coding

Congratulations! You have designed your site and you are ready to be sent to a coding team. Maybe you have a developer in mind or compare the popular PSD-> HTML stores available in the market. You may even plan to program everything yourself. Whichever solution you choose, there are a few tricks that I think every designer should know when to prepare their designs for coding into fully functional websites.

Philo Hermans is a freelance web developer based in Utrecht, the Netherlands. He has over 9 years of experience and often works with designers to turn their designs into fully coded websites or web applications. Philo is also a successful plugin developer for CodeCanyon and has regularly written at Nettuts +. If this introduction isn't available, let's start with the tips!


Tip 01: make it "pixel perfect"

The theory behind creating "pixel-perfect" comps can be expressed as follows: For us coders, what we see is what you receive! Most programmers don't interpret your designs for you. If you hand in a design comp with incorrectly matched margins, fills, font sizes, colors, etc., most developers will code the code exactly as we see it - including the bugs! This can mean a lot of frustration and a waste of time (and money) making changes. so save yourself a headache and send pixel-perfect comps if you want pixel-perfect coding.

Before you send your design into the coding phase, consider an hour or two with a fine tooth comb.

The workflow solution here is simple: before you send your design into the coding phase, take an hour or two to review it with a fine comb. You don't necessarily need to document your entire design (although some developers will), but it is important that the following items are exactly what you want.

  • Margins: All margins between elements should more or less match. If you want all of the margins to be 25 pixels, make sure they are exactly 25 pixels within the design.
  • Upholstery: This is the same rule as with borders: make sure the padding of the elements is what you intend to do.
  • Use of fonts: Make sure that every time you use a font in the design it is exactly what you want to encode. If you want "all paragraph text to be 10 pixel Arial by 18 pt line height", make sure every paragraph in the design is set in this exact way.
  • Colours: If you have an exact color in mind, whether it's a font, background, or something else, make sure you are using the exact hexadecimal value you plan to use when coding.

It's also worth setting some "guidelines" in the design files you submit. An easy way to do this is to use a grid template such as the one offered by the 960.gs website. The guidelines in the grid template ensure that all element widths are accurate. So instead of having a container that is 957px wide, this is exactly the 960px you intended.


Tip 02: leave notes

If you want something it is not obvious, e.g. For example, a navigation menu that needs to move down when you move the mouse to the top of the screen. Make sure you make this clear by adding notes. There are a few different ways to do this (I've seen everything from PowerPoint documents to handwriting prints on them), but my favorite way is actually pretty simple: use the Note tool in Photoshop (see picture below). The note-taking tool ensures that notes are automatically displayed when a developer opens the file and can quickly see what the designer is intending to do.

If you're not using Photoshop, that's fine. Most of the graphics programs I've found (from Fireworks to Illustrator) have a similar way of adding notes. If for some reason this is not possible - just put your notes in a text file that you will use along with the files that you gave to the developer.


Tip 03: Include designs for interaction

The more detailed your design is in terms of how it interacts, the easier it is for developers to code it. Include some examples of what your design will look like when interacted. Each design will be different, but the important interactions that should not be forgotten are:

  • Drop down menus
  • Link / button hover states
  • Image regulator
  • Light boxes
  • Tooltips
  • Form elements

The reason for this tip is this: if you're not showing a developer what a particular interaction should look like, chances are they're using an unstyled generic design that can turn out like a thumb. Sure, there are some programmers (like me!) Who will try our best to guess what you would have wished for. Why forget something so important when it only takes a few minutes to design it yourself?


Tip 04: think of a script

Time is money. So if you're designing a website with a nice looking slider and you know exactly which script is perfect for it, let the developer know before they start coding. Unless you have a specific script in mind, it is probably worth your time to spend a few minutes looking for an existing script. Custom scripts can cost a lot of time and money - and it's much easier to design a specific script than creating a custom script from scratch that fits your design.

Using prepackaged scripts isn't a bad thing! This may seem like advice that will crush your creativity, but think this way: it can easily take 20x as long to code something from scratch instead of using pre-built code. Ready-made scripts are usually easy to adapt and redesign. There are thousands upon thousands of them via a simple Google search. Envato even has its own premium scripts marketplace 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 you're a designer on a large project. You work on a draft for weeks and eventually get approval from your client. Only to find out a week later that the design is nearly impossible to code and costs 10x what the customer budgeted. All because you designed the entire site with no understanding of what is and is not possible with a certain technology (Flash, HTML, etc.).

One of the most important tips I can give is this: It is vital for any web designer something Knowledge of the platform for which they are designed. This can be HTML, Flash, PHP, or even a device like a phone or tablet. How much you learn is up to you, but having a basic understanding of how a platform works can save you a ton of hassle in the long run. Far too often I get a gorgeous design that isn't practical (or affordable) for programming because it wasn't designed for practical use.

Far too often I get a gorgeous design that is impractical (or affordable) for programming because it wasn't designed for practical use.

I'm not suggesting that you limit your creativity (almost anything can be coded with enough time and energy); nor am I suggesting that you go out and become a coding guru (you'd get me off a job!) ... but even if you have just a basic understanding of the technology you're designing software for, this helps Keeping your designs informed, basic rules of thumb that make coding easier and cheaper.

For example: If you've built a website as a static webpage, it makes sense to learn about how HTML and CSS work. If you only have a basic understanding of how HTML and CSS relate to each other, you can make better decisions as you design. The more informed a designer is about the technology he / she is developing for, the better at designing you will get!

* Yes, HTML isn't the only technology. So if you are working with Flash or any other technology, make sure that the focus of your research is on you. However, the architect should know how to hit a hammer. even if he never does.

Bonus tip: speak up!

You don't have to provide a 20-page style guide for every website you design. Communicating principles that may not appear in comps can be very important to the success of a coding project. If your design has special requirements (that is, it must meet certain accessibility standards, or it must be 100% compatible with IE5.1, etc.), make sure you let the coder know beforehand so we can plan ahead. Figuring out the key requirements AFTER the design is coded is a recipe for expensive revisions that are nowhere near as fun or lucrative for coders as you can imagine! Most of us would rather move on to another exciting project than spend months doing audits with a frustrated client.


Conclusion

The last thing I want to mention is this, if you follow these tips, not only will you find that your designs become easier and more affordable, but you'll also likely find that it will make your job better. A few extra steps to ensure that your designs make sense in the practical world of web development can mean the difference between a good website and an exceptional website. Hope you enjoyed this article!