At GPMD our design and development teams work quite closely with each other and naturally there have debates around design and frontend topics over the years. Recently however, our designer Thayse and frontend developer James read the book Refactoring UI by Tailwind CSS creators Adam Wathan and Steve Schoger together and this ended up sparking a lively debate and we wanted to find out more.
Refactoring UI: A Short Summary
Let’s dive into the book, and ask why this book got you both so excited in the first place?
James: The book is primarily written for developers, though it can be useful for designers and those in hybrid roles too. The design principles/tactics are applicable to many types of UIs, including our bread-and-butter, ecommerce sites. When applied to this scenario, the book has the potential to speed up design decisions and implementations. Some of the recommendations don’t necessarily apply to our work, however I’d say we can use around 80% of Refactoring UI in our workflow.
Thayse: I think the marketing of the book is a bit confusing. It sounds like the design aspect in the development of digital products can be replaced by a book. But the point the book actually makes is around helping frontenders, who lack the confidence in working on visual design when a designer is not around to help. So, in the end, the importance of design is the key element of the book. You are always going to need some source of user interaction design best practices guidelines, and the book helps you with that when you don’t have an expert around.
Best Practices: Finding Synergies between Design and Development
“When we work together, the designer and frontend developer share the same vision from the beginning: create an interface that is human centred, that positively impacts the user who is interacting with it.”
How can knowing more about the other discipline help the respective designer or developer? What skills should designers and developers have?
James: One risk is for designers could be flying blind if they don’t know the basics of how the technology works that they are designing for. They certainly don’t need to know all 312 (as of 2022) CSS properties but understanding what HTML, CSS and JS do, the features/limitations the platform in use, and component-based architecture will mean that their designs can be built efficiently and with fewer surprises.
Thayse: Frontend Developers need to understand UX principles and best practices. Having an eye for aesthetics and the basic knowledge of the tools that designers use to create user friendly interfaces is a plus too. Since they also understand the possibilities and constraints of frontend development, having knowledge of the design side can help them create a more intuitive CX.
When should you collaborate and when should you work independently?
James: Refactoring UI recommends not designing too much too early, however I feel that this only applies at the prototyping stage if it’s purely a functionality/proof-of-concept task where UX doesn’t yet need to be considered. If there’s a client involved, it’s probably best to involve a designer too. In the ecommerce space some UI challenges are universal, with many edge cases repeating themselves. How to handle these edge cases should be considered at the design stage to reduce guess work at the development stage.
Ideally we should always be collaborating, however on many smaller projects and tasks the client may want a quick fix and not want to add the expense of a designer into the process. In these scenarios it is much easier for a developer to work independently if a design system is in place. This initial collaborative effort can help the developer make small design decisions when edge cases or bugs arise and need to be actioned immediately. That being said, both designers and developers should always be open to asking and being asked questions at all stages of the process.
Thayse: This depends on what kind of project or task you’re working on. A designer may want to work alone when initially exploring a client’s brand or defining the components to later be used in a design system and style guide.
Collaboration can also be useful in the form of a design system. Design Systems empower the frontend’s workflow, it allows the development to be scalable and optimised. The importance of having a defined system in which the reuse of UI elements can speed up the process and cut off the technical debt developers may accumulate from lack of cohesion is essential. A well crafted design system from a designer will allow the frontend developer and designer relationship to thrive.
How can designers and developers collaborate more effectively?
James: Like a lot of relationships, improving the designer-developer connection essentially comes down to openness and communication.
Thayse: I think beyond building trust in a relationship that is open to cooperation and communication, I believe that it is about a mindset that we both have the same goals. This culture is only achievable through a culture of collaboration where everyone feels accountable for the project since everyone is involved. When we work together, the designer and frontend developer share the same vision from the beginning: make it an interface that is human centred, that positively impacts the user who is interacting with it.
Taking this a step further, collaboration between the two fields can also help foster innovation. When a designer and frontend developer work together, we push one another to break through some new best practices in these fields. Take Frank Lloyd Wright, one of the greatest architects of the 20th century, who would design buildings ahead of his time and pushed the frontiers of engineering. Through close collaboration, they had to create ways to implement his vision and turn his buildings into a reality. A lot of what is common practice in engineering nowadays exists because of Frank Lloyd Wright’s design vanguardism. This analogy also applies to UX design and frontend development: it’s based on how design core driven projects can foment new ways of development.
Here are some additional sources on how developers and UX designers can collaborate more effectively:
- https://www.mailgun.com/blog/dev-life/developer-designer-collaboration/#chapter-2
- https://www.eleken.co/blog-posts/designer-developer-collaboration
- https://www.toptal.com/designers/ui-ux/designer-developer-collaboration
- https://open.spotify.com/episode/0cHoSRg9YXhu84r1QuuaLp
- https://open.spotify.com/episode/2yqlje5n44LVZ9o9pDXps3
