Design and implement with fidelity

Explore how to draw from design tools and implement designs better

10:00 AM to 01:00 PM, 26 October 2018, Bangalore


Well crafted details require a process that prevents design details from getting lost in translation to code. Designers often see a considerable gap between their specifications and the developers’ implementation. Similarly, developers often complain about missing details and unclear inputs from designers. These are outcomes of a mismatch between the languages that designers and developers speak and their understanding of each other’s domains, which leads to poorly crafted products.

In this workshop we will explore how developers can draw from design tools and techniques to help them implement designs better and to help them collaborate more effectively with designers. Participants will be taken through the entire product building cycle, covering design, handover, implementation and iteration, all compressed into a span of a couple of hours.


  • A Mac computer with Sketch installed. There is a 14 day free trial available.
  • Zeplin, can also be accessed via the browser.
  • A code editor of your choice.
  • A reliable and fast internet connection.


Design (1–2 hours)

In the first part of the workshop, we will design a simple progressive web app. We will start by defining the functionality and then jump into Sketch to learn the fundamental principles, techniques and best practices of things like colour, typography, layout, information hierarchy, using symbols and making designs responsive.

Handover (30 minutes)

In the handover stage, we will export out designs to Zeplin to generate specifications and style guides that are easy to understand, change and maintain.

Implementation (2–3 hours)

We will build upon the pre-shared boilerplate code with the participants and code the front-end part of the application. We will address each design aspect introduced earlier and translate it into code to match the design to the highest fidelity. At the end, we will have a responsive web-app written in HTML, CSS (Sass) and JavaScript that exactly matches the design intent.

Iteration (30 minutes)

In the real world, a digital product is never done. In the final stage of this workshop, we will make design changes in our app, without breaking the existing code.


Wolfram Thurm

Product Designer, Uncommon

Akshay Verma

Product Designer, Uncommon

Tanushree Jindal

Product Engineer, Uncommon