Top 12 tips for designing for developers

Designing for developers. Some might say these two are a different breed, but in my experience there is one thing we will always have in common: the hunger for perfection in our work.

Here are our top 12 tips for designing for developers:

1. Always design with layout grids

This will ensure your content is organized and is laid out consistently across multiple screen sizes. The grids in your design software should correspond to the grids a developer uses to markup the HTML.

2. Design with increments

An increment is a measurement used to determine the size and position of elements on an app or webpage. This not only helps the designer layout their page pixel perfect, it also makes it easier for the developer to layout the design as HTML. 

3. Offload designs using collaboration tools

Gone are the days where a developer would have to open up a designer’s bloated Photoshop or Illustrator file and painfully go through each layer to access assets and measure page elements.  A tool like Zeplin will help here, and it’s available for design software such as Photoshop and Sketch.

4. Design with reusability in mind

In an effort to provide an optimal experience to users, designers should always focus on the consistent treatment of design across their website or app.

5. Provide visual style guides

These are resources you provide your developer to quickly reference common styles used throughout the designs. Visual style guides can be as simple or complex as you want them to be. They can simply be static mockups or snippets of HTML and CSS. Separating these design elements from the overall mockup sometimes makes it easier for the developer to set the common styles before they start writing custom styles.  

6. Provide interactive guides

As per the visual style guides, I find it useful to mockup up visuals that illustrate how I see the user interacting with features in my design. An example would be how a user navigates through an app with swipe and pinch gestures.

7. Get smarter with color palettes

Color is a science and something designers are obviously passionate about. Providing the developer with a color palette with associated hex values will save a lot of time and will act as a useful reference point for the entire team. It will also make it easier when a developer comes to create a CSS or SASS document with all of the common colors.

Google provide an extremely useful resource. The color palette for their material design. You can also download and import the color palette into design software like Sketch as well as browsers and developer tools.

8. Design in vector and export as SVG

SVG (scalable vector graphics) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. An SVG can be manipulated directly in the code so it makes for a great format to pass through to developers.

9. Use online prototyping tools

Developers will always need some way to reference a designer’s mockups as they build websites or apps.

10. Provide process flow diagrams

Process flows are usually a resource that is created earlier in the IA phase rather than the visual design phase. However, I find basic mockups at any stage of development is a useful tool to communicate ideas to the developer.

11. Design with real content and data

Rather than designing high-fidelity mockups using placeholder text, base your design around real data and content scenarios. The developer should not have to address these challenges further down the track.

12. Always keep the lines of communication open

It’s important to keep dialogue going with developers throughout a project. It does not have to be a major review of work each day, but more of a quick update each day of progress. At this stage you may find that the developer is missing assets or needs clarification around the design thinking. 

Conclusion

Designing for developers is all about forward thinking. Designers who invest time in researching technologies and up-skilling themselves in front-end development tend to make smarter design decisions. This will ultimately avoid any re-work once it’s in the developer’s hands. Work with your developer and see the design through to the end. Organize regular reviews and adopt some kind of process from the Agile methodology.

When that app, product or website goes live, you can both sit back and feel proud of what you have created.