Bridging the Gap Between Designers and Developers (2023)

Jul 23, 2020 by

Alexander Wolfe

Bridging the Gap Between Designers and Developers (1)Bridging the Gap Between Designers and Developers (2)

Designing software is tough. Whether you're a designer, a product manager, or an engineer, we all play a major role in what the end user gets their hands on. Perhaps one of the most critical pieces on the journey to making great software is the relationship between designers and developers. When software is done right, it’s easy, intuitive, and a joy to use. This is no accident - it’s very intentional and it often takes countless iterations to get products to look and feel great.

(Video) Bridging the gap between designers and developers

In the recently [released Teleport 4.3] (/introducing-teleport-4-point-3-modern-replacement-for-openssh/), we have added a ton of new features and completely redesigned the user interface (UI). I’m going to discuss how and why it’s so important to create a healthy relationship between designers and developers and some techniques for doing so. This post simply scratches the surface, but the goal is to bring to light some important concepts that can make individuals more successful as a team.

A Bit of Background

Before we dive into the great things we did as a team when building Teleport 4.3, I’d like to quickly touch on the fundamental differences between designers and developers for those who may not be familiar with these roles and why there is a natural conflict. These differences are not set in stone, but include more of a general description of how designers and developers think differently about the same thing.

Designers are looking to push the boundaries of what’s possible, often with disregard for the difficulties of implementation. As a designer I don’t just focus on what’s functional, I also think about what is going to make our users happy. Nobody wants to use your software, they have to use it to get their job done. Understanding this creates empathy for a user and gives you a desire to make things painless and enjoyable. I often push to create the simplest user experience possible, even if it means more work for the team. I’ve always felt it’s our job to accept great challenges and build something that gives our users great satisfaction. That’s what we are paid to do.

Developers are responsible for engineering the product. They are constantly thinking about the time, cost, and feasibility of implementing each and every single feature. Developers often get pressure from different groups (like product, marketing, and sales) to ship a completed product and add new features. Most other departments are not aware of the technical requirements for building new features and products. There is constant pressure to just, “hurry up and ship it already.” For example, our marketing team usually has blog posts, web pages, emails, and other items all setup to go out on a certain date. When dates slip, everything needs to be readjusted. Similarly, Sales has customers waiting on new releases with features they have promised existing or potential customers. These pressures are very real.

Getting the MVP (Minimum Viable Product) out the door is often a priority for developers since they want to ship fast and iterate quickly to relieve pressure from other departments and get people using the product. Adding on too many additional features or requirements can drag out development time, create coding debt by deprioritizing code quality, and reduce the amount of testing, given time constraints.

Bridging the Gap Between

When you think of goals for designers and developers, you probably think that they are very different. After all, one creates the visual design, UX, and user flows while the other builds the product based on the available technology, technical constraints, and time availability. It turns out their goals should be the same: creating great products!

Engineering is not an exercise in engineering for engineering’s sake and neither is design. Programming, designing, UX, technical competence, etc. are all merely the tools we use to achieve the same goal: creating great products that our users will love.

Below are a handful of strategies to bridge the gap between designers and engineers and create stronger, happier, and more effective teams. We used these techniques for collaborative success while building Teleport 4.3 and we continue to use them everyday.

(Video) Webinar: Bridging the Gap Between Designers and Developers

  1. Teach each other. I see myself as a teacher just as much as a designer. For someone to understand and appreciate a design decision, you must break down exactly what you did and why. It’s an opportunity to improve your team. I want the development team I work with to understand and love design deeply. This can only happen if I’m willing to take the time and teach them everything I possibly can. It makes us a team that doesn’t identify so much with our role as our goals and principles. This is the same for developers. Teaching their design team complex technical principles goes a long way. It helps designers make better user experiences based on reality, not just imagination.

  2. Become one team. This is your team. Repeat after me: this is your team! Screw all that bullshit that you’re on the design team and someone else is on the engineering team. Are you working on the same product? Then you’re on the same team! The people with whom I work most closely are the engineers. We learn from each other, share ideas, argue about features, look at wireframes/flows, discuss technical issues, and on and on. You cannot create great products when you don’t truly work together. UX is not sprinkled on at the end of development, that’s called lipstick on a pig. In order to make something great, you have to have a great team. That requires working together!

  3. Work together from the start. “We’ll bring design in at the end...or...We’ll talk to the developers when we finish the design” are both ways to ensure your product and teams suck. When I’m designing I start with wireframes and prototypes (we like using Balsamiq Cloud). I iterate rapidly and get together with my team (Product managers and engineers) to review the UI, poke holes in it, uncover technical issues, or use cases I didn’t think of. It's a team effort that needs all eyes. The final results is a wireframe that is a collaboration of our experience and skills. I consider this “our” work because that’s exactly what it is. The process doesn't stop there; it simply continues with high fidelity designs (Usually with Figma or Sketch), design specs, alpha versions of the product and so on. We are all involved in this process and deliver these items as a team.

  4. Be Flexible and Iterate. As a designer who is also a developer, I’ve learned a valuable technique that saves time and results in a better product. Sometimes it's ok to ship now and perfect later. Your design files don’t need pixel-perfect for items like buttons or other UI elements. Making fine tune adjustments in the browser, or mobile device is often faster and results in a better design. Designing on the fly is often necessary when building products because things simply look different in Figma, Sketch, Photoshop, etc., than they do in real life. This is also true when you’re cutting features or figuring out areas of a user flow that are unfinished. Sometimes you can para-program and design with your dev team mate. This results in a much better connection with your team, some great ideas, and it’s pretty darn fun.

  5. Test your assumptions. Getting into an endless loop about who is right and who is wrong doesn’t do any good. Neither party is likely to agree unconditionally with the other. Instead of looking at this as a negative, understand that it comes from a place of passion. You need passion to create great products. No passion, no breakthrough product. But put your passion into discovery - being stubborn about an assumption doesn’t help when you aren’t willing to test it or be wrong. I'll say to my team, “I think this would be the best outcome, but we’ll need to test it.” Or sometimes I’ll simply say, “I don’t know, we’ll need to find out.” Admitting you don’t know something is a sign of strength and experience.

Ship, Test, Fix, Repeat...

We recently shipped Teleport 4.3, a new version of Teleport that was packed full of features including an improved UI that allows us to surface features that were hidden. Best of all, 4.3 is flexible enough to add new features in the future. See the Teleport demo of the new UI.

Building Teleport 4.3 was tough! We worked together tirelessly to get this product out the door. We reviewed countless designs, made tons of iterations, argued for hours and hours about features and flows, changed designs again and again, stayed up late, got up early, broke things, fixed things, and wrote an insane amount of code. I loved every minute of it. All of that hard work was the cost of creating something great, something I’m proud to have been a part of. We became a stronger and better team during this process and we continue to grow and learn from each other.

Shipping a product is just the beginning. We’re not done yet, and we never will be. We’ve been conducting usability testing and user feedback sessions so we can learn more about how our customers are using this new version of the product in the wild. We love what we’ve done so far but know we can make it even better. Our design and development teams are working together just as much as before to improve the user experience of our product. It's important to make sure you collaborate just as much after you launch a product as you do when building it, this is often the most critical time for gathering real feedback.

(Video) RailsConf 2016 - Bridging the Gap between Designers and Developers by Ryan R Hughes

If you try it out, please let us know what you think. You can reach out to me personally with feedback you have that will improve the product. [emailprotected].

Teleport cybersecurity blog posts and tech news

Every other week we'll send a newsletter with the latest cybersecurity news and Teleport updates.

This site is protected by reCAPTCHA and the Google

Privacy Policy

and

(Video) QtDevCon22 – Qt Design Studio – Bridging the Gap between Developers and Designers

Terms of Service

apply.

Presenting Teleport 4.3

To conclude this article I’d like to present Teleport 4.3, a true labor of love from a team that is passionate about creating amazing products. Thanks for reading and good luck building amazing teams and amazing products. Enjoy!

Bridging the Gap Between Designers and Developers (3)

Bridging the Gap Between Designers and Developers (4)

Bridging the Gap Between Designers and Developers (5)

Bridging the Gap Between Designers and Developers (6)

Bridging the Gap Between Designers and Developers (7)

(Video) Bridging the gap between Developers and Designers – Live demo

Bridging the Gap Between Designers and Developers (8)

Bridging the Gap Between Designers and Developers (9)

This is just a brief highlight of some new features in Teleport 4.3. Watch a short demo of Teleport and try out Teleport 4.3 for free by downloading it today. Enjoy!

  • teleport

FAQs

How do you bridge the gap between design and development? ›

Communication is key

Another way to bridge the gap between designers and developers is to help them understand the effort required in the project, whether in design or development. Also, it's essential to validate the design with the development team before showing it to the client.

How do you collaborate with other designers and developers? ›

Making It Easier for a Designer and Developer to Collaborate on...
  1. Create a design system that uses the same components for designers and developers.
  2. Improve communications between web designers and front-end developers.
  3. Invite designers and developers to product design brainstorming sessions.

How do you bridge the gap between UX design and code? ›

How to help bridge the gap between UX design and code
  1. Name everything, name early and rename often — Ctrl+R rocks.
  2. Name your pages as well.
  3. Name your components.
  4. Use versioning.
  5. Use a library (team plan)
  6. Clean clean clean!
  7. “Reverse-design” from code.
  8. Plan Weekly UX meetings.

How do you hand over your designs to the developers? ›

Tips to make the design handoff process easier
  1. Create templates. ...
  2. Use elements that help you to explain the design. ...
  3. Explain to the developers how to work with our software. ...
  4. Meet with the developers to demonstrate the handoff. ...
  5. Build a clear design handoff process. ...
  6. Work with a design system.
7 Jun 2021

What is the meaning of bridge the gap? ›

idiom. to connect two things or to make the difference between them smaller: The president singled out education as a vital tool in bridging the gap between rich and poor. This collection of stories bridges the gap between history and fiction.

How do you bridge the gap between research and industry? ›

Provide workplace exposure:

Internships works very well to bridge the gap between academia and industry, some of the universities in India (ex: VTU) has already made it mandatory as a part of engineering curriculum.

Why the designers and developers need each other? ›

Pros of Working Together

Simply, the biggest reason that designers and developers should work together is to create a more complete web project. From the look to interactions to experience, the project will only bet better when designers and developers collaborate. (And it's almost impossible not to these days.)

How do you go about working with other designers and developers on your plan project? ›

How to effectively get designers and developers working together
  1. Set clear expectations for web designers and developers. ...
  2. Promote open communication among developers and designers. ...
  3. Support constructive feedback within your web design and development team. ...
  4. Encourage co-creation between website designers and developers.
5 Aug 2021

What is most important when it comes to collaboration between a software developer and a designer? ›

A better user experience should be the primary goal for both developers and designers and that's what each team member should focus on when building the product.

How do UX designers and developers work together? ›

The designer provides the research and the design while the web developer provides a visual realization of the design as well as a development timeline. This means that web developers and UX designers have interdependent roles and have to work closely together as a team.

How do you transition from developer to UX designer? ›

If you're a web developer looking to become a UX designer, but not sure where to start, this article is for you.
...
10 things to do when moving to UX design
  1. Pick a specialization. ...
  2. Find transferable skills. ...
  3. Find design mentors. ...
  4. Get educated. ...
  5. Master your prototyping skills. ...
  6. Get real practical experience.
15 Mar 2020

What's the difference between a designer and a developer? ›

Designers focus on the front-end and visual aspects of a site, which influences its usability and overall UX. Developers, on the other hand, are responsible for taking the concepts and ideas laid out by designers and coding them into fully-functioning websites.

Can a person be both designer and developer? ›

If you're wondering whether you can be a web designer and a web developer at the same time, then the answer is yes, you can be both at the same time. You can deliver services for both roles simultaneously if you have studied their tools and techniques.

How do you build trust through design? ›

8 Ways You Can Build Trust Through Design
  1. The Risk of Trusting. ...
  2. Make It Personal. ...
  3. Trust: Borrow It To Build It. ...
  4. Let's Get Certified. ...
  5. Show, Don't Tell. ...
  6. Accountability. ...
  7. Give Users a Sense of Control. ...
  8. Educate Your Users.
5 Apr 2018

What happens when you bridge the gap? ›

Definition: To connect things in a logical way; to have qualities of two different things; to fill in a space between two things. Essentially, at its minimal meaning, bridge the gap means to diminish the differences between two things.

What does it mean to bridge something together? ›

bridge verb [T] (BRING TOGETHER)

to make the difference or division between two things smaller or less severe: We must bridge the gap between employees and management. SMART Vocabulary: related words and phrases. Connecting and combining. abut.

What's another way to say bridging the gap? ›

What is another word for bridge the gap?
tide oversustain
keep one goingkeep someone going
see throughkeep your head above water
see someone throughkeep someone in funds
keep the wolf from the doorsupport
19 more rows

How do you explain research gap? ›

A research gap is a question or a problem that has not been answered by any of the existing studies or research within your field. Sometimes, a research gap exists when there is a concept or new idea that hasn't been studied at all.

What is the main reason why we need to bridge the gap of the research system and the client system? ›

According to the participants, bridging the gap between research-based knowledge and practice leads to improved patient-perceived outcomes.

How do you solve research gaps? ›

Here are 6 tips to identify research gaps:
  1. Look for inspiration in published literature. ...
  2. Seek help from your research advisor. ...
  3. Use digital tools to seek out popular topics or most cited research papers. ...
  4. Check the websites of influential journals. ...
  5. Make a note of your queries. ...
  6. Research each question.
25 Feb 2019

How do designers and engineers work together? ›

Engineers and designers improve the design of a product, coding together, live. That way, you can accept user stories even when they are not yet visually perfect, as long as the functionality works. Small design improvements make it to the designer's backlog for the next pairing session.

Why is it important for clients designers and developers to have a clear understanding of who their target audience is? ›

Identifying a target audience provides a clear focus of whom your business will serve and why those consumers need your goods or services. Determining this information also keeps a target audience at a manageable level.

Why is it important for a designer and the end user to communicate with each other? ›

To make a product successful, its design requires effective communication with end-users. Each product through its interface design needs to tell users what it can do for them, how they can use it and why they should really care about using that product.

What is the best way to collaborate on a project? ›

Whatever project or task management platform you might be using, there are a few common tips for effective project collaboration within a team.
  1. Have a project owner. ...
  2. Keep discussions open, constructive and thoughtful. ...
  3. Use applications that suit your team's needs. ...
  4. Make meetings meaningful. ...
  5. Understand the “purpose”

How do you make sure your design meets the needs of the project? ›

10 Tips to Ensure the Success of Your Design Projects
  1. Truly Get to Know the Client and Their Customers/Visitors. ...
  2. Have a Clear Set of Goals for the Project. ...
  3. Clearly Define the Scope of the Project. ...
  4. Allow Plenty of Time. ...
  5. Focus on the User. ...
  6. Know What Actions You Want Visitors to Take.
17 Jun 2021

What are the most important things to consider while working on a designing project? ›

The 7 steps of project design
  • Define project goals. In the first step, define your project goals. ...
  • Determine outcomes. Next, narrow down the outcomes of the project. ...
  • Identify risks and constraints. ...
  • Refine your project strategy with a visual aid. ...
  • Estimate your budget. ...
  • Create a contingency plan. ...
  • Document your milestones.
5 Jun 2022

Why is it important for designers to collaborate and work in teams? ›

Working in collaboration helps designers understand how inter-team members work together and their needs, pain points, and preferences. We can also then be in a better position to empathize and understand different viewpoints to ensure a seamless transition of deliverables.

How can you establish synergy between designers collaborating? ›

Here are 10 ways to make the process easier.
  1. Step out of your silos. ...
  2. Avoid the “us vs. ...
  3. Get aligned. ...
  4. Be transparent. ...
  5. Accommodate differences. ...
  6. Learn each other's language. ...
  7. Determine the scope as a team. ...
  8. Set the timeline together.
13 Jun 2018

What do designers give developers? ›

Provide design files and all necessary assets

A part of each designer's responsibility is to set the developers up for success. One of the first things that can help you achieve that is by providing the developers with all the necessary design files and assets.

Can front-end developer also a designer? ›

A front-end developer thinks in user experience too as well as the visual presentation, but with the focus and perspective centered on the code itself. This person can do some visual work, but not to the level of a designer. While s/he may design logos from time-to-time, the core strength is in the code.

What is the difference between a UX designer and a UX developer? ›

When building a website, the UX/UI designer determines what the team should build and what the website should do; the developers make the website work and make it functional.

Can a UX designer become a front-end developer? ›

It's often possible to be a UI UX designer and a front end developer. However, it's important to understand the difference between the two disciplines in order to create effective user interfaces and web applications.

Who makes more UX designer or developer? ›

The average salary for a UI/UX Designer is $73,000 (Source:Indeed.com) compared to the average salary of a Front End Developer which is $62,000.

Is 40 too old to become a UX designer? ›

While you may face different obstacles than your younger colleagues, becoming a UX designer (and succeeding!) in your 30s, 40s, 50s (and beyond) is totally doable. In fact there are even advantages and perks that you'll experience that your younger colleagues won't (at least not for a while).

What are the three 3 fundamental components of a gap analysis? ›

To conduct a gap analysis, you need to assess your current situation, determine your goal state, and highlight the gap between the two. Then, you can create an action plan to bridge said gaps.

What makes a good gap analysis? ›

Gap Analysis Best Practices

Ensure your goals are specific, measurable, achievable, relevant, and time-bound (SMART). Back up your recommendations with supporting data from your analysis to increase the likelihood that your company will adopt them. Use charts to illustrate your data and make it easier to understand.

How designers can work with developers? ›

I collaborate with developers by clearly communicating my designs through words and via software such as Zeplin and by making prototypes the developers can access and see my designs in motion. “I also do regular checkins and design reviews to make sure everything is going according to plan.”

What is the difference between designing and development? ›

One of the biggest differences between designing and developing a website is that development - the actual building of the website - requires coding knowledge and ability, while design requires knowledge around usability, functionality and aesthetics.

Why are developers paid more than designers? ›

However, in general, web developers tend to earn more than UI/UX designers. This is because web developers typically have more technical skills and experience than UI/UX designers. Additionally, web development is a more in-demand field than UI/UX design.

How do you transition from developer to designer? ›

If you're a web developer looking to become a UX designer, but not sure where to start, this article is for you.
...
10 things to do when moving to UX design
  1. Pick a specialization. ...
  2. Find transferable skills. ...
  3. Find design mentors. ...
  4. Get educated. ...
  5. Master your prototyping skills. ...
  6. Get real practical experience.
15 Mar 2020

What are 3 important things for the development of trust? ›

The Three Elements of Trust
  • Positive Relationships. Trust is in part based on the extent to which a leader is able to create positive relationships with other people and groups. ...
  • Good Judgement/Expertise. ...
  • Consistency.
5 Feb 2019

What is the bridge between design and manufacturing? ›

Product Engineering: The bridge between design and manufacturing.

What are the steps of bridge design? ›

The design process of a bridge can be divided into four basic stages: conceptual design, preliminary design, detailed design and construction design.

How does planning bridges the gap between present and future? ›

It is the process which decides in advance the objectives be achieved and formulates plans, policies, and methods to achieve them. In this way, we can say that it bridges the gap between why we are and where we want to go.

How do you bridge gap between product and engineering? ›

Bridging the Gap Between Engineering and Business Teams
  1. Focus on Use Cases. Start by bringing representatives from both the engineering and business teams together to brainstorm use cases that should be possible in the project's final product. ...
  2. Divide the Work. ...
  3. Visualize the Work. ...
  4. Stay in Touch.
15 May 2020

Is the bridge between design and? ›

Researchers should bear in mind a bridge between design and analysis, such that study design characteristics drive analytic choices and the analysis appropriately accounts for the characteristics of the study design.

What is the relationship between design and production? ›

Product development is a three-stage process in which marketing establishes product requirements, a design team develops a working prototype and production engineers then determine how the product will be manufactured. A concept design is used to evaluate product ideas for initial market testing.

What are bridge designers called? ›

Bridge Engineers are civil engineers responsible for designing and building bridges and other highway-related structures. Typical tasks for bridge engineers include designing and maintaining bridge structures, minimizing environmental impact, and supervising the fabrication process.

What is the most effective bridge design? ›

Truss bridges are extremely effective because they have a high strength to weight ratio.

How do you make a strong bridge? ›

While connecting two sides, make triangles. If you really have time and want your bridge to be very strong, you may also divide each triangle to 3 smaller triangles. This will give additional strength to your bridge. You may also glue additional strips of pasta over the roadway.

What bridges the gap between where we want to be? ›

Planning is the function of management that bridges the gap between where we stand today and where we want to reach.

How do you bridge the gap between performance and potential? ›

How To Bridge The Gap Between Potential And Performance
  1. Value Relationships Before Results. I recognize you've got to generate revenue—or you'll go out of business. ...
  2. 2, Offer Harsh Explanations in Light of High Expectations. ...
  3. Teach the Importance of Soft Skills. ...
  4. Cultivate Unity in the Midst of Diversity.
21 Jul 2015

What seeks to bridge the gap between where we want to reach? ›

Planning bridges the gap from where we are to where we want to go.

How do designers and engineers work together when creating a new product? ›

Engineers and designers improve the design of a product, coding together, live. That way, you can accept user stories even when they are not yet visually perfect, as long as the functionality works. Small design improvements make it to the designer's backlog for the next pairing session.

How do you bridge the gap between tech engineering team and the stakeholder? ›

Whether you're a technology leader or a business leader, the responsibility falls on you to act as the glue between teams and key stakeholders.
...
To achieve this, it's essential to incorporate 3 key pillars into your approach:
  1. Practice Active Listening.
  2. Hold Personal Integrity.
  3. Aim for Purposeful Help.
5 Sept 2019

What is important for engineers to consider when designing a bridge? ›

For designing safe bridge structures, the engineering design process includes the following steps: 1) developing a complete understanding of the problem, 2) determining potential bridge loads, 3) combining these loads to determine the highest potential load, and 4) computing mathematical relationships to determine the ...

Videos

1. Bridging the Gap Between Designers and Developers - by Emmanuel Penzes
(MDI - Medical Devices Israel)
2. Bridging the Gap Between Designers and Developers - PeopleSpace Community School
(PeopleSpace OC)
3. Designers || Developers - Finally Bridging the Gap - Elisabeth Engel
(Auth0)
4. Bridging the Gap Between Design and Development
(Zeplin)
5. Bridging the Gap Between Design and Development
(UXPin)
6. Johns Beharry (Peakshift) on bridging the gap between designers and developers
(Adopting Bitcoin)
Top Articles
Latest Posts
Article information

Author: Rev. Porsche Oberbrunner

Last Updated: 11/07/2022

Views: 6033

Rating: 4.2 / 5 (73 voted)

Reviews: 80% of readers found this page helpful

Author information

Name: Rev. Porsche Oberbrunner

Birthday: 1994-06-25

Address: Suite 153 582 Lubowitz Walks, Port Alfredoborough, IN 72879-2838

Phone: +128413562823324

Job: IT Strategist

Hobby: Video gaming, Basketball, Web surfing, Book restoration, Jogging, Shooting, Fishing

Introduction: My name is Rev. Porsche Oberbrunner, I am a zany, graceful, talented, witty, determined, shiny, enchanting person who loves writing and wants to share my knowledge and understanding with you.