Reduce the Design-Development wars with these 5 important steps

Designers and developers often work in the same team and keeping them on the same page is not an easy task. Both the parties are sometimes unable to incorporate each other’s needs: Designers always feel that their designs are not implemented as intended, while developers rage over the nitpicking in the implementation process.

Having worked in a high-pressure environment, Sukanya Ghosh, a Project Manager with 14 years of experience, has observed how strongly design and development go hand-in-hand. “Of course we know, managing both efficiently is the key to success, but can also be quite a nightmare. When we get down to it and talk about the actual process, communication becomes a difficult task and it’s a real challenge”, says Sukanya.

Working with each other in harmony doesn’t sound like much of a deal and most teams in any organisation get along well without much hassle, but with designers and developers, it usually quite the opposite as the effort its takes to navigate the project around their equation ends up taking away from the overall productivity.

The Problem

Even when designers put in all their effort and give their best work, there is no guarantee of whether the developers will be able to code it or not. It’s easy to make everything look greats and work perfectly on a Photoshop mockup and prototypes. The real magic is making things translate to the web, and not fizzle out in HTML.

This constraint is explained quite well during the development of ArtStation where "The mockups looked sexy as hell while the interface just didn’t work properly."

Designs look amazing for their appealing colour combinations, customized buttons, and attention to detail, but implementing it can become a mammoth task for a developer. Not for lack of skills on the developer’s part, it’s just the nature of the work. Sometimes the code isn’t very flexible. Empathising with this for the designer is hard and leads to the escalation of the conflict.

With a few simple changes though, both sides can end the war and work together as a great team to deliver extraordinary results.

Here are the five steps to help tackle this problem.

Communication: The key to collaborate

A concise schedule for communication is the need of the hour for the Design-Development teams. Even before you design the mockup, make sure it is easily accessible to integrate the logo, icons, background, etc. for the website.

Wireframes that give visual representation to verbal explanation should be used with storyboards to convey UI elements. This brings a smooth flow of interaction helping the developers to implement the design precisely.

Furthermore, a project management software like Trello can provide you an advantageous leverage to make clear communications. It gives an access to a wide assortment of tools to plan and communicate at every step.

Michael Abehsera, a lead design blog editor suggests how technology and better understanding is fading the barriers between design and codes. Many experienced developers and designers love using Spec sheets. It becomes even more important while working with international teams to avoid miscommunication due to language and cultural differences.

Spec sheets can become rigid and difficult when you have to work on complex projects, spelling out every single feature, box, and line. It is still highly recommended because it decreases the development challenges and addresses the design-development issues adequately.

Use Same Building Blocks

Four Magic Words: Share the Components Library.

User Interface needs a lot of components while developing forms, text styles, and containers: these are some major components needed to prepare the overall template of your website. “Components Library” and “Front-end Framework” are two terms that can be used interchangeably.

As designers, if you and the developers work with the same library components, the task becomes way easier. You can always buy some lightweight framework like Purecss, Getbase, Muicss, Bulma, or Getskeleton in order to work together seamlessly. Besides, you can always use these to apply some light customizations to make it design and development friendly.

Audrey Hacq sums the usefulness of shared libraries as, “Working with components is great but being able to share them with designers is so much better!”

So, why did we talk about only the small library components? It’s because small ones integrate well with the rest of the technology which is being used for the project. Besides, large frameworks gives the developers a lot of code that is not even used by the end of the project. So it’s much smarter to utilise small framework to save time and effort on everyone’s part.

Expand your skill sets

Expanding or developing your skill sets is not something that you don’t know, but zeroing it down to some important aspects of both designing and developing could help a lot. Designers familiar with the capabilities and limitations of web development essentials, such as JavaScript, HTML, and CSS, can use the knowledge to work in accordance with developers.

While working on a website form in 2014, Shirley Perierra didn’t think changing a drop-down box to multi-select checkboxes in the final design iteration would be a big deal. Giving the developers no notice about this change, she expected no changes in the timeline. The development team was thrown off and the project went three weeks over the deadline. Since then, she’s learnt the lesson, and can now understand the limitations of code and keeps them in mind while making her designs functional. Here are a few tricks to keep in mind:

• Don’t design things in 300 dpi. Stick with the design and developer friendly 72 dpi.
• Use standard pixels on margin-top in one spot.
• Use standard font type, size, and colour.
• Avoid using Photoshop for things such as type on a path, as it is not well-suited to browsers.

The wind blows both ways, and it is important for the development team to understand the basics of design like colour, alignment, and navigation models. Understanding the logic behind why a design has been created a certain way can help go a long way in the implementation process.

Design elements like aesthetics and decorations that may appear arbitrary to the developer might actually serve an important purpose on a browser. Attention to detail could be highly contributed to a design phase that might be dismissed while developing. Sarah Green explains the essence, saying "The solution lies in the possibility of teaching and learning from one another since both sides have the missing pieces of knowledge."

Enhancing skills enables each party to question design and code and understand the responses while also building empathy between each other, the users, and the other teammates. This reflects with the success of the project and pushes for the changes that are most required for understanding.

Feature Teams

Feature teams are the teams that are divided into an organization for the project they are specifically working on and not the niche to which they belong. If you are a team of two designers and three to four developers as you are working in a startup, there is a fair chance that all of you will be working on the same feature or a product.

"Great things in business are never done by one person. They’re done by a team of people." – Steve Jobs.

In case you work in a big organization where the team of designers and developers is larger, all of you might have a different set of projects under you. Hence, the ones working on the same project are agile and called as the “feature team.”

Jess Eddy, a Digital product designer, coherently explains why a feature team which is “a long-lived, cross-functional, cross-component team that completes many end-to-end customer features — one by one” is important for the success of a project.

You can understand this better with a scenario where we have a team of two designers, two developers, a programmer, a content strategist, and a communicator to lead a project. We, as a team, are quite comfortable to work with each other and enjoy the discussions and ideations. This makes our team - a ‘feature team’ have a high success rate. We get a positive response from the maximum number of proposals from prospects approaching us for projects.

Working in close proximity helps create transparency which benefits the entire project, bringing positive outcomes.

Understanding UI Reviews

The process of reviewing the UI really needs to include both - designers and developers - to discuss and make the right set of changes so that the code looks as it should. This usually doesn’t take much time, but adds a lot of value to the project's success.

The design goes through many stages before arriving at a final solution of a beautiful user interface. First comes the discovery, where the problem is analyzed, then it is fit into a prototype and tested. Next comes the mockup along with testing and iterating till the product is ready to be developed.

“Developer can make updates on the screen so that the coded UI looks as intended.”

Rhonda Bracey from UX matters suggest that "user interface (UI) reviews often occur at the end of the development cycle when ideally it is important to get involved early in the process."

The Learning Curve

While these practices can save a lot of time while delivering the project, all key players in the team must remember to always keep learning and evolving. The delay in developing a website due to a developer and designer war can be avoided with the simplicity of an open mind.

A communicative and collaborative team is a happy and productive team. These tips will help deliver a great working experience without any designing and development conflicts.

How has collaboration worked out for your projects? Have the fights ever gotten too hard to handle? We’d love to hear about your experiences in the comments.

In any project, there’s more than one party to collaborate with in a project, and the scariest of them all is the pesky client who won’t stop asking for iterations. What do you do when you’re on version 75 and they’re still not happy? Will the collaboration woes ever end?

Well, at least life is always exciting in a design and development shop.

Keep it friendly, amigos.

1thing is a UI/UX Design agency based in Gurugram, India, building a flourishing community of designers from across the world. Check out some of our work on Dribbble and Instagram.