Utilizing Design Tools for an Efficient Transition into Development

Part 2 of 4 in the series, The Anti-Handoff: A Better Design & Front-end Relationship

Last time we talked about dissolving ambiguity by making sure our projects start off strong with clear communication and transparency in process. We established the project team and everyone's involvement throughout the various phases of the project. With that we’ve built a sturdy foundation and everyone is on the same page; let’s keep the momentum going.

Part 2: Design Tools

Using a Design Program, Smartly.

First, I want to start off by saying that it doesn’t matter what tools you use. By that I mean, use whatever you and your front-end developer deem most effective for establishing a design direction. If you want to use Photoshop, great. Macaw? Sketch? Fireworks? Do it. Anything that is going to make your work organized and intuitive for your buildout works. At Aten, we use Photoshop, and the CC 2014 edition adds a few new features we're working to integrate into our process. I'll spare you the nitty gritty, but here are a few features that work well for us and others that we avoid.

• Linked Smart Objects - Create it once, edit it at will and it will update across all instances in your files (e.g. logos, footers, buttons, ect.). Easy peasy. Watch Adobe's short video on Linked Smart Objects
• Clean, Consistent Layer Structure - This probably goes without saying, but clean up your layers. Name them something that is meaningful, like Page Title H Rule not Layer 203 copy 11. And make sure that whatever those naming conventions/structures are, they get used consistently from project to project. It will cause a lot less stress and frustration for front-end.
• Asset Exports with Generator - Using Generator in Photoshop you can easily export assets, like icons, logos and images. Just make sure that you label your layer assets with the extension for the file type you want them exported as. Run Generator… poof! you now have a folder full of assets for your front-end friend. More in-depth documentation can be found on Adobe’s site: Generate image assets from layers
• Layer Comps - Their intended purpose is to give you a way to see multiple views of one file, easily. Honestly, I have never been a fan, because it really isn’t that simple… no one knows to look for them and a slight shift of an asset without thinking can ruin every layer comp in the set. It’s just too fragile. With the release of Photoshop CC 2014, Adobe claims to have drastically improved Layer Comps. Unfortunately in time for this post, I can only speak from prior experience which brings up a lot of rage and feelings of inadequacy. If you are curious to dabble again, Adobe has released this video to shed light on how to use them now.

Grids & Vertical Rhythm

Two major components to think about while the design is being fleshed out are grids and the vertical rhythm.

You don’t have to have one grid for the entire site. You really don’t. But what you do need are a few solid layouts that are easy to understand and lend themselves to responding well. This is a challenge, especially in the era of content first design. We are no longer beholden to a standard 960px grid… we’re obligated to making sure our work is accessible on a variety of devices. For some more in depth reading on that, I’d like to point you to an oldie, but goodie—Ethan Marcotte’s article Fluid Grids. It really is the first thing you should read to get a handle setting up a responsive grid. And if you haven’t already, the next thing you should read is his book Responsive Web Design. When it comes to applying these grids to Photoshop, GuideGuide is our go-to. The extension offers the user the ability to set up a diverse library of grids and save them to boot.

Next, we set up a vertical rhythm, for designers who might be unfamiliar, it’s establishing the baseline. Not only does this help front-end create type and spacing systems that make sense, but it also makes us cleaner, better designers. At Aten, we’ve found that a 6pt baseline grid works for us in most cases. We make sure that our type styles and line heights adhere to multiples of that number. When separating out sections of the design, we have more consistency/control in spacing and front-end has a clear guide on how the vertical rhythm of the page is intended to be implemented. For more information on this topic, some great resources can be found here: Improving Layout with Vertical Rhythm, Vertical Rhythm using Compass.

Wireframing, Design Inventory & Style Guides

At this point, we have created a solid design system and visual language. Design challenges for the project have been addressed via a series of page layouts for our client to evaluate. Files are organized, front-end has taken a look and we’ve determined that the files are set up well for production. While not every page of the site has been designed, we have created a framework that gets us from the big picture to the finest details required for buildout.

Before design officially gets going, we create wireframes that act as a map for the content of every page in the site. This is an effective tool in keeping front- and back-end up to speed on what pages need to be built and the hierarchy of the content on that page. Since these wireframes are meant to only show hierarchy of content, the designer and front-end lead go through the wireframes together and create a design inventory of items that require design/guidance.

We also create a style guide that acts as a foundation for the design of the site. The style guide acts as the main point of reference for these missing design pieces, annotated in the wireframes. If something requires more design direction, the designer will mock it up for build. This process gives us the ability to continue creating intuitive page designs without a ton of burn time when we get into development.

This portion of the process is exceedingly important. Done well, it invites the front-end dev into the design phase with active engagement and investment before they’ve had a chance to begin their part, making sure that a transition into the development sprint is efficient and effective.

Next time we’ll go over how we handle design quality assurance during the development phase, everyone’s favorite task!