The document discusses building effective relationships between developers and designers, highlighting the importance of product management, design processes, and the use of better tools and methodologies. It emphasizes reusable components and codes, such as the BEM pattern and Vue.js, to enhance collaboration. The speaker advocates for improved tools and practices to foster accuracy and effectiveness in design-development workflows.

1. Techinasia - Building effective developer-
designer relationships
Techinasia, Product Development Conference 2017
Ifnu, August, 10th 2017

2. Who am I?
• Ifnu Bima
• Computer Science IPB & MBA School of
Bussiness Management ITB
• Join Blibli.com in 2012
• Java & JavaScript Developer
• Development Manager
– 30 Developers : Android, iOS, Front End
Developers and Backend Developers
– Blibli.com UI, Content Management System and
Mobile Apps

3. Building effective developer-designer
relationships

4. Design Review

5. Importance of Product Management
• Discipline of
building the right
product
• Prioritization
• Communication

6. Design process circa 2014

7. Using better tools 2015

8. Design Guidelines (2016)

9. Design Guidelines : HTML copy paste

10. Using even better tools: zeplin.io

11. Atomic Design by Brad Frost

12. Blibli Design Language System (2017)

13. Designer-Developer Working effectively

14. Designer-Developer Working effectively

15. Reusable Component : BEM Pattern
• BEM — Block Element Modifier
• Methodology that helps you to create
reusable components and code sharing in
front-end development
• http://getbem.com
• (-) Reusable by copy-paste component
between pages

16. Reusable Component : VueJS
• VueJS approach to
reusable
component match
with Blibli Design
Language System
• Template
• Script
• Style

17. Take away
• Start with Product Management
• Design upfront is a must, even when using
simplest tools : photoshop or moqups
• Improve tools and practices to improve
developers work accuracy
– High fidelity prototype
– Define margin, color, asset in one tools
• Design System is the goal to create effective
designer-developer working relationship

18. We Are Hiring!!
THANK YOU