Collaboration Tips Between Designer and Developer

Filed by team twago on November 4, 2014

Working together is better on twago

A web developer talks about his experience working with web designers

Often, people think that working as a freelancer, especially as a developer, means to work alone, without contact with other professionals – except for that phone call or email we receive once in while. This is not always the truth…

Actually, we do work and collaborate together with other experts, and although we are all freelancers and face the same difficulties, working together is not always easy. Today, I would like to focus the attention on web designers, with whom I usually work together on various projects. I will introduce some of the best practices and tools that will help you to make the collaboration easier and as productive a possible.

When the web designer’s job ends and yours starts

When it comes to a web site or app development, there are two main workflows. On one side there is the so-called “Ancient Method” characterised by the following flow:

        Ancient Method

  1. mockup in photoshop
  2. clients’ approval
  3. html assembly
  4. inclusion into the web framework.

The second one is called “Smart Method” and works as follows:

       Smart Method

  1. sketch
  2. html assembly
  3. web framework

Obviously, there are many variables which we could consider and analyse later on. I prefer the Smart Method, assigning the html development to the web designer so that I can focus on programming. This is a crucial question: who will take care of the html and who will take care of the css? Everything depends on this decision: duration, payment and communication with the client. For these reasons is very important to define the tasks and understand your future coworker’s style in order not to step on them and cause misunderstandings and dissatisfactions once the job has started. Anyway, whoever takes care of the html and the css, it is useful to use framework css like Zurb Foundation and Twitter Bootstrap, they help reduce a lot the time you need to assemble the html code. If the design has to start from photoshop, then be sure that the grid reflects the css framework.

The right template system

If the web designer assemble the html, there is one more question: will he be able to manoeuvre the framework and the templates? Unfortunately, many web designers I know don’t go further than WordPress. As a Ruby on Rails programmer, many times I have had to explain the template system. The good news is my co-workers generally learn quickly. Backbonejs and Angularjs, for instance, are a bit more complicated, especially when it comes to managing sub templates. Whatever system we choose, we need to keep in mind that the web designer needs to work comfortably, they should be able to quickly find the template they need to work on without asking anybody.

Virtual Machine

I have been using Linux for many years and never owned a Mac: it would be a nightmare to find out that a co-worker uses a Mac and needs to install Linux virtual from scratch. Lately I started to use virtual machines and let other teams use them too; this saves a lot of valuable time.

Side by side

I like to work “Side by side” one next to the other, each one with our own computer; this way it is easy to discuss about the process, solve problems together and have a look at the designer’s screen, it’s always useful and there is always something to learn.

In conclusion

A web designer is always less willing to experience new codes, read books and stack overflow. They also generally prefer not to edit configuration files. Find tools that make everything easier so that the final result will be satisfying and there will be chances in the future to work together again.

Are you a freelance web developer or web designer? Check out the latest projects on twago!

Find freelance projects

Devis Battisti

A programmer since 1999, Devis is a freelance web developer from Padua, Italy. His main passion is music, especially playing guitar.

Twitter LinkedIn 

Similar Posts:

Tags: , , , , , ,

Comments (1)

Trackback URL | Comments RSS Feed

  1. kumar says:


    Thanks for sharing good article it is solved my current needs and very helpful

Leave a Reply

Your email address will not be published.