Made with ❤️ in Hamburg

A presentation at Shapes #8 in April 2019 in Hamburg, Germany by Roy van Rooijen

Slide 1

Slide 1

Cover slide

Roy van Rooijen Made with love in Hamburg April 10, 2019

Slide 2

Slide 2

Agenda

About Me + My (Side) Projects Design Tools × Workflows Sneak Peek

Slide 3

Slide 3

Intro

Hi! I’m Roy from the Netherlands

Slide 4

Slide 4

Intro: Sketch Runner

I’m one of the makers of Sketch Runner

Slide 5

Slide 5

Impression of Sketch Hackathon 2016

Precious, April 2016, Hamburg

Slide 6

Slide 6

The v0.1 hack of Sketch Runner

sketchrunner.com

Slide 7

Slide 7

Help functionality

Critique: I can already do that

Slide 8

Slide 8

Dropbox critique — HackerNews

Slide 9

Slide 9

3 points of critique — HackerNews

  1. “ I can already do that… (but in a very complicated way)”
  2. “ It doesn’t do what you promise, in my (edge) case…”
  3. “ I don’t think you can make money with this!” 9

Slide 10

Slide 10

Sketch Runner Classic

Slide 11

Slide 11

Sketch Runner critique

Slide 12

Slide 12

Runner Learnings

  1. Build what you need, understand, and love → Do it on the side.
  2. If others say your idea is bad → Go for it!
  3. If people complain → They truly care.

Slide 13

Slide 13

Intro Design Tools Network

Slide 14

Slide 14

DTN

Sketch Plugin Hackathon 2017 at IXDS Berlin

Slide 15

Slide 15

2 hackathons, several meetups

Sketch Plugin Hackathon, October 2017, Berlin, Germany Design Tools Hackathon, October 2018, Tel Aviv, Israel

Slide 16

Slide 16

Impression Design Tools Hackathon 2018

Slide 17

Slide 17

Impression Design Tools Hackathon 2018

Slide 18

Slide 18

Impression Design Tools Hackathon 2018

Slide 19

Slide 19

Impression Design Tools Hackathon 2018

Slide 20

Slide 20

Impression Design Tools Hackathon 2018

Slide 21

Slide 21

Impression Design Tools Hackathon 2018

Slide 22

Slide 22

Impression Design Tools Hackathon 2018

Slide 23

Slide 23

Impression Design Tools Hackathon 2018

Slide 24

Slide 24

Impression Design Tools Hackathon 2018

Slide 25

Slide 25

Impression Design Tools Hackathon 2018

Slide 26

Slide 26

All talks on our website

DesignToolsNetwork.com

Slide 27

Slide 27

Design Tools Network Learnings

  1. The best way to grow a network
  2. Getting speakers: Ask nicely, be responsive. A lot is possible
  3. There’s a need for knowledge sharing.

Slide 28

Slide 28

Agenda

Next up: About Me + My (Side) Projects

Slide 29

Slide 29

Challenges with the workflow of design to development

Slide 30

Slide 30

What is Design?

Slide 31

Slide 31

Difference illustration vs. interface design

Slide 32

Slide 32

Interface design

Slide 33

Slide 33

What is Development?

Focus on front-end development

Slide 34

Slide 34

Skills and role for product development

Business Development Product Management User Research Interface Design Marketing Branding Copywriting Front-end Development Data Science Back-end Development QA

Slide 35

Slide 35

Focus on Interface design and Front-end development overlap

Slide 36

Slide 36

Workflow

Slide 37

Slide 37

Velocipedia project

Art project by: Gianluca Gimini

Slide 38

Slide 38

Velocipedia project render

Slide 39

Slide 39

Tools we use in digital design

Slide 40

Slide 40

Our tools are optimized for illustration

Slide 41

Slide 41

What they’re great for

Ideation:

  • Direct manipulation
  • Communication with little friction
  • Simple prototyping and testing

Slide 42

Slide 42

Layout example

Difference in illustration and development tools

Slide 43

Slide 43

The 1:1 workflow

We need a mindset change

Slide 44

Slide 44

Example: Map Generator Plugin

Use the same data source

Slide 45

Slide 45

Example: Framer X

Fluid Design and Coded Components

Slide 46

Slide 46

Example: Webflow

Design is Code. Great web design tool

Slide 47

Slide 47

Project: Solar Sinter

Art project by: Markus Kayser

Slide 48

Slide 48

Video: Solar Sinter

Art project by: Markus Kayser

Slide 49

Slide 49

Learnings from Solar Sinter for designers

  1. Construct your output
  2. Understand the medium
  3. Know tool limitations
  4. Explore new territory
  5. Constantly align through communication

Slide 50

Slide 50

Agenda

Next up: Sneak Peek

Slide 51

Slide 51

Runner Pro

We’re taking it to the next level. Runner is completely redesigned and rebuilt.

Slide 52

Slide 52

Runner Pro coming soon!

sketchrunner.com

Slide 53

Slide 53

Contact me

hi@rvroo.nl RvRoo.nl noti.st/RvRoo twitter.com/RvRoo sketchrunner.com news.designtoolsnetwork.com

Slide 54

Slide 54

BYEEEEEE

👋