Meta Refresh 2018

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.

Outline

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.

Requirements

• 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.

Speaker bio

Wolfram

Wolfram is a musician and designer from Germany. If he is not pushing around pixels he cycles, works with low value garbage recycling and teaches music. He studied product design at the Bauhaus university but has grown fond of digital design since he has become a part of uncommon about three years ago. He worked on apps for clients like Flipkart, OLX, GoJek and TCS.

Akshay

Akshay is a product designer at Uncommon. He studied at Copenhagen Institute of Interaction Design, Denmark and National Institute of Design, India. He has worked on projects for clients like IKEA, Barclays and the Copenhagen Municipality and his work has been featured on Fast Company, Wired and The Creators Project.

Tanushree

Tanushree is a front-end developer at Uncommon. Previously she worked with Microsoft and Cognitive Match, and more recently with clients such as Shoonya Space and Black Baza Coffee. She studied Information Systems at UC Berkeley. She is a trained expressive arts therapist and runs spaces with an aim towards better emotional well-being and free expression using different arts.