Jul 23, 2020 by
Alexander Wolfe
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.
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.
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.
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!
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.
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.
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.
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
and
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!
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.
- Create a design system that uses the same components for designers and developers.
- Improve communications between web designers and front-end developers.
- Invite designers and developers to product design brainstorming sessions.
- Name everything, name early and rename often — Ctrl+R rocks.
- Name your pages as well.
- Name your components.
- Use versioning.
- Use a library (team plan)
- Clean clean clean!
- “Reverse-design” from code.
- Plan Weekly UX meetings.
- Create templates. ...
- Use elements that help you to explain the design. ...
- Explain to the developers how to work with our software. ...
- Meet with the developers to demonstrate the handoff. ...
- Build a clear design handoff process. ...
- Work with a design system.
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.
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.)
- Set clear expectations for web designers and developers. ...
- Promote open communication among developers and designers. ...
- Support constructive feedback within your web design and development team. ...
- Encourage co-creation between website designers and developers.
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? ›
...
10 things to do when moving to UX design
- Pick a specialization. ...
- Find transferable skills. ...
- Find design mentors. ...
- Get educated. ...
- Master your prototyping skills. ...
- Get real practical experience.
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? ›- The Risk of Trusting. ...
- Make It Personal. ...
- Trust: Borrow It To Build It. ...
- Let's Get Certified. ...
- Show, Don't Tell. ...
- Accountability. ...
- Give Users a Sense of Control. ...
- Educate Your Users.
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.
| tide over | sustain |
|---|---|
| keep one going | keep someone going |
| see through | keep your head above water |
| see someone through | keep someone in funds |
| keep the wolf from the door | support |
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? ›- Look for inspiration in published literature. ...
- Seek help from your research advisor. ...
- Use digital tools to seek out popular topics or most cited research papers. ...
- Check the websites of influential journals. ...
- Make a note of your queries. ...
- Research each question.
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? ›- Have a project owner. ...
- Keep discussions open, constructive and thoughtful. ...
- Use applications that suit your team's needs. ...
- Make meetings meaningful. ...
- Understand the “purpose”
- Truly Get to Know the Client and Their Customers/Visitors. ...
- Have a Clear Set of Goals for the Project. ...
- Clearly Define the Scope of the Project. ...
- Allow Plenty of Time. ...
- Focus on the User. ...
- Know What Actions You Want Visitors to Take.
- 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.
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? ›- Step out of your silos. ...
- Avoid the “us vs. ...
- Get aligned. ...
- Be transparent. ...
- Accommodate differences. ...
- Learn each other's language. ...
- Determine the scope as a team. ...
- Set the timeline together.
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.
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.
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? ›...
10 things to do when moving to UX design
- Pick a specialization. ...
- Find transferable skills. ...
- Find design mentors. ...
- Get educated. ...
- Master your prototyping skills. ...
- Get real practical experience.
What are 3 important things for the development 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.
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? ›- 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. ...
- Divide the Work. ...
- Visualize the Work. ...
- Stay in Touch.
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? ›- Value Relationships Before Results. I recognize you've got to generate revenue—or you'll go out of business. ...
- 2, Offer Harsh Explanations in Light of High Expectations. ...
- Teach the Importance of Soft Skills. ...
- Cultivate Unity in the Midst of Diversity.
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? ›...
To achieve this, it's essential to incorporate 3 key pillars into your approach:
- Practice Active Listening.
- Hold Personal Integrity.
- Aim for Purposeful Help.
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 ...