User centric digital agency
overview

Building a bridge between designers and developers

Good communication and collaboration between Designers and Developers is key when working together on a project. If you invest in a good designer-developer relation from the beginning of a project, it will result in a better product with beautiful UX and clean code.

Good communication and collaboration between Designers and Developers is key when working together on a project. If you invest in a good designer-developer relation from the beginning of a project, it will result in a better product with beautiful UX and clean code.

 

The role of front-end developers and designers overlap a lot. Nowadays designers can code their own working prototypes and front-end developers have a good knowledge of design and UX aspects without being a ‘designer’.

 

Let us elaborate a bit on our workflow when it comes to design and development.

 

Prototyping

When prototypes are made, the developer often gets a better idea of the behaviour of the page.
Think of how interactive elements behave on a page. For example, when the website navigation is hidden and can be opened by clicking a hamburger icon, the way it will appear can be done in a million ways. Defining this behaviour in a working prototype can help the developer when building this functionality and he will already have a full understanding of how this animation should behave. We use FramerJS for bringing our prototypes to life.

 

Modularity

In the past couple of months our workflow has been all about designing and developing modular components. By thinking in a modular way, we tend to reuse more components between different pages. This way we can present the same UX across different pages but also between devices.

 

When developers create modular components, this means the code is centralised and doesn’t have to be re-created when using the component on another page. Simply placing the component on a different place should work, both visually and functionally.

 

Jello

As you probably already know, we have been working on our very own framework, Jello. This is a perfect example of how we have integrated this modular way of thinking. Our developers have been researching existing projects with all their own specific functionalities. Comparing these functionalities and trying to combine similar ones into a single, more modular component, was our main goal. Besides looking at existing projects we have been exploring and identifying the needs of our clients so the functionalities correspond to their wishes.

 

Be available

When sprinting during a project it means you are going through fast and small iterations with a multidisciplinary team. For example, when the developer wants to clarify a functionality with the designer, it’s important that he or she is available immediately to make a decision on the matter. After this you can quickly discuss the outcome with the product owner and if approved, start implementing this functionality. This way you can overcome obstacles really fast without having to wait for someone to be available.

 

Multiple short stand-ups during the day make sure the team is single minded and going in the same direction. Problems can be found and solved quickly, because periods between stand-ups are smaller and therefore the chances for big mistakes being made are less likely. This way you will save time in the end by not having to solve major issues, which you didn’t saw in an earlier phase.

 

Responsive Web Design

At Bravoure we work with Sketch, a vector based design application, to create our responsive web designs. We started using this only two years ago and we can’t imagine a world without it anymore. Because everything is vector based it means that everything is scalable, which results in rapidly creating responsive web designs. Our designers start by creating the mobile version first and then expand to tablet and desktop resolutions.

 

For our developers, it’s easy to export layers for both retina and non-retina devices. This way they can save a lot of time in the so-called ‘slicing’ process.

 

Conclusion

By just listening to each other, knowing what the other needs and what their duties are, can bring a lot to the relation between your designers and developers. In the end we all want the same thing, building that phenomenal website for our client.


Do you want to know more about our way of working? Read our Blog about Scrum or drop by for some coffee!

 

Chris Heijnen
Front-end Developer