How designers and developers collaborate?

A set of tips on how to streamline the cooperation. There are always inconsistencies in design and code. Designer and developer collaboration is usually a difficult thing. This is not due to a lack of skills, but rather the way designers and developers work. Luckily, there are some ways to make them working together and add value to any project!

And we are not just talking about adding value here. The divergences between designers and developers can impact the end-user experience, and therefore the business or the budget and schedule of the project. More than that, the disagreements very often result from such basic mistakes as assuming things are obvious and the other person does not need any additional explanation or neglecting basic good practices due to pressure of time.

So let’s explore the areas that need some attention:

1. How to improve communication between designers and developers?
2. How to define design and development workflow?
3. What are some crucial technical aspects of the project implementation?

Communication between designers and developers

Communication between designers, developers and team members is the most important element for a smooth project flow. The more, the ideas and solutions are communicated between people with creative and technical minds who usually speak different languages. Therefore, it is advisable to:

Use the right tools

Photoshop has been a major player in the world of web design for many years. But it’s time to forget it and switch to other tools that facilitate the design process and communication between team members, for example: AdobeXD or Figma. They allow comments, simplify exporting, and offer many other helpful features that save time and make everyone’s life easier.

Choose a single communication channel

Using Trello, Miro or Slack at the same time to report issues and communicate is the easiest path to frustration and project delays.

Take time to provide detailed explanations

Paying attention to detail early in the project can save you a lot of problems and frustration later on. There are two important areas when it comes to explaining the project in detail:

Visual Objects

If a static image is not enough for the designer, it’s important to discuss:

• Hover states,
• Scrolling animations,
• Sliders,
• Differences between desktop and mobile versions, and so on.

A good way to make sure the developer fully understands the designer’s idea is to link examples and inspiration.

Functionality

For more complex projects, it’s a good idea to describe all the functionalities in story form. Not only does it help describe the designer’s ideas, but it also forces the designer to think through the project and make sure all the details are explained.

For example, booking tickets for an event, where no one has mentioned that each ticket needs to be personalized, so you need to capture the person’s first and last name for the ticket. This completely changes the process from adding a ticket to presenting the tickets in the checkout. And not surprisingly, it takes significantly more time to implement. Especially if everything is already coded and tested.

Agree on a procedure for reporting issues

Especially in the QA phase, it is important to provide as much information as possible to reproduce the problem. And make sure we are on the same page when it comes to the expected solution. Using additional tools like loom to record and describe the problem in detail is also very helpful.

Make sure there is quick communication between the design team and the development team

Waiting 2 weeks for a response is not helpful in getting the task done well. Not only can it lead to wrong decisions, but it can also lead to unnecessary work that impacts both budget and schedule.

Designers and developers collaboration workflow

Cutting corners can rarely help you to deliver quality work. Project work requires attention to detail. And attention requires time to follow good practices. Let us talk about some of the most important ones:

Work on approved designs

Introducing changes to a code always takes more time than you might expect. Moreover, there is always a risk of bugs in the process. That’s why you should do an extra round of testing and fixes, even if it was just small CSS change. Sound reasonable? We have seen situations where the design team did not even inform us that they had made changes to the Figma project during the development phase, and later reported numerous “bugs”.

Take time to do a detailed design analysis

Before writing the first line of code, the development team should carefully review the designs and available materials and proactively clarify anything that is not obvious. A checklist is a great way to make sure the team does not forget any obvious thing.

Start with a solid kick-off meeting

Even if everything seems clear, it’s a good idea to schedule time for discussion between the design and development teams. Take time to go over all materials and clarify all ideas. A single misunderstanding at this stage can cost weeks of additional work, so it’s worth inviting 3-4 people to a two-hour meeting.

Break the project into smaller parts

Plan to deliver complete pieces of the project that can be easily reviewed and evaluated by the design team. Bad information early on is actually a good information. This allows the approach to be corrected before an error or misunderstanding spreads to the entire project and causes hours of costly corrections. It should be noted, that the design team needs to budget time for such small handoffs and reviews as the project progresses.

Involve the development team in the early design phase

Increasingly, we are working with pre-built solutions that we simply customize to meet the specific needs of the client. Take e-commerce, for example. There are many platforms out there like Magento, WooCommerce and others. Each of them already has some specific user flows built in. If the design team does not take them into account, it can lead to a lot of extra work in the implementation phase that does not necessarily add business value. 
For this reason, it is very important to involve experienced developers early in the design process if the solution is to be based on a known framework. Art for art’s sake is not a virtue in business and is rarely appreciated by customers, is it?

Technical aspects of design and implementation

There are many elements that, if considered in the design and communication phases, can significantly reduce the time it takes to implement the final solution, thus impacting the project budget and schedule:

Forget Pixel Perfect. Go for an elastic layout

With the multitude of browsers, platforms, and screen sizes – from small mobile devices to 4k displays and beyond – it’s nearly impossible to ensure pixel-perfect rendering of the original design in every possible configuration. A browser’s viewport is not an A4 sheet of paper, and trying to force it to behave like one can cost a fortune. There are better approaches, but surprisingly there are still many designers (and even more investors) who demand pixel-perfect rendering and claim that this is not their expectation. However, in the user acceptance testing phase, it turns out that this is not true.            
The answer is elastic layout. It requires designers to give up control over the design look in some configurations. In fact, insisting on such 100% control is unrealistic and may require an unreasonable budget for endless tests and fixes on hundreds of software and hardware configurations.

You can read more about Responsive Web Desing and Pixel Perfect here!

Use SVG graphics whenever possible

SVG, as a vector graphics format, is much better suited for any graphic elements that need to be scaled or animated, as it can preserve the high quality of such transformations. And in the world of mobile devices, we often need to scale design elements to fit different screen sizes. The SVG format also includes additional parameters such as aspect ratio preservation that, if used correctly by the designer, can be used to control the behavior of a graphic element on the page.

Limit the number of fonts

Embedding more than three fonts makes the page heavier and reduces loading speed.

Avoid graphical filters

Most browsers support complex graphical filters, which can be an enticing way to enhance the design. However, different browsers may render these filters in slightly different ways, which can lead to discrepancies between the design and the look of the graphics on the final website. They also consume a lot of processing power, so the website loads much slower, which affects the user experience.

Limit the number of breakpoints

Every website needs to be mobile-friendly and display correctly on all possible configurations without obvious issues. Using breakpoints at certain resolutions allows you to differentiate the behavior of the content at different resolutions. However usually 2, or at most 3 breakpoints are sufficient. If you add more, as in a pixel perfect approach, you need to code and test more. And does it really improve the overall user experience? Apart from the designer himself, 99% of users will not even notice the difference. So what’s the point of burning investors money for such a level of perfection?

Use style guides and make the design modular

One of the most common issues we face when working with creative partners is that similar content is designed slightly differently in different sections of the website. For more complex sites, this can lead to weeks of unnecessary work. Most modern CMSs have some sort of block editor that allows you to create customizable components that can be reused in many places. The best way to keep the design consistent throughout the site is to create a style guide to which all new components are added during the design process. Using the components in subsequent designs (rather than designing them from scratch each time, which inevitably leads to inconsistencies) not only shortens development time, but also makes it easier to manage the site in the future by giving users a selection of pre-built, well-designed blocks, that they can use to create new types of content.

Designers and developers collaboration summary

The above tips not only enable better collaboration between designers and developers, but also contribute to the development of better websites. So let us put them to good use!

Do you have an exciting new project coming up?