Fifteen Logo
blog

The Importance of Collaboration Between Developers and Designers

May 21, 2019

There have always been stereotypes between developers and designers, a popular one is that the developer primarily uses the left side of the brain, they are known as the more logical, analytical and objective. Whereas the designer, uses the right side of the brain more, they are thought to be more creative, thoughtful and intuitive.

Web Developer

This is not true however, yes, a developer needs to be logical and analytical, the same way a designer needs to be creative. But in some way, everyone is creative & logical, whether it be the way you spread your toast in the morning or how you tie your shoelaces. Both are required to complete tasks and it is never a case of one of the other, this is a problem in placing designers and developers into the left-side, right-side of the brain stereotypes.

Web Designer

These stereotypes can also affect the development process of a product, it shouldn’t be a case where the designer only carries out the “creative” design of the product and the developer just carries out the “logical” development of the product. Collaboration is critical to achieving a successful final product. By collaborating you utilise the skills that both roles specialise in and you remove any problems that can arise from a lack of communication.

There are some key things that are essential to help the relationship between the developer and the designer which achieves the strongest final product possible.

Understanding of each others roles and learning new skills

One of the problems that can occur is not enough understanding of what each other do in their roles. For example, you are not just a developer, you can specialise in front-end, back-end or both, such as a full stack developer. Understanding this can help the designer know what skills they specialise in, a back-end may not have the same attention to detail in terms of font styles that are used on a design.

HTML and CSS example

For designers, some may come from a print-based background and not have any understanding of programming languages such as HTML or CSS. As a designer, these are not essential but a basic understanding can help the designer understand the possible complications that a design can cause to development. The simple way to solve these is simply by talking with each other and sharing knowledge of each discipline. You do not need to go too deep but even a top-level understanding can help. The distance between both roles is getting smaller as designers are moving into development and vice versa, but there will be some that focus primarily on one or the other and it should always be seen as knowledge is power.

Strong communication throughout the whole process

Communication is a huge factor in achieving a strong final product. It may sound obvious but this can get missed very easily, for example, the process of a project can be quite rigid. You start with the design process and end up with the development of the design into a final product, this shouldn’t be the case. It should be the Design AND Development process together. Many times a developer is left out of the loop in the design phase. This can be problematic when you sign off on a design that can’t be developed because the development was not considered in the design process.

Collaboration

The developer will also have some ideas not thought of by the designer purely because they are coming from a different train of thought and experience. By involving both it allows a stronger product to be created. This is the same in the development phase, if there is a query when developing the product over a part in the design, discuss, do not build and wait to see if it was correct later down the line.

A solid brief and handover are essential

The design has been signed off, great, you pass the design to the developer, the developer creates it into a final product, you then go through many variations as the wrong font weight has been used, the alignment isn’t correct, the wrong icons are used, there is too much spacing added compared to the designs, does this sound familiar? A big reason for this can be by simply not having a good handover between the designer and the developer. There could be a lack of a brief from the designer for what was required and no discussion as to the functionality requested.

Designer and developer handover

To avoid this, have both the developer and designer get together to meet and discuss all of the signed off designs, make sure the functionality required is explained and it is also the opportunity to field any questions from either side. This is easier to ask now when you begin the development rather than later down the line when the product is close to completion, there will be questions that occur during the build but by querying anything at the start can help reduce anything that could occur later on.

Another thing is to make sure that all the required images and other assets are shared such as icons or logos, the inspect mode on a prototyping tool such as InVision is very useful for this.  It also allows you to inspect the CSS values on many things such as fonts and colours which can help the developer reduce time in having to go through sketch/photoshop to find these values out.

Work together

It may be seen that developers and designers are different, and yes there are times in terms of the work each carryout, but at the end of it, both want to achieve the same goals. A fantastic finished product that they can be proud of, the only way to achieve this is by collaboration, the gap between the developer and designer is a lot closer to what it used to be and there are cross overs between the two at times, this will hopefully continue as long as we carry on prioritising collaboration between each other.

Share

GET MORE

WANT REGULAR BLOG UPDATES TO YOUR INBOX?

Stay on top of your digital game with our blog updates.

Newsletter
More posts

OTHER BLOGS YOU MAY WANT TO READ...

Get a free, INSTANT SEO audit of your website – discover how well your site is performing on Google