Practice Consistent File Management

One of the biggest things a designer can do is prep and package files in the same way every time. How many times have you opened a Photoshop document with hundreds of unnamed layers? Don’t give this type of file to a developer. Every layer and style—regardless of what software you use—should be named appropriately. Styles, color swatches and typography should be consistent throughout the design. Name files and styles in the same way for each project.Group like elements in a similar manner and use a consistent folder system. That way the developer doesn’t have to relearn how to find parts and elements with each new project.

Use Web Fonts

One of the biggest challenges for design projects that include print and digital pieces is typography management. Don’t use desktop fonts for print projects for web or app designs and just assume they will work. For digital projects, opt for Web Fonts for typography. This means you might have to find a similar typeface for the web to match what you are using for print. Don’t make the developer do this for you. Pick out the comparable Web Fonts and use them from the start. You can even note print versus digital typefaces in your style guide.The reason behind this is simple: Embedding fonts can get a little tricky. Plus, Google Fonts are free and will ensure that you don’t incur additional project costs. (While you are at it, consider doing the same thing with icons and use a package such as Font Awesome, which allows the developer to style icons using CSS, not import a bunch of image files!)

Package Image Assets

While we are on the topic of image assets, exporting and packaging files properly is super important. While a developer can open and export all image files to meet their needs, you could ask what they need and do it along the way. This ensures you get the crops you want on images, while compressing files to help your website load quickly. Don’t try to do this on your own. Ask the developer how files should be saved, named and compressed for best use.

Think About the Environment

There are just so many device sizes and aspect ratios to think about when designing websites and mobile apps. As a designer, you need to know the canvas size, margins, padding, etc. to create a mockup that’s actually usable. Talk to the developer before you start drawing to ensure that you know what the design environment looks like before you start. There’s nothing worse than a design that looks amazing in Photoshop or Sketch and falls flat in production. You need to know these things in advance:

• If the framework has specific padding specs at different sizes
• The gutter width between columns (and if it varies)
• The size of the most narrow screen size the developer will code

Ask Questions

It’s been mentioned a few times already, but communication between the designer and developer really is the key to making all this work. Communication can make or break projects, impact deadlines and influence the end project design and functionality.

Take your developer to lunch. Get to know them. Ask plenty of questions along the way. If you aren’t sure whether something will work or not, just ask. Developers aren’t scary people and it’s a lot easier to answer a question early in the process than have to rethink and entire concept.

Learn Some Dev Basics

While you are talking with the developer and asking questions, dive deeper. Learn some development basics if you don’t already have these skills in your design arsenal. Designers working on digital projects should verse themselves in:

• HTML and CSS (you should be able to change a font size or color and understand how the two are different)
• Common user patterns (design for the way users will interact with content)
• Accessibility standards (so your design will work for more users)
• What types of elements need to be served as images and what can be created using pure CSS
• How breakpoints work in responsive layouts
• Trends in website design

You may never actually write code, but learning development principles will make you a better designer because you will understand the value of the tools and workflows.

Use a “Living” Style Guide

The design process extends to development as well. Designers, you need to recognize that the developer is just as vital to the design process as you are. With that in mind, create a “living” style guide that not only includes color and fonts but components as well. Everyone should be able to access and update the document as the project comes to life. A good style guide will help everyone working on a project maintain consistency with visual elements, provide context for design choices, serve as a point of collaboration for the project and help standardize code. The living style guide allows everyone to share ideas and provide guidance throughout a project. It’s not just a document that someone creates right before a design goes live. Put the following information in the style guide to make the most of it:

• Logo styles
• Color palette
• Font palette
• Icon palette
• Navigation menu elements (and there they link to)
• Layout options for different pages
• Code snippets that get reused throughout the site (such as buttons)

Use the Grid

Respect the grid. In responsive website design, the grid is more than just a guideline for placement of elements on the screen, it can also dictate where elements go at different screen sizes and how columns stack and shuffle. The grid can help you design and maintain flow. (The challenge is that you can’t arbitrarily break design rules. Think about it like this: Your design has four content blocks lined up across the screen in a row (with equal gutter widths) on a full-screen desktop monitor. Then on a tablet, those blocks shift to form two columns, with two rows. On a mobile device they shift to form a single column with four rows. Understanding how the grid impacts the size of objects and how objects will shift on different devices is important because it can dictate how you design for the content you have. Think about that same scenario again. What if you had five content blocks? It would require a redesign to ensure that you create a consistent visual outline.