Fresh

While much of the country is still reeling from the effects of massive winter-ness, PDX has had an untimely run-in with Spring for the last week or so. Our cabin fever has been relieved for the moment, and so our thoughts turn towards happy hour on the patio and unplanned use of vacation days.

Now, some of us have a not-so-healthy idea of fun (spring cleaning, anyone?). Of course, often it’s necessary to purge clutter and bad habits, and spring is as good a time to do that as any. In this spirit we wanted to take a moment to talk about some of the best practices we’ve found when working with your design files. Good habits can make the difference between a seamless development process and a complete nightmare, one that will try everyone’s patience and waste valuable time. We’ve even included a little treat at the end to help get you started. Ready to clean house?

1) Start with the end in mind
Back to the basics. When you build anything (even those one-off small projects), always use a grid. Choosing and sticking to a strong grid not only saves you lots of time when building the structure for your content, it ensures you will have a solid end result, not to mention the fact that it lays the foundation for a foolproof starting point when implementing the CSS.

2) Break it down
This may seem obvious, but organization is insanely important when building a design file. Name everything in ways that make sense to anyone else that might open it (i.e. a folder for navigation, then break it down for each piece within). Getting in the habit of doing this routinely will put any developer that works with your file at ease, and eliminates any questions over “where did you put that button?”

3) Smart & exact
Be a professional and avoid the temptation to be lazy in Photoshop. Always build to exact pixels, and zoom in to be sure – that’s what they make that magnifying glass for. Be weary of vector shape tools in PS, as they often miss the mark on pixels, and you get messy, ragged edges. When in doubt, select your pixels with the marquee tool and fill them. This same thinking goes for type – never resize type with the transform tool, always use the actual pixel height. Also, use text boxes to snap to your grid, and set padding, leading, etc. within the box. These elements also translate directly to CSS (another time-saver).

4) Refine your palette
The swatches palette is your friend. Stop color sampling things with the eyedropper tool and hoping you have a consistent file. Take the time to create your swatches as you go, and you’ll have the beginnings of a style guide ready for anyone who needs to use your files.

5) See it clearly
Transparency can be great for building effects, but unless you’re going to flatten all those layers into a JPEG in the end, you are creating unnecessary work and file size to make transparent PNGs. If you use transparency to find the perfect tone, resample the color with the eyedropper and make the object 100% with the new color choice. Also, be aware that layer effects and blend modes don’t always transfer when saving files to web. When in doubt experiment before committing to it or find another way to get the effect.

6) Be a master
I’ve found that when building large sites with huge amounts of adaptations, having a master file with the base elements is the simplest way to go. For example, one PSD will house the master navigation, footer, logos and any other repeated items, along with a file for all button states and icons, assets and such. This is a great way to make sure you have consistency among all the various pieces.

7) Stay lean and mean
In addition to that last tip, you can also save yourself valuable file size by flattening reused pieces from a master file to drop into subsequent files. This also reduces the margin for error, as you can only make changes to the file with all the layers.

8) Take action
Also another useful tip for building very interactive, feedback rich website files: break out complicated actions into their own file where you can concentrate on every aspect. For instance, I recently had the need to show every state for an interaction in an ecommerce site where a user would check the balance for and apply a gift card to an order. All the interaction was going to happen in place, and it’s really difficult to illustrate that in one page comp. It was much better to break it out and show all the states in line to cover all the details.

9) Be thorough
Don’t just take the word of your monitor if subtlety is a key to your design. Take a look at it on various monitors, especially those with an sRGB profile (standard on PCs). Check for contrast and try to get an acceptable amount of consistency between appearances. You can’t make this part of the design perfect, but make sure important details don’t fall out, and your hierarchy still holds up.

10) Have some style
The extra work of building a style guide will be worth every minute when you hand off your files to someone else to build. Including all the needed info about styles used, standard elements and measurements are essential to making the design come together. While this may seem hardly necessary for smaller sites, it will save your sanity when tackling something large.

To help all of this permeate your process, we’ve included a downloadable treat to keep for reference on best practices with your design files. Hopefully these tips will help keep your designs tight and ultimately more successful when produced. Enjoy!

Download the zen design super awesome treat ›