De Voorhoede

front-end developers

How do we go from storytelling, through concept and visual designs, towards a modular, high-performance website?

9 ways to improve collaboration between developers and designers

Developers respect color theory, designers worry about render-blocking JavaScript. These are some of our daydreams. The reality is that we usually prioritise fixing our own problems before we try to understand someone else’s. As front-end development specialists, we work closely together with interaction and visual designers every day. To get the best out of each other, we came up with these guidelines.

Designers and developers working together
Photo taken during our “Developers ❤ designers” day with Hike One. We talked about code and design, and put our ideas into practice by teaming up to build random prototypes.

Wait — why is this collaboration so difficult in the first place?

To many web developers, design is mostly important because it makes things recognisable and appealing. But the heart of the matter lies at its functionality. A design is useless if it doesn‘t improve how it works. Nobody will disagree on that.

The client however sees design as a means to tell a story. It’s the story of what her organisation does, how it does those things, and why that is important. And let’s be honest: storytelling shouldn’t be hindered by concerns of reusability, browser quirks or performance.

The designer now has to design something that is highly usable and tells the story at the same time. The trouble is that the client isn’t going to be sold by a technical concept. So before you know it, parallax carousels with soft-focus high definition photography show up all over the place. And that may not be in everybody’s best interest.

OK, so what are your suggestions?

Here’s how we go from storytelling, through concept and visual designs, towards a modular, high-performance website:

1. Work agile

The best way to tackle problems before they arise is to work agile. Since you’re in the same room working on the same things it will be so much easier to prototype, test and iterate together. If you can’t work agile, the following points are all the more important.

2. Get front-end involved early

A front-end developer should be part of the project set-up as early as possible. Probably earlier. They need to be able to speak out about feasibility, chances for innovation and what the hard parts are. Don’t hesitate to invite them to introductory meetings: you may be surprised at how well they can sell their work.

3. Speak the same language

All parties involved should form a shared vocabulary. We should use the words that the client uses for products and services. Developers might even use those words in the code base. Teaching clients our jargon is fun too.

4. Take time for the hand-over

Especially in a non-agile setting, the hand-over of a design should happen via a human to human interface. This means that a designer and a developer should take as much time as needed to discuss and improve the design. Put the designs on a wall and figure out form element states, behaviour on touch interfaces, animations, use of graphic elements and so on. Discuss responsive behaviour and breakpoints for which there’s no design. Which leads us to:

5. Mobile first

The design should be mobile first. That’s the way things are. Two major advantages: 1) mobile first is the shortest route to an MVP and 2) the result will be designed for performance. Because as we all know:

6. Build for performance

Good UX starts with performance. A designer that cares about the user always chooses in favor of performance. Not entirely coincidental, this is usually easier for the developer to build and improves accessibility as well.

7. Make a style guide

Build a style guide together. Typography, colours, buttons, form elements, panels, all the core stuff that every website needs. This kind of design system accelerates building compositions and prototypes. And do it directly in the browser. Because in the end:

8. Embrace the browser

The browser is the canvas. The “definition of done” is a website that your uncle can visit from his vacation home. Not an unmerged branch on Github, nor a PNG file on Dropbox. That’s why designers need to learn about the browser. At the same time, developers shouldn’t use technical barriers as an excuse for lousy design implementations. Because browsers can do pretty much anything these days. Finally:

9. Respect each other’s work

Most developers know their way around Photoshop, and most designers know how websites are built. That doesn’t mean you know the job. Play to your strengths, and know when to ask someone for advice or feedback. Stay curious. Let others help you make your stuff better, and then help others make theirs better as well.

To cap it off:

To make beautiful things, both visually and technically, it’s critical that developers and designers work well together. That’s why we try to adhere to these guidelines. Our love for designers is real — and we hope that the feeling is mutual.