Why should web designers and web developers work together?

It seems like a matter of common sense: designers and developers should work together.
But too often, these people are working on their own, on the same project. The designer works to create the graphic elements, color palettes and typography that look good, while the developer codes and prepares the material for web publication. And this can cause a disagreement between the designer and the developer, and have an impact in the final design itself.
Yet when designers and developers work together on end-to-end projects, the result is a more cohesive web project, with better aesthetics, a beautiful user interface, and clean code. There is also less work and rework required during the collaboration process, resulting in a project that can be completed in less time. 

Designers vs. Developers

Screenshot 2015-10-14 to 12.06.41
Traditionally, web designers and web developers have different profession names.
Typically, designers use graphic design software like Adobe Photoshop and Illustrator to create what websites and their elements will look like. This aesthetic is then coded using HTML, JavaScript, jQuery, CSS and other programming languages ​​by a web developer, in order to bring all of this work online.
While designers and developers can often work in separate rooms or even in different countries, each needs the skills of the other to create a complete website.

Working together: the benefits

The major advantage of joint work between designers and developers is the creation of a more complete web project. From appearance to interactions, to experience, the project can only be better realized when designers and developers collaborate. And it's becoming almost impossible not to collaborate these days. 
We must also not forget to invite the designers of Interacton in this collaboration, the advantages of which are multiple:

  • A second pair of eyes to check all the content, and spot flaws or errors
  • More creative brainstorming
  • A more complete experience: the designer can understand what the developer is capable of creating
  • A more cohesive finished product, where all parts look the way they were originally meant to look
  • Learning how design/development works
  • A fusion of everyone's ideas in order to have a more complete vision of the project rendering
  • Increased focus on project mission and goals
Working together: the disadvantages

Although I would like to say that there are no downsides to working together, that would be naive of me. Indeed, there may be some disadvantages that it is necessary to consider:

  • There may be costs associated with everyone meeting at the same time, especially if people are not in the same location.

This means using teleconferencing and online sharing tools to communicate when not everyone can be in the same room at the same time.

  • Sometimes people will disagree or just won't get along. But we are all adults, right? Professionally speaking this should not harm our work.
What you can do

Screenshot 2015-10-14 to 12.06.56
Now that you've thought about all the reasons why you should work with a designer or developer, how can you put this into action? It all starts with clear communication. Web designers and web developers must first plan the project, and think about the big picture during the process, and as decisions are made. You have to understand that it won't be easy, and you will win and lose some of the fights along the way.
The best way to start is to take your designer or developer out for lunch, coffee, or a walk. Get to know him and identify his personality, his way of working before discussing such a project for the first time. Then talk about how you plan to work together as a team and set some ground rules.
A regular update with all the collaborators on the project is essential (perhaps they should even be integrated into the retro-planning), to ensure that everyone is at work, and on time. Remember to be nice; offer constructive criticism and be open to feedback from others. The goal is also to learn new things along the way: be grateful.

5 tips for designers
  1. Explain design theory in a simple way, to help developers understand where aesthetics come from.
  2. Think about the interactive elements you design, and how they will work. Make sure all elements are designed for all stages of interactivity.
  3. Make a complete design. Don't expect a developer to copy and modify similar parts. Create the necessary elements for each part so that everything is ready when he starts working.
  4. Ask for help during the project. If you're not sure if a specific font will work on a website, ask.
  5. Deliver design assets in usable formats, at the appropriate resolution and size for web use.
5 tips for developers 
  1. Ask about the design. Having a theoretical knowledge in terms of color and typography, and even jargon can help you a lot.
  2. Be honest about what you can and cannot do. If a designer is heading towards something that won't be translatable on the web, say something sooner rather than later.
  3. Be available to answer questions and help during the design process.
  4. Get involved in the process from the beginning. Help brainstorm design ideas that work with UX (User eXperience).
  5. Maintain the integrity of the created design – even for the parts you don't like or agree with – in the development process. You would only make enemies by changing things visually, without a real "development" goal.

One of the biggest tips for designers and developers isn't entirely new, but is still relevant. The Agile Manifesto (from its English name "Manifesto for Agile Software Development") highlights four principles that all web designers, web developers and interaction designers should follow:

  1. Individuals and their interactions more than processes and tools.
  2. Software that works more than comprehensive documentation.
  3. Collaboration with customers more than contract negotiation.
  4. Adapting to change more than following a plan.
Skills everyone can benefit from

Screenshot 2015-10-14 to 12.07.05
 
In order to communicate better with each other, designers and developers must force themselves to understand and especially to speak each other's language. For this, they should have a basic understanding and knowledge of the following:

  • Design principles, such as color, space, and typography
  • Optimal image formats and sizing
  • Basic understanding of HTML and CSS
  • Use of web fonts
  • Trends in design and development
  • Understanding user wants and needs
Conclusion

The problem no longer only affects the objectives of the designer/developer collaboration but also extends to understanding and the reciprocal rights of each. At the end of the day both jobs have one common goal: to create a phenomenal site. 
The thing we really need to start thinking about is development design.

Because really, all development is design, and all web design is development.

You can't have one without the other, and as design gets more and more complicated, this will become even more true. So maybe what we need is a new job description, or a job title that shows that designers and web developers are related.
Here's my suggestion: How about we refer to this combination as "web development designer"?
Share your ideas and potential job titles with us through the comments.
 
Isabelle De Carvalho – UX-Humanist @UXrepublic
Translation of Carrie's Article Throw Pillows