A Designer’s Guide to Dev Handoff – Introduction


Introduction

When designing a web site in Photoshop, there is a common disconnect between the tool that you are using and the medium you are designing for. Although it has evolved somewhat, the Photoshop software was created for non-interactive design, and for a publishing medium that mapped quite directly from the Photoshop screen to the printed page.

When you’re designing for the web, there are two big differences in this regard:

  • Being an interactive medium, items on a web site have an element of time and behavior—such as what happens when you hover over a link, or a drop-down menu.
  • All the little pieces that make up a web page are rendered separately, and they need to be positioned using entirely different techniques than exist in Photoshop.

Page Setup

Size and Layout

The most common layout for desktop website experiences is based on a 960px width grid. This accommodates the majority of user’s viewports and allows for the full width display of your design without the user being required to scroll left or right to view any content that is being cut off. In conjunction with the 960px common design width, a targeted height of approximately 600px satisfies the mystical ‘above the fold’ requirement.

While the most common layout is based on a 960px width grid, that does not mean that it is the best choice for modern website layout or design. Unlike print, the web is not a fixed medium. There are many options for width and height dimensions and in most circumstances the content must respond to all possible environments.

handoff_sizes

For best results, it’s often more advantageous to design a responsive or fluid website. A responsive site is still based on a grid system, but using a more flexible grid. It relies upon breakpoints at which to reflow the content – or modify the layout. Often the changes between these breakpoints are fluid. Meaning that there truly is no design specificity beyond the grid definitions before and after the fluid reflow of content.

How Do You Design Responsive?

Keep the design simple. Focus on the content and create modified versions of your layout for different grid widths as necessary to properly convey the design specifications.

Guides

Guides are a must for properly aligning elements during the design phase; however, they are often just noise when a developer uses your Photoshop files. It’s important to properly align and remove any unnecessary guides within your document. This makes it easy for a developer (or another desiger) to quickly garner knowledge from your guides by turning them on and off.

In the interest of brevity and necessity, you should strive to keep guides to a minimum. Block off the larger sections of your layout by outlining your content and giving the developer a road map to follow. Sections could e things like the header, footer, content, ad-space, etc.

Name all layers

You should become accustomed to naming all of the layers using common terminology or names that are easily recognized. For example, assign names to the layers that represent the action or intent that the layer is used for, such as:

  • button_native
  • button_hover
  • button_active

The point is to establish a common naming convention and language that both the Designer and the Developer can mutually understand and recognize.

handoff_layers_groups

Use layer groups

Group similar elements into layer groups, also referred to as “lockups”. Logical layer groups include: “Header” and “Footer”, or even “codeline lockup”. It’s also good practice to group like items that constitute a navigational element or other design elements that have multiple states such as icons, buttons and menus.

It is also a good practice to use nested layer groups. The nested groups could then reflect the hierarchical structure of the layout (this may require a discussion with a Development team member to assess appropriate groupings). An example of a layer group called “Navigation” might contain other layer groups such as “Main”, “Breadcrumbs” and “Search.” Nested layer groups can also help the developer envision how elements should be arranged from a structural point-of-view.

As a final step in the creation of the file before hand off, collapse (don’t flatten) all layer groups.