7 Tips On Bridging The Gap Between Designer & Developer!

Though the line is diminishing lately, developers and designers have very different roles in the creation of a product. Designers are typically preoccupied with things like graphics and interface features such as the placement of menus and color schemes. Developers take care of the behind-the-scenes stuff that makes a product work — usually a lot of things involving code. So, it’s not unusual to have a disconnect between designers and developers, sometimes to the point where the only exchange of information that occurs is over an office party or when the design files are sent over to the development team. This divide may happen because the two sides are working in departments at opposite ends of a building and we are too lazy to walk down the side, or if this was not it, even in different cities work being done remotely. No matter what’s causing the estrangement between designers and developers, bridging the gap can result in a more cohesively designed and developed product.

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. Too many cooks might spoil the Broth but by dividing the task of who prepares the sauce and who does the cheese, speeds up the process!

2. HANDOFF BY DESIGNERS

The handoff from design to dev is crucial. It usually requires designers moving off the 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. WALKTHROUGH 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 graphics 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.

3. DEVELOPER HANDOFF

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. This will be available in the extension bar of your browser window at all times like your best nightmare!

4. COMMUNICATION STYLES

Communication is culture first, tools next. Having an open culture of easy communication where anyone should be able to reach out to anyone within an organization helps easy information flow.

A failure to communicate can lead to a lot of misunderstandings and even different interpretations of the same general goals. For instance, the creator of an app may set apparent guidelines for what they expect from a finished product. The design department may come up with a way to transform this vision into a beautiful reality. However, when the development team gets the files for the prototype, those impressive design features may require a lot more coding work than what was anticipated, which could make it more difficult — or impossible — to get the product done by the planned launch date.

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 to code: 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 and anyways Divide and Rule only helped English people! 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 because the food is important. 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.

This story was originally published on http://www.queblesolutions.com