How Front-End Developers and UI/UX Designers Can Work Better Together

The web has changed so much in the past 15 years. Technology has enabled new usages, new ways of communication, new ways of seeing the world. Web Design trends are also constantly changing, every year we see new trends that sometimes stick for few years, sometimes they don’t. The same happened in web development: we’ve seen new JavaScript frameworks, new ways to build components, new ways to code CSS, using pre or post-processors. The list is almost infinite. But something that has not changed is the need for collaboration between people working on the same web project.

As a Front-End Developer, I had the chance to work with numerous Web Designers and UX/UI designers over my career. No matter if I was in Brazil, France, Mauritius or Canada, I have observed the same challenges over and over again. And one unique solution doesn’t always apply to similar situations. You need to find what works best for you.

In this article, I want to share some topics I believe should be discussed. From my point of view, we, as web professionals want the same thing: build accessible and performant products that will provide the best user experience possible.

If you want your product to work, to get revenues, then you should start with the above goal first, not the other way around.

But let’s start with some definitions.

What is a Web Designer?

A lot of people could probably define what is a Web Designer better than I. But from my perspective, as a Front-End Developer, a Web Designer is someone with extensive skills in design that understands the constraints and the possibilities given by the web. I’ve seen a lot of really good “designers” but who were not always able to fully understand the “web” part of their title. Designing for the web is far from being straightforward. Be familiar with how to use Sketch or Figma is surely part of being a Web Designer, but it’s unfortunately not enough. And honestly, for me it’s totally fine: you learn as you progress.

Probably, from my point of view, a Web Designers shouldn’t just rely on his knowledge and put pressure on himself to know everything about the web. That’s where a Front-End Developer can come into play. Front-End Developers are the ones that spend their time on the web, scrolling, studying code, finding new ways of building components… They are the perfect buddies of Web Designers, and both should be pairing regularly.

What is a UX/UI Designer?

A UX/UI Designer is someone where focus lays on users. Nothing should be more important than the user, the person, the human. A UX Designer needs to spend a lot of his time doing researches. I’ve always considered that a good UX/UI Designer should be passionate about people, what they want, how they want things… Of course, you also have the word “designer” in the title, because in the context we are talking about, a UX/UI Designer has the task to understand the user and also know what works the best in terms of UI. Something that works for a website dedicate to moms may not work for a website which main users are teens.

I’ve always considered that a good UX/UI Designer should be passionate about people, what they want, how they want things.

But he is not the only one who has developed an understanding of what users prefer and are used to when they browse the Internet. When a Front-End Developer wants to create a piece of code, a component, he usually dives into his structured memory of patterns. When someone says “button”, it triggers in his brain all the times (thousands of) he clicked on a button, but also snippets of CSS code that can be used to create a button or the long hours he spent analyzing CSS framework documentation…

Front-End Developers can be a huge asset for any UX/UI Designer because they’ve learned so much about the web and usual patterns from a different perspective.

What is a Front-End Developer?

I know a lot of people that could potentially disagree with my definition. For me, a Front-End Developer is a builder, someone that loves building web content using a combination of multiple skills. Because a Front-End Developer is not just a coder. To be a Front-End Developer you need to learn HTML, CSS, JavaScript but these are just the basics. You need to understand how to make a website accessible, how to use CSS to create an amazing layout, how to translate a design file to CSS, how to keep your application performant, how to build a UI/pattern library… the list is long but I'm sure you get my point.

A Front-End Developer is the backbone of any web content. Without a Front-End Developer, the website couldn’t be created (even if you use a no-code generator, a Front-End Developer had to create the UI).

Does that mean that a Front-End Developer is more important than other people in their team? Absolutely not, but his role requires him to be a facilitator, to understand what he can provide for the rest of his team.

A Web Designer, UX/UI and Front-End Dev enter together in a bar…

Now that we have a better idea of what these roles represent, how do we make them work together in a way that they feel empowered and enjoying the collaboration?

It’s about mindset

Any athlete will tell you that mindset is everything to achieve their goals, to win championships, to perform better. This is not that different when it’s about working as a team. Everyone’s mindset is important within a team. But it’s something that the group itself doesn’t have any control. Only individuals can decide to have an open mind, a true relationship with the other member of the team, visualize solutions instead of problems…

We often forget that we all have a common goal. Sure, we can also have multiple goals for ourselves but if you are part of a team, it’s only to achieve a common goal.

Differences are what make this specific group worth existing. EVERYONE has a role to play in any team.

It’s about culture

But it’s not only about individual mindsets. A team with a Web Designer, UX/UI and developers are usually part of a corporation. All over the world, numerous companies understand and value their culture. This is an essential part to guide employees towards common goals and achieve specific tasks.

If companies provide the tools and the support to create trust and equality between the members of a team, then it makes it easier for people to collaborate together and learn from each other.

It’s about ego

Aaah the ego! Some people say that a bad reputation can hurt any company, I believe ego can hurt sometimes even more. The ego is one of the biggest enemies of any company, team or leadership group. I had the displeasure to work with 1–2 people during my career with a pretty big ego.

I will always feel the pain these people have caused, it’s important to make peace with any related event but also with them. After all, we are all humans.

Ego shouldn’t exist in a team. Period.

It’s about collaboration

Collaboration is knowing that people are better than you in certain areas. It’s knowing that you can learn from them. It’s knowing that you can also give something to them. Collaboration is finding the balance and putting everything and everyone at the center of the group.

And no, collaboration is not something you implement once and it’s done, everything will always work perfectly. Collaboration is an equilibrist performance that could go wrong at any time. But you have to keep going because it’s so rewarding when you succeed!

How to get your team to work together?

Before giving you some answers, I want to tell you about two of the best experiences I had during my career with Web / UX / UI Designers. If you're interested in more collaboration stories, you can also read about how I presented my side projects across Europe.

My two best experiences with Designers

My first best experience was in August 2014, in Cincinnati, USA. I’ve worked for a month with Barefoot Proximity to build a new platform. Julie Tran, which was leading the project in terms of design would create pieces of design, sent them to me for prototyping and we would discuss around that. What made the experience amazing was the level of exchange and collaboration.

It wasn’t just about, “Hey, here is the design”, it would be more “hey, here is the design, can you do a quick prototype to see if that works. Let me know if you see any problems that may occur for mobile, accessibility etc…”.

I was able to give my feedback based on my knowledge and experience, Julie would also push back when I would be hesitant to test a particular approach. Combining our visions, being open with each other was what made this project successful. Even with my English being pretty basic at this time, we both enjoyed our work and I kept only good memories from that collaboration.

My second best experience was in 2015, with Julia Bruyneel, who was working in Paris as a Web/UX Designer freelancer. I was in Mauritius for a month and we had to collaborate for few weeks on new designs for an existing project.

Even with the distance, and not knowing each other before, Julia would contact me and exchange about designs she would have made. That simple communication and regular exchange were reassuring for me (was lead on that project for 3 years) but also a manifestation of maturity and professionalism from Julia. It was short but I kept good memories of that collaboration.

Mindset, culture and processes

The three main keys, from my unique point of view, to have successful teams rely on mindset, culture and processes.

Mindset: If you want to have people working together, in collaboration, using each other experience and vision, they need to have a similar mindset. I’m not saying an “identical mindset” or “same personalities”, I’m saying “similar mindset”. When everyone understands the goal of the team and is open to see each human behind his title, then you have more probabilities to have a successful team.

Culture: Sometimes, having a similar mindset is not possible or challenging. In that case, is the responsibility of the structure or company to influence a specific mindset. Companies can decide who should be part of the “family”. That’s why the recruitment process is important.

Processes: a lot of people I know, hate the word processes. For me, processes have always mean freedom. When you have a defined and clear process, you don’t have to stress or be hesitant or afraid. A process should exist to guide you in a process where people can predict what will come next. It’s reassuring to know that everyone has the same process in mind. Sometimes, when people's mindsets are not similar or the culture is lacking, processes should help people to visualize the direction they need to take.

You could take these 3 points separated or combine them to maximize your chances to build successful teams.

What Web / UX / UI Designers should know about Front-End Developers (letter dedicated to designers)?

“We love the web and we love being part of the creation process! We decided to become Front-End Developers because we love building! And it’s not just about converting designs to CSS, we love understanding the why, the how of the creation. And we understand that this may be scary at times because why the heck a Front-End Developer will tell a designer that his design is not accessible? Or tell the designers that he is not sure, this is gonna work for the user? It’s not about competing, it’s about putting energies in sync. The problem sometimes is that we see patterns and code examples in our minds that we don’t always translate for other people to understand. But we’re working on that! I promise! We have more to share than just our “title”, we have more to give than just lines of code. We are here to help!”

The main takeaways from this article

If you are still reading, I hope you also share some common ideas exposed in this article. I have dedicated a portion of my career to try to be a facilitator and share all the knowledge I accumulated to build awesome products.

Teams composed of Web Designers, UX/UI Designers and Front-End Developers sharing a similar mindset have more chances of success.
An internal culture that encourages collaboration and equality between professionals will always produce the best results.
Enforcing best practices through processes will help to make things more predictable and reassuring.
The ego is one of the worst enemies of teamwork. You shouldn’t have any space for ego.
A Front-End Developer is just a passionate professional who wants to be part of the creation process and not just at the end. His integration along the project will ensure the success of any project.

What about your experience? How do you like to work with others? What would you like to see happening more often within your team?

If you want to see how I organize my own workspace for better collaboration, check out my article about my ideal desk setup.