From design to development: How do you deal with a broken workflow?

A presentation at code.talks in in Hamburg, Germany by Roy van Rooijen

From design to development: How do you deal with a broken workflow?

From design to development: How do you deal with a broken workflow?

Introduction

Introduction

Introduction IXDS

Introduction IXDS

Introduction Sketch Runner

Introduction Sketch Runner

Sketch Runner

Sketch Runner

Introduction Design Tools Network

Introduction Design Tools Network

Design Tools Network

Design Tools Network

Topic of this talk

Topic of this talk

Breaking down the topic: design

Breaking down the topic: design

Breaking down the topic: development

Breaking down the topic: development

Breaking down the topic: the workflow

Breaking down the topic: the workflow

Breaking down the topic: how to deal with it?

Breaking down the topic: how to deal with it?

Chapter 1: Design

Chapter 1: Design

Illustration vs. Interface Design

Illustration vs. Interface Design

Interface Design

Interface Design

Chapter 2: Development

Chapter 2: Development

Overview of roles

Overview of roles

Highlight of roles

Highlight of roles

Chapter 3: The broken workflow

Chapter 3: The broken workflow

Velocipedia: Sketch of a bike

Velocipedia: Sketch of a bike

Velocipedia: 3d render of the bike sketch

Velocipedia: 3d render of the bike sketch

Introduction 3d modeling

Introduction 3d modeling

Utah teapot model

Utah teapot model

3d printed Utah teapot

3d printed Utah teapot

3d modeling output a video

3d modeling output a video

3d modeling output a video, static image

3d modeling output a video, static image

Introduction Print Design

Introduction Print Design

Print Design

Print Design

The Gap in UI Design is Bigger

The Gap in UI Design is Bigger

Our tools are optimized for illustration

Our tools are optimized for illustration

They’re great for ideation

They’re great for ideation

But not the best for Interface Design

But not the best for Interface Design

Button Layout in Design and code

Button Layout in Design and code

Conclusion illustration tools

Conclusion illustration tools

Chapter 4: How to deal with it?

Chapter 4: How to deal with it?

No one-size-fits-all solution

No one-size-fits-all solution

We need a mindset change: The 1:1 workflow

We need a mindset change: The 1:1 workflow

Explore the medium

Explore the medium

Video of Kelly Slater surfing on a table

Video of Kelly Slater surfing on a table

Tool limitations: “If all you have is a hammer"

Tool limitations: “If all you have is a hammer"

“If all you have is a hammer, everything looks like a nail”

“If all you have is a hammer, everything looks like a nail”

Examples of good workflows

Examples of good workflows

IXDS Sketch to Framer Workflow

IXDS Sketch to Framer Workflow

Sketch plugin: Map Generator

Sketch plugin: Map Generator

Framer X: Design with Coded Components

Framer X: Design with Coded Components

Takeaways

Takeaways

1. Stop painting UI, start constructing it.

1. Stop painting UI, start constructing it.

2. Fully understand the platform and medium of your product

2. Fully understand the platform and medium of your product

3. Know your tool limitations

3. Know your tool limitations

ting

ting

5. Always Be Communicating

5. Always Be Communicating

Ask me questions ⁉

Ask me questions ⁉

Project: Solar Sinter, Markus Kayser, 2011

Project: Solar Sinter, Markus Kayser, 2011

Takeaways of Solar Sinter

Takeaways of Solar Sinter

We need innovation in tools! #DTHack18 in Tel Aviv

We need innovation in tools! #DTHack18 in Tel Aviv

Closing title slide: Roy van Rooijen

Closing title slide: Roy van Rooijen

The workflows from design to a shipped digital product are broken in many ways. Think about that painful manual labour when you implement design and have to deal with often incomplete specifications or use cases that weren’t accounted for. When you translate a static representation of colors, typography, and measurements to code, you miss a range of context specific details that make or break the user experience. In addition, when translating an image based representation to code, you’re effectively doing work twice.

But hey, it’s not the designer’s fault! Instead, blame the tools that have been lagging behind. Design tools are generally not well suited to cater to the nitty gritty details of a digital product, like states, user input, live data, error handling, localization, and platform specific layout constraints and rendering.

Come and learn how to work smarter across skills within your team, and understand the pitfalls and leverage the power of state-of-the-art design tools.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

  • Tool: Sketch Runner

    A plugin for the Sketch design tool to speed up your workflow using the keyboard

  • Videos: Design Tools Network Vimeo

    Videos of the talks we hosted during our meetups and hackathons.

  • Essay: Interface — Bryn Jackson

    A great in-depth essay proposing an intermediary format between design and engineering tools to enable more efficient, capable tooling for product teams generally and designers especially.

  • Essay: The Design Tool Dilemma — Colm Tuite

    Design teams, companies, and investors have invested huge amounts of both time and money in supporting a broken design process: the traditional image-based workflow.

  • Project: Velocipedia by Gianluca Gimini

    Art project of letting people draw bikes by memory, and then turning them into 3d renders.

  • Project: Cut Shut by Chris Labrooy

    Beautiful animations and renders of a 3D world where physics don't exist.

  • Apple Human Interface Guidelines

    The Human Interface Guidelines. Dive deep in these interactions patterns and start to fully understand your medium.

  • Tool: Map Generator Sketch plugin

    A plugin that connects to the Mapbox or Google Maps API to load an image of a map as an image file of a layer in Sketch.

  • Tool: Framer X

    Design with coded components. Fluid layouts how they are supposed to be.

  • Project: Solar Sinter

    A beautiful art project where 3d models are created with a printer in the desert that uses the sun, heat, and sand, to construct the output.

  • Event: Design Tools Hackathon 2018

    Join us during 2 days of hacking on digital product design tools and meet passionate makers from all over the world who are excited about pushing the industry forward. In addition, we serve you a side program with inspiring presentations by leading design tool makers during both mornings.

  • IXDS job openings

    Check out our job openings!

Buzz and feedback

Here’s what was said about this presentation on Twitter.