Working with many different designers can be tricky in that the file structures and organization tends to vary from person to person. Fortunately, most of the designers I work with prioritize creating well-organized, highly usable files, which makes my job of taking those files and translating them into code much easier.
Even still, there are a few things that I see happen with designers that are less familiar with designing for the web that make a huge difference to the developer who takes over their files. Here are my top six suggestions for things you, as a designer, can prioritize in your files to make for very happy developer.
1. Organize Your Layers
It is impossible to overstate how important well organized layers and groups of layers are to both my workflow and my sanity. I need to be able to turn layers and groups of layers on and off to get at various components of the design (check out my video on slicing for more on how that works).
Also, if I’m trying to get at a piece of information in the file, it is next to impossible if I’m looking at a mess of layers that haven’t been named coherently and haven’t been grouped at all. Even worse if they’re flattened and I’m unable to get at a single component or get into the text to see the formatting!
I love the Photoshop Etiquette site’s tips on layers (really, everything over there is good advice).
2. Use Full Pixels
This one comes up more often with Illustrator than with Photoshop, but it’s important in both. The web is a pixel grid, so the design needs to respect that and use full pixels for all elements including font sizes. Half pixel values just don’t work, and if you use them your developer will be forced to adjust and round and otherwise tweak your design.
Along the same lines, people who are used to working in print sometimes have issues with scale and resolution. It’s important that your files be the correct actual size, again so that your developer isn’t forced to do the conversions and potentially face related issues with the design. When designing for the web, use 72 dpi and pay attention to the pixel dimensions.
3. Use Fonts with Web Licenses
Talk to the client early and often about licensing! It’s unfortunate for everyone involved if we have to have the first conversation about licensing when we’re ready to start development, particularly if the news isn’t good (e.g. particular font license is very expensive, or maybe not even available).
This has become less of an issue as web fonts have become more common, but I still see designers use fonts that aren’t available for web, or use fonts that are available but with a cost that the client doesn’t know about. There are great alternatives for many fonts if the client is budget-conscious and it’s better for everyone if you decide what the font plan is early on rather than trying to swap out fonts after the design is approved (it’ll never be quite the same).
For more on web fonts, check out my comprehensive Learn Web Fonts resource page.
4. Use a Grid – Any Grid
Along with using whole pixel values, it’s helpful if a design is based around a grid system (and if all elements are snapped to the grid, or at least mindfully placed to break the grid). I really don’t have a preference as to which grid system each designer uses, and in fact I think it may well need to vary from site to site based on the design plan for the project.
That said, using any grid system will ensure a more consistent, precisely aligned, and easy to measure and code site.
Tuts+ has a nice introduction to grid systems to get you started if they’re new to you.
5. Be Consistent
Again, these are very connected concepts – consistency is helped along quite a bit by using whole pixel values and grid systems, for example. However, consistency also goes beyond those things. When I think of consistency in web design, I think of things like having a plan for the typography across the site such that you can come up with a coherent style guide:
Ideally, your style guide should include all the various HTML text styling options, including:
- regular body text
- bolded text
- heading styles for heading levels 1-6
- lists (although if you can avoid fancy contrasting numbers and bullets that makes things easier)
- links and link hovers
- form fields
Where possible, it’s nice to be consistent in your use of fonts, sizes, and styling across the site both because it makes the coding easier but also because it presents a consistent visual hierarchy to the viewer. If you want to break the pattern, do it intentionally and in such a way that you can point it out as a non-pattern to the developer.
Similarly, consistency in spacing between and around elements can be helpful (and again, grids are your friend for this).
6. Provide Static Comps
I’ve only recently started asking designers for static comps for each page and view of a site after having a couple of designers provide them and realizing that they are extremely helpful. By “static comp,” I mean a snapshot of the design that isn’t impacted by layer or group visibility, font application, and other things that can be altered accidentally in Photoshop.
There are two main methods I’ve seen for providing these comps, either of which work for me:
JPG Image Grabs
A couple of the designers I work with provide me with neatly organized and titled JPGs of each page layout along with additional images showing key hover states or interaction points. At first I wasn’t sure if this really provided additional benefit but I’ve found it to be really helpful for two things:
1. Ensuring We’re Seeing the Same Thing
I spend a lot of time turning layers on and off for slicing purposes and messing with type to get the specific styling information, which can throw off the way the file looks in Photoshop. The risks here are mitigated with well-organized files where unnecessary layers have been completely removed before the files are sent to me, but even still having a static, non-editable reference image is a nice way to cross-check and make sure the view I have is the same one the designer and client have approved for development.
2. Checking Our Work
Photoshop can be a cumbersome program to work with, so especially when we’re at the testing and wrap up phases of a project it can be much nicer to whip open a clean JPG and compare that with the live site. When we just need to check a font style or the placement of a sidebar widget, JPGs are the way to go.
The layer comp Photoshop feature kind of sneaks up on you. It comes across as vaguely interesting at first, but once you’ve used it a few times you suddenly realize how insanely helpful and magical it really is.
The general idea is that you can create a variety of layer comps within a Photoshop file where each is a snapshot in time of your file, including the placement and visibility of various elements.
One designer that I work uses layer comps to demonstrate hover effects for various areas of the site, meaning she’ll have one layer comp showing the non-hovered page, one showing the header hovers, one showing the content hovers, and another showing the footer hovers.
Another use case for layer comps could be showing different states of a module, for example using different layer comps for the standard and sale displays of a product in an e-commerce site.
For a quick, basic tutorial on Layer Comps, check out this video on the Adobe site. However please don’t name your layer comps the way they demonstrate!
I’m sure there are many many features of great files that I’m missing, but these are the top things that come to mind when I think about what I really like to see in a design file.