Designers and developers have very different roles, but in most cases, their paths cross while working on the same project.
For example, if a website needs to be created, designers are tasked with delivering the visual impact that the user interface will have on the viewers. On the other side, the developer will be managing all the backend capabilities and ensuring that the designs and wireframes are materialized.
And while this shows us that the relationship between designers and developers is key, oftentimes their processes aren’t as collaborative as should be.
So, in an effort to improve communication and bring down some of the barriers that hinder designer and developer collaboration, in this Ask A Designer feature, we invited our developers to put our designers on the hot seat — asking them things that developers want to know about designers!
Question 1
How is your experience communicating with developers?
Response 1:
Most of the projects I work on will involve developers in some way – either in setting up a new page in Contentful, or creating/modifying components.
— Véronique Janosy, Senior Product Designer
Response 2:
In my experience, collaboration, open-mindedness, inclusion, proactiveness, and a healthy relationship between design and development are key essential characteristics required to ensure that you can clearly translate all the details of the design for developers into the code for a successful, visually appealing, and functional product development.
For a pixel perfect design, every detail including measurements of canvas sizes, margins, paddings, hover and focus states, no-data or error states needs to be communicated or annotated to the development team for smooth coding.
At the end of the day, both designers and developers are working towards achieving the same goal, and designing for developers should be kept simple, clear, and concise.
— Rahul Jacob, Product Designer
Response 3:
Given that the design requires a collaborative environment within multidisciplinary teams, and in particular, an efficient communication between Product designers and Developers, it is always considered that communication is the key value in succeeding in any product’s project. In my collaborative design projects from the beginning, I always tended to build a good relationship with my team members, especially the developers, posing questions to ask developers to improve the process of the design of the product. In my experiences throughout the years, I tried to learn the basic programming terms and on top of that learned the developers’ concerns regarding creating a new design to be able to provide feasible ideas that they could also be able to create. It’s vital to always be considerate of one thing: what do developers need from designers?
— Ella Rabiei, Senior Product Designer
Response 4:
Developers and I work closely with each other; often communicating on Slack or via daily standups and scrum meetings. We discuss ux issues such as error handlings or variants of a component like having different states of buttons and behaviors in the Design System and talk about problems and solutions. I deliver ux clarifications includings scenarios in the form of design patterns and guidelines and support developers where needed. It’s all about designer-developer collaboration and teamwork.
— Rebecca Kim, Lead Product Designer
Question 2
When tasked with a new feature, do you research the feature(s) keeping the developer and standard libraries like Angular / React Material, PrimeNG/PrimeReact, Angular/React Bootstrap, etc. in mind?
Response 1:
I don’t research features available in any libraries, but I always engage developers whenever developing something that I’m not certain about, since they are the experts in the field. A lot of actions and features we use have already been used on the site, so I don’t need to verify those, but I will set up a call or start a conversation about a feature if I’m not sure. I also want to make sure that when I write tech specs I include any information that will be essential for the dev team. After handing over a new or modified component spec sheet, there is always a walkthrough with developers, at which point we can discuss any design questions or concerns that have not already been addressed prior.
— Véronique Janosy, Senior Product Designer
Response 2:
When it comes to new features, I always take the less is more approach. As a product designer, I am always empathic with the users, as they rely on their products to be intuitive, functional, reliable, and usable for their needs to be met quickly and effortlessly.
Any time I start working on a new feature, I use existing libraries as a starting point. It is always important for me to design components that are practical and long-lasting so that they can be reused or managed in the future. As a result, the design is easier to maintain on the backend while looking good on the frontend, which increases its longevity.
It’s a win-win for everyone!
— Rahul Jacob, Product Designer
Response 3:
Yes, but not the library source in particular. When it comes to design of a new feature, I would talk to the developers to learn about developing and coding restrictions and the alternatives that I can use of; there are always multiple new features that need to be created, and it would be hard for the designers to go through all the libraries in person to see if it would work for them, that is why the direct collaboration with developers can help the designers to process the feature and make the decisions correctly regarding that.
— Ella Rabiei, Senior Product Designer
Response 4:
Yes, I do research the features, prioritizations, IA, design approaches, and page layouts focusing on synthesizing and communicating high-level strategic insights. Developers are highly-skilled and knowledgeable and may offer new and different perspectives that could unlock unrealized potential. For example I ask developers’ thoughts how the sophisticated backend system works that is captured in information architecture and workflow in ux.
With the collected information, I adopt user research methods and conduct Usability Testing, User Interviews, or Focus Group for ux findings. With the ux findings, I look into the Design System in terms of the UI component quality like a complex form and table, so it allows me to reduce the risk of any variation between products.
— Rebecca Kim, Lead Product Designer
Question 3
Is the web app multi-themed, responsive, and/or multilingual? How many layouts do you share with the developers, and what format (XD, Figma, etc.)?
Response 1:
The work I do is aimed at one theme (brand). All the components I build are designed to be responsive, and I provide mockups and tech specs for 4 breakpoints, which handles the majority of the scenarios. My client works with Sketch for design, and Abstract for version control, so I share out Abstract links to the developers, which allows them to inspect each component fully.
— Véronique Janosy, Senior Product Designer
Response 2:
Each project I work on incorporates responsive design to adapt to the viewports of these devices: desktops, tablets, and mobile.
I work primarily with an app called Abstract that lets me import Sketch files and create a centralized repository for the team’s most up-to-date design work and supporting documentation. Developers can seamlessly transition from design to development with this app. It allows developers to compare changes, view measurements, specs, inspect, and download assets through a link or directly from the app.
— Rahul Jacob, Product Designer
Response 3:
Yes, the process of the designing a product requires designers to create/build responsive designs which would follow the guidelines and rules; it is very important to evaluate and test the design on different platforms to see if the message of that specific product is clear without any distortion, failing to do so, would cause a confusion and difficulty to the developing team and as a result the product would fail. The number of layouts highly depends on the number of scenarios in a particular product project, in general we as designers would provide all the potential scenarios for developers. In each design team, there are a variety of applications that product teams could use to work together. In my current work, we use the Abstract and the Sketch apps to communicate our ideation and designs; there have been some situations where we had lost our access to either of these apps and I would provide developers with exported versions of the design, such as SVG, PDF and PNG to move forward with our process.
— Ella Rabiei, Senior Product Designer
Response 4:
Yes or No, it depends on the context, constraints, business requirements, and user needs. If yes,
- define the layouts based on responsive breakpoints (Desktop, Tablet, Mobile) in Design System including with light and dark themes in Figma.
- share with the developers UI elements and functions including documentations around the look and usage of each component in the component library.
- support multilingual languages. For example, when translating English into French or Spanish, the translation will generally be about 15 % to 30 % longer than the original. I will make sure if it suits the copy in different languages. If the translations break the design layout, that requires discussions to come up with solutions such as adjusting font sizes, text truncate ellipsis, or alignment and text placement.
— Rebecca Kim, Lead Product Designer
Question 4
Do you keep accessibility in mind before designing features?
Response 1:
Yes, it’s a must! I do think that more education is needed around accessibility, across other areas of the business. It does seem that while design and dev are aligned on the importance of accessibility, stakeholders need to be educated so that they value it as well. At the end of the day, with certain businesses, design can always be overridden by stakeholders.
— Véronique Janosy, Senior Product Designer
Response 2:
I always incorporate accessibility into my design process so that every user has access to the same information, regardless of their visual, auditory, cognitive, or motor impairments. As a result of keeping accessibility in mind, it expands the potential audience, improves usability, and meets accessibility standards. “Always build with accessibility in mind.”
— Rahul Jacob, Product Designer
Response 3:
Yes! Absolutely. The accessibility is one of the most important features in product design and it is considered as one of the main reasons why a product would reach the public approval or it would easily fail.
— Ella Rabiei, Senior Product Designer
Response 4:
Yes, I keep accessibility considerations in mind before designing and while designing features. The accessibility considerations are:
- Design simple experiences
- Interaction models (eg. is the functionality a link or a button)
- Color contrast and complementary colors and visual cues
- Create distinct and recognizable UI elements with familiar design patterns
- Work with content team and developers to communicate my design decisions and intent
- Test with real people early and often
— Rebecca Kim, Lead Product Designer
Question 5
What is your approach to dealing with accessibility?
Response 1:
Luckily, in design system work, our base components, colours, typography and interactions have already passed accessibility tests and been approved by our Accessibility team lead, so design needs to focus mostly on experiences and making sure those meet accessibility standards. By reusing existing components and sticking to the design system as much as possible, you can ensure a good base.
— Véronique Janosy, Senior Product Designer
Response 2:
Often, accessibility is misunderstood as being primarily for those with disabilities. However, this is not the case. To benefit all users, designers must approach all projects with an accessibility-first mindset.
Here are a few key areas to consider before designing your next feature or project:
- Color Selection and contrast
- Typography, font size and spacing
- Page structure, layout, and hierarchy
- Focus states, hover states and indicators
- Use of labels or instructions with form fields and inputs
- Descriptive text alternatives for images and videos to understand context
— Rahul Jacob, Product Designer
Response 3:
If I would be asked to work on a completely new product without any developed design system, I would personally check the colors, typographies, layouts, and different component dimensions on different platforms by using accessibility tests tools and other design methodologies, such as observation method and secondary research method to create a feasible product for the product’s intended customers. In my current designer team, we work with a design system platform which has already been developed and is also going through the accessibility checking processes over and over to make sure all the components are following the most recent guidelines and could result in products’ success.
— Ella Rabiei, Senior Product Designer
Response 4:
Accessibility should be considered before the project starts. When I do my design research, here are some practices I use:
- consider accessibility, annotate, and document my decisions for an inclusive experience.
- Work with developers to refine decisions further.
- Ask myself: 1) Are the needs of people with disabilities being met in the business requirements? 2) Have I annotated my designs to clearly communicate to developers how a design is to be built?
— Rebecca Kim, Lead Product Designer
Special thanks to developers Kashif Ullah, Waqas Niazi, Shahid Ullah Khan, and Talha Gillani for participating with these questions for designers.
Takeaway
In an age where so much relies on the interconnectivity of multiple functions working in unison to ultimately create the best user experiences, smooth communication and collaboration proves to be a valuable asset.
Recognizing the importance of bridging the gap in communication between designers and developers, we brought both together and let the conversation flow, not only till our developers got all the answers they wanted, but going beyond and deepening this vital relationship!
