Bridging The Gap

Effective alliances between UI Designers and Software Developers

Effective collaboration between UI designers and software developers is absolutely essential for creating positive user experiences in software development. This collaboration not only helps to prevent unnecessary delays but also improves efficiency and enhances the quality of the final product.

This article discusses communication gaps between those two roles, using real-life examples to highlight the benefits of mutual understanding. It provides actionable suggestions for improving cooperation in software development, which is crucial for UX/UI designers, developers, product owners, and others.

illustration von developern und ui designern in zusammenarbeit

Many of you in software development have likely encountered a situation like this. A team of designers presents an exciting new UI design, which impresses everyone. However, after the presentation, a team of developers raises concerns about its compatibility with their existing UI toolkit. They realize that implementing this concept in its current form may not be feasible.

This scenario highlights a common challenge in the cooperation between designers and developers, where initial enthusiasm for an impressive design clashes with the practical aspects of the development process. To avoid such situations, we should take a closer look at the problems and consequences that can arise from those two teams working together.

Problem Statements

Let’s start by understanding the problems that we have observed developers face when a designer has a limited understanding of the implementation process.

A) Problems Arising When a Designer Lacks Understanding of Software Development

  1. Unrealistic Design Expectations

    Designers sometimes create visually stunning and technically complex designs without fully considering the development limitations. This can lead to unrealistic expectations for the software developers, making their job more challenging.

  2. Inefficient Design Implementations

    Drawing things in a vector graphics tool like Figma can be quite straightforward, but translating those designs into HTML and CSS can be rather challenging. Without a solid grasp of coding principles and constraints, designers might end up creating designs that are tough to implement effectively, resulting in slower performance and unnecessarily complex code.

  3. Ignoring Platform-Specific Guidelines

    Designers may not always focus on platform-specific guidelines, such as mobile design patterns or responsive web practices. That oversight can lead to designs that are not well-optimized for different devices or screen sizes.

  4. Poor Communication of Design Intent

    If designers are not well-versed in software development processes, it can be difficult for them to communicate their design intentions clearly. This can lead to misunderstandings among developers and potentially have a negative impact on the intended user experience.

  5. Lack of Scalability and Flexibility

    Design concepts that do not anticipate future needs or are not flexible enough to allow additional features may cause issues. It is important that the design is easily expandable and customizable to make any future changes and improvements easier.

It’s also important to consider the problems designers face when developers have limited familiarity with the processes and principles of UI design.

B) Problems Arising When a Developer Lacks Understanding of UI Design Processes and Tools

  1. Inconsistent UI Implementation

    If developers are poorly aware of or do not follow UI design principles, they might struggle to implement UI elements accurately or consistently, causing a bad experience and potentially impact the brand’s image.

  2. Poor Information Hierarchy

    Developers who are unfamiliar with UI principles may not arrange information in a coherent manner. That leads to confusing interfaces, making it hard for users to find what they’re looking for and giving them a bad experience.

  3. Limited Accessibility and Usability

    It’s important to remember that without a deep understanding of accessibility guidelines and best practices, designs may inadvertently exclude users with disabilities. Developers might overlook crucial accessibility considerations, leading to interfaces that could be challenging or even impossible for some individuals to use.

  4. Difficulty in Adapting to Multiple Devices and Screen Sizes

    When developers don’t have a strong grasp of responsive design principles, it can be challenging for them to adjust the user interface to various devices and screen sizes. This could result in interfaces that are hard to navigate or difficult to read on certain devices, ultimately affecting the user experience.

  5. Neglected UI Design Details

    If developers don’t thoroughly check design elements within the design tool and accurately bring them to life, it can result in interactions and animations that might feel a bit awkward.

When Design Meets Reality

Polished Mockups From the Design Team

A Snapshot of the Implemented Design
A Mockup of a Bookstore Designed in Figma

In the video above, the header image is perfectly cropped and the letters of the heading are also aligned with the shelf bottom. However, it’s important to consider that this perfect alignment can’t be implemented this way, as the image dynamically adjusts to different devices’ aspect ratios.

Moreover, it seems that the designer has opted for Lorem Ipsum text as a placeholder instead of using real data. This decision may result in discrepancies between the sample data and the actual content, causing unexpected breaks and layout shifts.

Implemented UI by the Development Team

A Snapshot of the Implemented Design
A Snapshot of the Implemented Design

The designer has submitted the final design and its resources, including the header image, to the developers without any cropping. Unfortunately, the call-to-action with its pink colour is completely overshadowed due to the incorrect image cropping. Furthermore, the developer overlooked adding a container with a dark background that would enhance the readability of the font.

The darkened container with a layer blur effect for better reading of book titles appears very smooth in the Figma design. However, there seems to be an abrupt transition in the implemented user interface – most likely due to a lack of precision in implementation.

A common issue we often encounter is that designers only create designs for desktop view and do not consider responsiveness. As a result, developers are left speculating about how book cards should behave on mobile devices. Additionally, uncertainty arises regarding how to present book teasers when hovering is impossible on mobile devices.

Now that we’ve explored the specific challenges faced by individuals in these roles, let’s take a moment to consider general issues that can arise in their collaboration.

C) General Problems

  1. Communication Breakdown

    A weak communication between the teams can lead to misunderstandings, delays, and rework. This could result in misaligned expectations and hinder the project’s overall progress.

  2. Lack of Collaboration

    When designers and software developers work in isolation from each other, the final product may suffer. Giving each other feedback early and iterating is essential to achieve a cohesive end product. Specifically, this means that they must work together to ensure proper user interface testing and identify and address any issues or bugs that arise.

  3. Lack of Participation in Design Discussions

    Crucial technical details can be missed when both roles do not actively participate in the design discussions. This can become a problem later on, especially if design decisions have already been settled with stakeholders. In such cases, considering a new iteration or a complete redesign of a feature may become necessary.

  4. Resistance to Feedback

    Resistance to feedback from either party can hinder the collaboration. It’s important for both to be open to receiving constructive criticism and suggestions for improvement.

  5. Scope Creep

    Both teams may encounter scope creep, where additional features or design changes are requested during the development process. Failure to manage and address scope creep can lead to project delays, increased costs, and compromised project outcomes.

Although there are other factors to consider, these points seem to us to be the most important. Therefore, we will focus on these key aspects for now. Having identified the potential barriers arising from the differences in understanding, it is important to look for constructive solutions.

Possible solutions

Foto eines Meetings

How You as UI Designer Can Improve the Process

  • Regular Sync Sessions

    Be proactive and talk to the development team early on. Early feedback from development is crucial as it allows for the timely identification and addressing of potential technical limitations. Actively seek their input and understand their technical perspectives. Collaboration should involve regular meetings and discussions to align design concepts with development requirements and constraints.

  • Clear Communication of Design Intent

    Always try to explain why you made certain design choices to improve understanding. Use visuals like prototypes, wireframes, mood boards, or simple sketches to illustrate your design ideas. Images can say more than words and help avoid misunderstandings. Try to avoid using specific language that might not be clear to developers.

  • Regular Sharing of Work and Findings

    Consider integrating regular sharing sessions where you can present your ongoing work or research findings to developers. This proactive approach not only fosters transparency in the design process but also provides developers with valuable insights and encourages constructive feedback to keep everyone on the same page.

  • Scalable Design

    Maintain a consistent look by sticking to the same design elements. This makes it easier to integrate future extensions into the existing design. Using flexible layouts that can adapt to different screen sizes and content is really helpful. If you’re using the design tool Figma, you can make your design responsive by using constraints and auto-layout. That approach lets you communicate how your design should behave on different screen sizes. Check Out This Video for a Good Introduction to the Topic.

Working with Figma's constraints makes it easier for developers to understand how the design should adapt to different screen sizes

Make sure to write down your design in a clear and detailed way, including the main principles and choices you’ve made. This will help developers understand the design better and make it easier to make future adjustments.

The Image Illustrates a Fictional Project Management Tool. The Notes From the Design Team Provide More Information About the Idea.
The image illustrates a fictional project management tool. The notes from the design team provide more information about the idea.
  • Develop an Understanding of Coding Principles

    As UI designer you can improve collaboration by gaining a deeper understanding of software development processes and tools. By familiarising yourself with coding languages such as HTML, CSS, and JavaScript, you can better grasp the technical limitations and possibilities of implementation.

  • Keeping Pace with Web Development Trends

    Stay updated on emerging web development trends and technologies. By knowing about the latest technologies and methods, designers can create the best solutions that meet users’ current expectations. A go-to resource could be web.dev.

  • Understand That the Figma Design is Not the Product
    While the design process is crucial, the true value lies not in design artfacts but in their implementation. After all, users interact with software, not design files. A great design is meaningless if not properly executed due to time, effort, knowledge, or technical limits. As a UI/UX designer, your duty extends beyond creating perfect designs; it’s ensuring these designs translate into a positive user experience in the final product. This means if you’re spending more time on fixing Figma files than on testing the implemented UI, you might be overlooking a critical aspect of your role. When the software poorly reflects your design, prioritize collaborating with developers to refine the UI rather than perfecting your design files.

     

No one wants to turn you into a developer, but there’s nothing wrong with learning new things, is there? In the end, being open to learning about the development process and fostering open communication and cooperation will enable UI/UX designers to craft designs that look visually appealing and can be smoothly translated into fully functional software products.

Having looked at how UI designers can work better with developers it’s important to see that collaboration is a team effort. Now, let’s delve into how developers can enhance this partnership.

How You as Developer Can Improve the Process:

  • Feel Responsible for UI/UX

True, designers craft the visual and interactive elements, but without developers’ commitment to accurately implement these designs, the user experience can fall short. It’s a shared responsibility; developers are essential in bringing designs to life, ensuring they function as intended. Developers who take responsibility for UI/UX actively improve the usability and accessibility of a product. They recognize the importance of their role in creating a seamless and engaging user experience.

  • Deeper Understanding of UI Design Principles

    Developers can improve collaboration by gaining a deeper understanding of UI design principles, processes, and tools. By learning about UX/UI design concepts, they can better appreciate the importance of visual aesthetics, information hierarchy, and user interactions. UX and UI design is a broad field, but to get first insights, take a look into the Laws of UX. We have also collected a List of Further Links at the End of the Article. Ask designers to join design reviews to gain insight into the entire design process and learn more about the intentions behind specific design decisions.

  • Active Participation in Discussions

    Developers should participate in design discussions and engage in conversations with the design team. This allows them to clarify design requirements and offer technical insights when necessary. By providing feedback early on, developers can address any potential implementation challenges and suggest feasible alternatives.

  • Develop an Understanding of Design Tools

    Having a good grasp of design tools like Figma, Sketch, or Adobe XD can really help you understand design files. This leads to a more accurate implementation of the design and reduces the need for multiple rounds of feedback. If your design team uses Figma, you might want to take a look at the New Dev Mode Features.

  • Understand the Engineering Aspects of UI-Design

    Implementing a flexible and dynamic layout using CSS is a challenging task. It’s important to acknowledge the complexity that comes with it, rather than just simplifying it by setting colors. Mastering grid and flex layout techniques requires significant effort and skill. It’s not less engineering than querying some records from the database. Under the following link you will discover An Interactive Guide to Flexbox where you can understand why Flexbox solves different problems compared to CSS Grid.

  • Ensuring Web Accessibility

    Experienced designers are likely to have developed a trained eye for color contrast in text, button and link styling to ensure that content is legible and accessible to users. However, accessibility doesn’t just depend on the designers. During implementation, developers play a major role in deciding whether the web application excludes user groups or not. In fact, the developers bear the main responsibility, and if they do not handle this properly, it can significantly affect accessibility.

    It’s not only about using the correct native semantic elements but also considering other important aspects, such as whether to add ARIA roles, status, or properties and much more, to ensure your website is accessible. From our perspective, the MDN Web Docs are a valuable resource for obtaining detailed information about Accessibility Guidelines, and they are designed to be user-friendly for reading.

  • Enhancing Responsiveness

    Most likely, developers will use responsive frameworks such as Bootstrap or Foundation. These frameworks provide not only pre-built components but also grid systems that facilitate development for various screen sizes.

    To enhance the responsive behavior, consider scheduling meetings with the design team, particularly if the mockups they provided are unclear. This will help ensure that the behavior of specific UI elements is aligned. It’s important to refrain from making assumptions and instead proactively seek input from designers. Also, a test process on different devices and screen sizes must be carried out to ensure that the user interface works well and is easy to read.

  • Keeping Pace with UI design Trends

    It is also essential to stay updated on the latest UI design trends and best practices, as this knowledge can influence your implementation decisions and promote a more cohesive final product. Smashing Magazine

    https://www.smashing…

    , for example, covers a wide range of web design topics, including current UX/UI trends.

Further Helpful Links Can Be Found at the End of the Article.

Last but not least: of course it’s also part of team leaders and managers jobs to enable a prosperous collaboration between developers and designers

How Can You as a Manager or Product Owner Improve the Collaboration

  • Establish a Supportive Atmosphere

    Create a positive and supportive environment where constructive feedback is seen as an opportunity for growth rather than criticism. Define clear communication guidelines. This can help avoid misunderstandings and ensure that feedback is constructive and respectful. To assist, you can use tools like Google Forms or Typeform which allow feedback to be submitted anonymously.

  • Ensure General Access to Tools and Developed Software

To foster the continuous exchange between designers and developers, it’s necessary that they can access each other’s current work. The developers should, for example, have access to the Figma board and be able to comment on drafts and ask questions. The designers should be able to see and test versions of the software in order to detect misconceptions or deviations very early.

  • Effective Project Management Strategies for Smoother Project Workflow

    • Prioritize collaboration over strict project management by involving both teams in the initial planning stages. Discuss project objectives, deadlines, and deliverables together with stakeholders to ensure alignment with client expectations.

    • Maintain an open line of communication through regular status meetings. This allows for continuous monitoring of project progress and provides a platform to discuss necessary adjustments, ensuring that both teams are on the same page.

    • When faced with additional client requests, it’s important to remember the originally agreed-upon scope of work. You could consider offering two potential choices: accommodating the extra requests for an additional fee or sticking to the original scope of work.

    • Address changes collaboratively by documenting all change requests on a shared board. Prioritize these modifications collectively with stakeholders and the product team, focusing on essential functions and avoiding unnecessary extensions. This approach fosters a cooperative environment between developers and designers to create a smoother and more effective project workflow.

    • Learning to say no is important, and there are many ways to do so. One possible approach is described in the LinkedIn article How to Say No in Project Management.

The graphic shows an approach to prioritize features in the product development process
The graphic shows an approach to prioritize features in the product development process

Conclusion

In essence, successful collaboration between designers and developers involves a dynamic exchange of skills, understanding, and open communication. The shift from design to development requires teamwork. Ultimately, success hinges on everyone’s willingness to learn and value the expertise of their colleagues.

Links & further reading:

For Developers:

Picture of Sophie Rauhut

Sophie Rauhut

Sophie works as a UX designer at Inspired Consulting. She supports and accompanies clients in the conception and realization of digital products. To keep the feedback loop short, she relies on clickable prototypes and prompt testing through user tests.

Picture of Oliver Tigges

Oliver Tigges

Oliver is one of the founders and CEOs of Inspired. In client projects, he is always particularly interested in mediating between the engine room and the boardroom. He also supports management in assessing the opportunities, risks and effects of pioneering and sustainable technology decisions.

Recent posts

Elixir

Code BEAM Europe 2023

Last month we attended Code BEAM Europe, a conference centered around programming languages that run on the BEAM virtual machine

Read More »
Projects

Case Study: WSAM ProDu

Wärtsilä SAM Electronics GmbH (WSAM) from Hamburg specializes in designing, assembling, cabling and commissioning complex electrical systems on ships. These

Read More »