2030: A Design Odyssey

#WebExpo2021 @braposo 2030: A (product) design odyssey

#WebExpo2021 @braposo 2030: A (product) design odyssey

#WebExpo2021 @braposo Previously in 2019…

#WebExpo2021 @braposo Fast forward to 2021…

#WebExpo2021 @braposo How will we build our products in 10 years?

#WebExpo2021 @braposo Let’s go on a space adventure!

#WebExpo2021 Hi! I’m Bernardo

SingleStore (we’re hiring!) @braposo @braposo

#WebExpo2021 @braposo Design is the Asset

#WebExpo2021 @braposo What is it like? Design is a tangible asset that is passed around the team Designers use design tools to create mockups and prototypes Handover exported assets to developers for implementation Unidirectional flow from design to code

#WebExpo2021 Sketch @braposo Figma Adobe XD

#WebExpo2021 Main features Reusable components / symbols Support for design tokens / styles Basic prototyping (although it’s getting a lot better!) Export to image files, PDF or SVG @braposo

#WebExpo2021 @braposo Summary Clearly defined design and code ownership Requests require designers (manual) intervention Harder to find a common language for designers and developers Design and code start diverging quite easily

#WebExpo2021 @braposo

#WebExpo2021 @braposo Design is the Source

#WebExpo2021 @braposo What is it like? Design is the single source of truth There seems to be a big division in this planet Designers that use design tools capable of generating code Open design movement augmenting the existing design tools

#WebExpo2021 @braposo North Code-generating design tools

#WebExpo2021 Overlay @braposo Anima BuilderX

#WebExpo2021 Figside @braposo Relate Webflow

#WebExpo2021 @braposo Summary Designers don’t need anyone else to get the necessary code to implement the designs Generated code can’t be changed to avoid problems with future design iterations Design tools are specifically built for UI design

#WebExpo2021 @braposo South Open design tools

#WebExpo2021 Figma API / Plugins @braposo figma.com/developers

#WebExpo2021 @braposo Highlights API for accessing files outside of editor Plugins for extending editor behaviour Shareable community resources Figma API / Plugins figma.com/developers

#WebExpo2021 Diez @braposo diez.org

#WebExpo2021 @braposo Highlights Get design tokens from design tools Generates tokens for multiple platforms Auto-generated docs for the tokens Diez diez.org

#WebExpo2021 Open Design @braposo opendesign.dev

#WebExpo2021 @braposo Highlights Unified design file format Integrates with existing design tools Export to other file formats, render to image/SVG or embed in other tools Open Design opendesign.dev

#WebExpo2021 @braposo Summary Design can be integrated into other workflows Networked design systems open new ways of building products Changes in design files can break workflows

#WebExpo2021 @braposo

#WebExpo2021 @braposo Design is the Code

#WebExpo2021 What is it like? Small planet populated by mostly developers Code is the source of truth and design is generated from it Designers use tools that read and interact with code Rise of AI-generated designs @braposo

#WebExpo2021 OpenChakra @braposo Blocks UI UI Devtools

#WebExpo2021 Interplay @braposo interplayapp.com

#WebExpo2021 @braposo Highlights Import coded components and keep them in sync Plugin to use components in design tools and export updated code Focus on design systems Interplay interplayapp.com

#WebExpo2021 Playroom @braposo github.com/seek-oss/playroom

#WebExpo2021 @braposo Highlights Visual playground for coded components Designers and developers use the same tool to create real prototypes Supports multiple themes and sizes Playroom github.com/seek-oss/playroom

#WebExpo2021 Debuild @braposo debuild.co

#WebExpo2021 @braposo Highlights Build products by describing them in text Combines the power of AI (GPT-3) and modular components Removes the need for both designers and developers Debuild debuild.co

#WebExpo2021 Summary Design is limited to code constraints Simple changes might take more time Designers need to understand (some parts of) the code AI can replace (at least) some parts of the process @braposo

#WebExpo2021 @braposo

#WebExpo2021 Design is the Platform @braposo

#WebExpo2021 @braposo What is it like? The biggest and busiest planet of our journey Designers and developers use the same tools New breed of UI design tools that integrate with code Lots of people using pre-built components from marketplaces

#WebExpo2021 UXPin @braposo uxpin.com

#WebExpo2021 @braposo Highlights Native UI design tool Create shareable component prototypes or entire app flows Support for code components, design tokens and documentation in one place UXPin uxpin.com

#WebExpo2021 Framer @braposo framer.com

#WebExpo2021 @braposo Highlights UI design tool with focus on interactions Library of ready-made components that can be extended with coded components Can integrate with real data and 3rd party libraries Framer framer.com

#WebExpo2021 Clutch @braposo clutch.io

#WebExpo2021 @braposo Highlights UI design tool with a low-code approach Use expressions and snippets of code to create a working application Component marketplace, connect to a backend and publish anywhere Clutch plasmic.app

#WebExpo2021 Plasmic @braposo plasmic.app

#WebExpo2021 @braposo Highlights UI design tool with a powerful sync utility Designed to work with code and can be adopted incrementally Integration with external libraries, dynamic data and publish to GitHub Plasmic plasmic.app

#WebExpo2021 Modulz @braposo modulz.app

#WebExpo2021 @braposo Highlights UI design tool with real components Build and document design systems without code Ecosystem of tooling for building products (Stitches, Radix UI) Modulz modulz.app

#WebExpo2021 Visly @braposo visly.app

#WebExpo2021 @braposo Highlights Native UI design tool Used file system to integrate with existing code Acquired by Figma Visly visly.app

#WebExpo2021 @braposo Summary Lots of options so teams have to decide what is best for them Some tools give you more control but require more work upfront, others are easier to use but can be harder to customise later Depending on one platform can create single points of failure Lots of people using pre-built components from marketplaces

#WebExpo2021 @braposo

#WebExpo2021 @braposo Design is the Token

#WebExpo2021 What is it like? Very excentric planet where people talk about weird things Home of the web3 movement Community-driven process for building products Design and code is represented as NFTs @braposo

#WebExpo2021 @braposo What is an NFT?

#WebExpo2021 @braposo

#WebExpo2021 @braposo A new way of creating infinite experiences

#WebExpo2021 @braposo

#WebExpo2021 @braposo

#WebExpo2021 A new way of managing identity and access @braposo

#WebExpo2021 @braposo

#WebExpo2021 @braposo A new way of making decisions

#WebExpo2021 @braposo

#WebExpo2021 @braposo

#WebExpo2021 Summary The web3 offers new opportunities for creating, sharing and accessing pieces of design and code The UX of the products/services can be trully personalized DAOs give a new meaning to community-driven development Being open creates bigger target for malicious attacks @braposo

#WebExpo2021 @braposo Let’s do a final recap!

#WebExpo2021 @braposo Design is the Asset Identify ways of improving you current processes

#WebExpo2021 @braposo Design is the Source Look into automating part of the development process

#WebExpo2021 @braposo Design is the Code Use code to have more consistency in designs

#WebExpo2021 @braposo Design is the Platform Create a common language for designers and developers

#WebExpo2021 @braposo Design is the Token Use the web3 to enhance the experience of your products

#WebExpo2021 @braposo Do you want to be the official owner of this presentation?

#WebExpo2021 @braposo All original artwork generated by AI

#WebExpo2021 @braposo Figma source file

• research notes

#WebExpo2021 @braposo Place your bid at brps.me/webexpo21

#WebExpo2021 Thank you!

@braposo @braposo