Tips for Web Designers to Collaborate Better with Developers
Last time, we told you about how designer-developer workflows can be optimized to deliver quality outputs on time. Now let’s get into the designer’s perspective. How can you, the web designer, make sure that your design is applied into 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. We already have discussed clear communication and active collaboration between the designer and web developer as the keys to a better designer-developer work relationship. Another designer responsibility is that 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. UX content strategist Jerry Cao has some tips on how you can explain your mockups to your developer.
- 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
- When describing ideas, do it in a practical manner. The difference of 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 is 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, Disqus, and Mapbox.
- 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. These tools and programs include Trello, Asana, Google Drawings, UXPin, Cage App, Conceptboard, and Slack. Our team at MicroCreatives, consisting of designers, developers, copywriters, animators, along with supervisors, creative directors, and quality assurance specialists, take advantage of Skype, Asana, and Toggl for communication, project management, tracking, and allocation, and for time-tracking.