Strategies for Effective Developer-Designer Collaborations
Thoughts from a developer’s workstation.
At first glance, developers and designers appear to be at odds with each other.
- Designers (graphic/web designers) are trained to present layouts in a visually-pleasing manner.
- Software engineers (web developers) take a more methodical approach, emphasising functionality and usability.
But when it comes to reality, the truth is that websites and applications require a fine balance of visual appeal and practical functionality. Apart from being universally usable in the browsers of their audiences, websites must catch attention immediately in an engaging way.
More often than not, these two seemingly incompatible species — designers and developers — must coexist and even work together to generate creative digital solutions.
Here are some pointers to facilitate more cohesive collaboration between developers and designers in web projects (mostly from a developer’s perspective, but designers and project managers might find it useful too).
The Importance of Being Iterative
Generally speaking, most design projects can be effectively approached with an iterative methodology.
Iterative design refers to regularly tweaking your project and improving upon it as you design and develop. To make this work, allocating sufficient time for feedback briefings from both designer and developer is essential.
During the iteration process, designers and developers should attempt to reach a mutual understanding of the project’s requirements and context, followed by exploring possible solutions and validating them through testing and feedback.
Yet, differences in understanding of requirements and solutions discovered would often lead to (inevitable) creative differences and conflicts between designers and developers. This leads us to the next point — the necessity of resolving conflicts.
The Value of Conflict Resolution
Conflicts can arise for a variety of reasons, ranging from personal differences between team members to different approaches towards problem-solving. A few examples of conflict include:
- Developers being overly rigid with web grid layouts. This hampers designers from transferring the visual techniques from other areas of design to web design.
- Designers proposing challenging page transitions and hard-to-animate visual effects for web. On a web-based microsite, this means numerous hacks and workarounds — or might not be possible at all due to technical limitations or developer’s skill gap.
- Designers/developers emulating or riffing off another website or project. Developers may misidentify the context (and use an unsuitable reference), whereas designers underestimate the difficulty of “reverse-engineering” the reference.
One way to prevent such conflicts from happening is to rope in developers early on in the design process, so that any technical restrictions and limitations that might occur during the development process can be identified and mitigated beforehand.
Leads or team managers can also identify possible pain points first, which helps them better resolve conflicts between clashing staff and/or teams later on.
Notably, creative empathy (and mutual respect) should be exercised by both designers and developers, so that necessary revisions throughout the development plan could be mapped out.
Speaking of mutual respect: This is usually achieved by having everyone identify with the need to create the best possible outcome for the project, and acknowledge that everyone brings different skill sets to the table.
However, in the event that such issues were not identified earlier — either due to lack of foresight or scope creep, follow these steps to de-escalate conflicts quickly.
1. Identify the pain point.
Start by asking open-ended questions — which will help you figure out major creative differences. During the process, be careful to not introduce personal biases, as this may cause further tension. Gather as much information as possible on the main cause of the problem, so that it can be solved more easily.
2. Get to the bottom of everything.
Think you already have the answer? Think again. Rather than rushing to come up with solutions, make sure what you have is the underlying root cause to your problems. To do that, cultivate the mindset of asking “why” a solution works more than “what” solution works.
3. Resolve the conflict together.
Members should contribute individual insights throughout the process, then hash it out together. Conflict resolution — like problem solving — is a collaborative process. By engaging everyone, each member ends up on the same page about the project’s vision.
But as you make changes and resolve conflicts along the way, you might discover something else sneaking up on you: scope creep.
The Terrors of Scope Creep
Most design projects have set deadlines. Resources such as time and budget are finite and limited. To maintain the team’s working momentum, prioritising change requests and managing a project’s scope are essential.
Most change requests (either from the client or within the team) might seem simple at first glance. However, it is important to note that a “simple” change can require an outsized amount of time to implement.
Which means: you need to have judicious scope management and a system for filtering change requests.
1. To do that, figure out whether that change is vital or optional. If you are unsure, consult the person making the change. Chances are, they will be more than happy to tell you.
2. Implement heavily demanded and/or mandatory changes ASAP. This is especially if they are substantial enough to significantly impact the project. However, always provide an outline of the time and budget required, features that might be affected and indicate if the deadline will be delayed.
3. Note down optional/non-essential changes as to-do requests. These can be referred to for future “quality-of-life” improvements (or applied to future projects with similar set-ups).
Besides vetting changes and project scope management, here are some additional ways to ensure a smoother design and development process:
- Create (with advice from a primary developer and/or designer) a master document that states the overall direction and vision of the project.
- Increase transparency between the different groups working on this project with a change log; include explanations and reasoning for each requested change, if possible.
The pointers so far have focused on how designers and developers can collaborate better on projects on a management level. But how do we ensure better collaboration on an individual level?
The Clarity of a Common Language
When it comes to individual designer-to-developer (or vice versa) communication, both parties have to speak the same language.
And rather than referring to languages such as English (or Spanish or Chinese…), language here refers to the syntax and lexicon used in the web design-and-development realm.
By having unambiguous understanding of a common language, this helps to reduce ambiguity when deciphering project requirements.
One way to do this is to enable cross-functional knowledge across both developers and designers.
- Developers can venture into the realm of design through learning about user experience (UX). The UX knowledge will help them write better code — and put them in a better position to advise on development decisions to optimise the end-user’s experience.
- Designers can familiarise themselves with the basics of coding such as standard web infrastructure and CSS syntax. With this, they can make better designs by knowing what is possible and how their UX decisions impact the developers on the team.
Another key point to facilitating smoother communication would becoming up with methods of conveying design intent that cuts down on ambiguity. One way to do this: sharing specs sheets and mock-up designs.
Using software such as Adobe XD, designers can create mock-ups for developers to reference from during programming.
Wireframes — hand-drawn or created using software such as Sketch — are also useful for a visual representation of the desired layout, accompanied with a verbal explanation of interactive elements.
In cases where web mock-ups include animated transitions or interactions (such as a button press), animation tools such as Animista will help for better visualisation of the tweens intended for animated and interactive elements for web projects.
For best effect, visual communication styles should be kept consistent to ensure smoother collaborations between designers and developers.
Key Takeaways
In a nutshell — to ensure the timely delivery of high-quality web projects (and keep both developers and designers happy):
- maintain healthy trust
- enable unambiguous communication
While it can be challenging (be it within the same office or across different regions), it is only when there is seamless teamwork between developers and designers that groundbreaking/eye-popping/life-changing web projects can see the light of day.
Have you worked with designers or developers before? What worked, and what didn’t? Share your experiences with us — we would love to hear from you!
We are now on LinkedIn — follow us and see what Lancer Design is up to today!
