7 Ways To Bridge The Gap Between Design and Development


7 Ways To Bridge The Gap Between Design and Development

Most modern day work culture separates designers and developers into silos. While I was at a larger company, there was very little communication between our design team and the development team. We were separate assets and literally in different corners of the building. Once the designs were complete, designers would digitally hand off the files to the developers to integrate the designs without any form of communication. There weren’t any daily discussions, no brainstorming across silos or ideas being exchanged.

This led to 5 main problems:

  1. Created unnecessary multiple feedback loops between design & dev.

  2. It limited the possibilities for creating new and creative things due to lack of knowledge of each other’s domains.

  3. QA took more time and was a larger issue than it was supposed to be.

  4. People had overlapping skills but we couldn’t leverage their skills.

  5. We couldn’t take advantage of new tools for collaboration.

Is there a way to minimize the above problems? Is it possible to create an environment where design and development teams can collaborate effectively and provide maximal value to the client/end user?

Here are 7 ways to bridge the gap between design and development

1. INVOLVE DEVELOPERS EARLY IN THE PROCESS

Even if you’re designing with tools like photoshop, sketch, etc. , get developers involved in client calls. Having their insight into how things translate into a web application and how we structure pages might lead to the evolution of a different design. Integrating them early on also ensures a seamless transition of design to HTML.

2. HAND OFF BY DESIGNERS

The handoff from design to dev is crucial. It usually requires designers handing off design files created using photoshop, sketch, or another tool and the developer converting those designs into HTML.

a. Design Files – stay organized

i. When handing off a design file, label every single layer.

ii. Group layers based on sections on the page.

iii. Use smart objects/layers within Photoshop. It helps create layer groups easily for different sections within the website that developers can easily use by double clicking on the layer that opens into a new tab.

iv. Use color coding to indicate hover states, click states, and other interactive elements.

b. Walk through the designs

Once you have completed a design, have an initial call with the devs to go over design. It might seem redundant at first but it helps you cover minute details that might be missed during actual development.

c. Think Responsive

While designing a graphic asset, think about how the application will work on devices of all sizes and shapes. Consider typography, relative compositions and how these assets would look on mobile, tablet and desktop. Here is an example of assets I provided for a responsive hero image. Notice that each has been optimized for its respective device, considering both load time and visual display.

3. DEVELOPER HAND OFF

I have often seen that once developers turn the designs into HTML, the design and web page aren’t identical. Things like the font spacing being off or images not being aligned are common issues. Here are a few things that developers can do before the designs are thrown into QA.

a. Take full page screen captures

I use a handy chrome plugin to take full page screen caps (it will scroll the full height of the page.) Download this chrome plugin here. This will be available in the upper right hand corner of your browser window at all times.

b. Use Skitch

Skitch is an annotation tool helps add notes and information to designs. It can be used to notate design discrepancies with a visual reference.

4. COMMUNICATION STYLES

Communication is culture first, tools next. Have an open culture for easy communication. Anyone should be able to reach out to anyone within an organization for easy information flow. Here are some things I’ve found effective in the past and with current clients:

a. Be part of the daily scrum with clients

It has helped me stay more creative and think of end users while creating designs. b. Use Slack: I have slack on my phone and have a dedicated channel within slack for my clients. Slack is awesome, it has helped me share files, send screen shots and always be available to our dev team, no matter where I am.

5. INCREASE OVERLAP OF KNOWLEDGE

Over the years, I feel I have grown more effective as a designer as I have learned more about front end web development.

a. For designers

i. Get designers to learn the basics of coding. Here are some resources to learn coding: Intro to Web Development, Making a website , 30 days to learn HTML & CSS, Intro to HTML & CSS.

ii. Learn about web frameworks and try to delve into how design elements are translated into HTML.

b. For developers

i. Learn how graphics are used.

ii. Enroll in design meetups and design events to get perspective.

iii. Work on the details. One of the most desirable qualities for a front-end developer is attention to detail. Practice by comparing your HTML side by side with the design, try and spot the differences.

6. CREATE PRODUCT TEAMS VERSUS FUNCTIONAL TEAMS

I have seen larger companies breaking down teams by function rather than products. Imagine a team of 15-20 designers, developers, user experience specialists and QA’s in different floors of the building. Things can get difficult. Instead, break teams down into individuals working together on a product. Let them all sit together and share lunches if possible. If you have teams distributed across the globe, create dedicated communication channels (like Slack channels) and virtual meetups for teams.

7. SHARE THE LATEST DESIGN TRENDS

As a designer, it’s important to stay in sync with current design trends. Share interesting articles on design, designs you find fascinating or just beautiful designs with your team. As a developer, being up on the latest design trends and methods of implementation makes you exponentially more valuable.

Here are a few resources that I go to for inspiration and trends:

i. The Best Designs – design inspiration

ii. Design Shack – design inspiration

iii. Tympanus– tutorials, interactions

Stephanie Hager is a multi-faceted creative whose background includes branding, concept development, UX/UI app design, & responsive web design. She has a passion for designing cutting edge web-applications & graphics, and always keeping an eye on the latest trends. Stephanie brings design expertise, artistic vision and enthusiasm to Scalable Path and its clients.