Preparing PSD files for coding
Great read in preparing your PSD files before they're coded.
1. Pixel Perfect is necessary:
"What you see is what you get". The PSD files you send to your developers, is what the developers will exactly interpret...meaning, make sure that every pixel, font or color better be what you want to use as intended. Here's more detail below:
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.
2. Notes: leave notes of details that are not obvious. i.e. drop down navigations
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.
3. Include Design Interaction: the more you show how the website interacts, the better the developer will be able to code it.
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?
4. 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!
5. Be knowledgeable about 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.
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!
*Yes, HTML isn’t the only technology out there, so if you’re designing with Flash or another technology in mind, make that the focus of your research… you get it though, the architect should know how to swing a hammer, even if he never does it.
RESOURCE: http://webdesign.tutsplus.com/articles/workflow/5-easy-ways-to-prepare-your-webdesigns-for-coding/
0 comments