Tips for Web Designers to Collaborate Better with Developers

web design mockup


How can you, the web designer, make sure that your design is applied to the website exactly the way you envisioned it?


As the designer, your responsibility does not stop in creating a mockup of a usable interface and then just turn it over for encoding. You should be able to explain the mockup in detail to the developer – what you expect it to look like and how it should work – in a way that the developer understands.


It helps if you know something about coding

You don’t necessarily have to learn a lot about code languages, but it could be to your advantage to just learn enough to understand how web developers bring your design to life. Learning the basics coding lets designers create designs that are easier to translate into code.


Work on mockups from a developer’s point of view

The goal of seeing mockups from a developer’s point of view is just so you understand the project from their perspective.

Here are some basics that you should know:

  • The difference between CSS and HTML
  • How CSS creates effects
  • What can be created using CSS alone, and what requires images
  • How HTML tags are nested and rendered in the browser
  • How responsive breakpoints work

It also doesn’t hurt to ask the developer directly about more complicated elements. It also helps if you know how JavaScript interacts with HTML, especially when working on UX design.


When describing ideas, do it in a practical manner

The difference in thought processes between the designer (creative/subjective) and developer (technical/objective) can also be a source of confusion. To avoid confusion and misinterpretation, you need to describe your ideas to the developer practically or in a way that they better understand. A live example also helps to demonstrate how the design elements should work. This way, the web developer can easily visualize what should be achieved.


Make use of style guides

Mockups are the crucial stage where style guides are most needed as this stage connects design to development. Style guides basically show how to create reusable UI patterns and offer a quick visual reference for designers and developers. Most style guides highlight typography, layouts, color schemes, reusable code, graphics, navigation, logo styles, and sometimes, design philosophy.


Create a live style guide

It is typical for web or mobile UI projects to go down the HTML route due to its effortlessness to be updated and how it feels natural to the developers working on the project. Furthermore, an HTML front-end style guide is easier to be built into a live style guide. Online HTML style guides you can check out for reference include MailChimp, Lonely Planet, WooThemes, Primer CSS, and Disqus.


Other elements you should explain

Unless you have integrated your files into an interactive format, you need to describe interactions and animations. Another element you should not forget to explain is links. Tell the developer where each links directs to. You can place it as a side note affixed to wireframes or through diagrams or storyboards.


Additionally, don’t forget to organize resources (and make sure to include all assets) into their individual folder, make use of appropriate file naming conventions, and label each font family and make sure that all paid fonts have the necessary licenses for web use.


Tools and programs also make collaborations go smoothly especially in terms of communication and project and task management and tracking.