SlideShare a Scribd company logo
1 of 54
Download to read offline
Marcel Kessler
uxcamp.ch, 2019-05-11
Demo and discussion of prototyping with coded components
The future of prototyping
TOC
What
- is this all about?
Why
- do I think this is the future of prototyping?
How
- does it work with UXPin Merge?
- does it work with FramerX?
- does it work with Alva?
- does it work with Modulz?
What
- do you think?
2
am I?
Who
5
A leading and independent Swiss
software company
Reliably reaching digital business
targets on an engaging journey
Innovative software covering the
entire lifecycle
Locations in Europe and Middle
East
Facts and figures
6
Revenue
55 Mio
CHF in 2017
400 customers and
1’750
Successfully completed
projects
13 offices in
6
countries
Established
1996
in Switzerland
500
Employees
Honored with
23
awards in the last 5 years
UXO – the Netcetera User Experience Office
Switzerland
Austria
Macedonia
15
UX experts
Research
Concept / Design
Implementation
Full service
in-house
design agency
8
UXO Locations @ Netcetera
15 UX experts in 4 out of 11+ cities
Interdisciplinary approach
Attractive nearshoring rates
UX-Architects close to the customer
Successful remote collaboration
Zurich (HQ)
Bern
Linz
Central Europe
Emirates (UAE)
Macedonia
Skopje
What is this all about?
9
What is your prototyping toolbox?
13
What is your prototyping workflow?
14
The alternative
15
16
UXPin Merge
Designers and engineers express their thoughts
and ideas with tools lacking compatibility and
synchronicity. Developers work with the final,
platform-specific production technologies,
designers often use vector illustration tools (Sketch,
Figma, XD…) to design static representations of
interfaces.
Marcin Treder
https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-ef10fb88a316
17
UXPin Merge
What if designers could use the very same
components used by engineers and they’re all
stored in a shared design system (with accurate
documentation and tests)? Many of the frustrating
and expensive misunderstandings between
designers and engineers would stop happening.
Marcin Treder
https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-24490697ceec
18
Create living prototypes with code components.
Alva lets you design interactive products based on components engineered by
your developers.
Alva
https://meetalva.io/
19
Almost all design tools are optimised for illustration. Vector-based tools are
great for wireframing and exploration, but when it comes to designing
interactive components, complex layouts and stateful user interfaces—we need
something more powerful.Modulz is specifically designed to produce robust,
accessible, production-grade components and interfaces.
Modulz
https://www.modulz.app/
20
Make your prototypes feel real by adding interactive components. Drag and
drop animations, data, and rich media elements straight onto your canvas and
then customize everything through custom UI. All components are backed by
code, bringing you that much closer to development.
FramerX
https://www.framer.com/prototyping/
21
Across every company size and industry, there emerged two key determinators
of a successful design system:
- A workflow for keeping every component up-to-date.
- A direct connection between design systems and production code.
FramerX Bridge
https://www.framer.com/blog/posts/announcing-framer-bridge/
How the workflow could be…
>_
22
Design and Developer collaboration
1. Agree on (or create) a Design System that roughly fits user and biz requirements
2. Start prototyping in [UXPin|FramerX|Alva] using the provided react components
3. Apply theming directly in the code (SCSS)
4. For new (i.e. not-yet-existing) components
1. Design component and behavior in [Sketch|Figma|…]
2. Import visual design to [UXPin|FramerX|Alva] to continue prototyping
3. Implement component (e.g. using Storybook)
4. Push component
5. Trigger continuous integration build
6. Replace visual component in prototype with react component
23
Why I think this is the future…
24
Benefits
§ One source of truth (the holy grail)
§ “Interactive” components (e.g. text fields)
§ “Responsive” components (e.g. resize)
§ No need to manage a separate sketch library
§ It’s the real deal
§ Designer can still work with pages
§ Designers don’t need to code
25
How does it work?
26
Setup
1. Prototyping tool connects via token to your code repository and build system
2. Components usually come with ”default”/”dummy” content that can be overridden
3. States can be changed according to the props defined
4. Designer still create “pages”
5. Interaction can be added based on “actions”/”triggers” or traditional ”hotspots”
27
UXPin
UXPin connects to a Git repository (command line tool is being installed as a project level dependency)
UXPin learns about the code of components stored in the repository and serializes its content
UXPin runs the build process and delivers production code to the UXPin design editor, where all the
components are identical with the production environment, fully interactive and available to designers
(even if they don’t know how to code)
UXPin allows for connecting to a Continuous Integration Server to enable automatic synchronization
between a Git repository and our design editor (every change in the production code is automatically
reflected in the components in UXPin’s design editor)
UXPin shows accurate specifications for all design projects that will show informative code snippets to
tell developers how to implement a given design
28
Demo time
29
UXPin Merge
UXPin Grommet Edit
UXPin Grommet Play
UXPin Grommet Code
UXPin Carbon Edit
UXPin Carbon Play
UXPin Carbon Components
UXPin Carbon Code
FramerX
FramerX Edit
FramerX Code
FramerX Style
Alva
Alva Edit
Modulz
Trade-offs
45
Current limitations
§ UXPin Merge
– Several components don’t work (e.g. Data table)
– Variables cannot be used (mixing traditional and react prototyping)
– CI only works from master branch
§ Framer Bridge
– Not really tried enough yet à do you know more?
§ Alva
– Not really tried enough yet à do you know more?
46
Summary
47
48
UXPin Merge
Merge seamlessly connects to any GIT repository,
imports React.js components to UXPin’s design
editor and keeps all the versions in sync thanks to
CI integration. Whatever exists in code, exists in
UXPin, giving designers access to real coded
components without forcing them to learn coding.
Marcin Treder
https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-24490697ceec
49
UXPin Merge
With UXPin Merge, designers and engineers use a
single source of truth and can finally work together
without unnecessary misunderstandings and
frustrations. Guess what? The perfect
implementation of a design system is possible.
Marcin Treder
https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-24490697ceec
My conclusion
§ The way to go!
§ Not yet ready…
§ …but hopefully soon
50
51
What is your experience?
Links
UXPin Merge
§ https://www.uxpin.com/merge
§ https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-ef10fb88a316
§ https://wikiuxpin.atlassian.net/wiki/spaces/MA/pages/646938664/How+to+Integrate+Components+with+UXPin+Merge
FramerX
§ https://www.framer.com/prototyping/
§ https://designcode.io/framer-x-react-components
§ https://www.framer.com/blog/posts/announcing-framer-bridge
Alva
§ https://meetalva.io/
Modulz
§ https://meetalva.io/
52
Thanks
Netcetera AG Zypressenstrasse71
Postfach
CH-8040Zürich
info@netcetera.com
T+41442975555
54
Marcel Kessler
Head of User Experience
marcel.kessler@netcetera.com

More Related Content

What's hot

Modern microcontroller (mcu) application development with qt
Modern microcontroller (mcu) application development with qtModern microcontroller (mcu) application development with qt
Modern microcontroller (mcu) application development with qtQt
 
NanoCAD India, 2D & 3d CAD design software
NanoCAD India, 2D & 3d CAD design softwareNanoCAD India, 2D & 3d CAD design software
NanoCAD India, 2D & 3d CAD design softwarenanoCAD India
 
Introduction to Qt Creator
Introduction to Qt CreatorIntroduction to Qt Creator
Introduction to Qt CreatorQt
 
CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...
CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...
CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...Daniel Bryant
 
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...Igalia
 
SACON NY 19: "Creating an effective developer experience for cloud-native apps"
SACON NY 19: "Creating an effective developer experience for cloud-native apps"SACON NY 19: "Creating an effective developer experience for cloud-native apps"
SACON NY 19: "Creating an effective developer experience for cloud-native apps"Daniel Bryant
 
How are Companies Overcoming the Global Chip Shortage
How are Companies Overcoming the Global Chip Shortage How are Companies Overcoming the Global Chip Shortage
How are Companies Overcoming the Global Chip Shortage Qt
 
Improve Time to Market for Industrial Edge Devices
Improve Time to Market for Industrial Edge DevicesImprove Time to Market for Industrial Edge Devices
Improve Time to Market for Industrial Edge DevicesQt
 
Data-Driven Documents for Interactive Graph Visualization
Data-Driven Documents for Interactive Graph VisualizationData-Driven Documents for Interactive Graph Visualization
Data-Driven Documents for Interactive Graph VisualizationRichard Schäfer
 

What's hot (9)

Modern microcontroller (mcu) application development with qt
Modern microcontroller (mcu) application development with qtModern microcontroller (mcu) application development with qt
Modern microcontroller (mcu) application development with qt
 
NanoCAD India, 2D & 3d CAD design software
NanoCAD India, 2D & 3d CAD design softwareNanoCAD India, 2D & 3d CAD design software
NanoCAD India, 2D & 3d CAD design software
 
Introduction to Qt Creator
Introduction to Qt CreatorIntroduction to Qt Creator
Introduction to Qt Creator
 
CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...
CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...
CloudNativeLondon 2018: "In Search of the Perfect Cloud Native Developer Expe...
 
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
 
SACON NY 19: "Creating an effective developer experience for cloud-native apps"
SACON NY 19: "Creating an effective developer experience for cloud-native apps"SACON NY 19: "Creating an effective developer experience for cloud-native apps"
SACON NY 19: "Creating an effective developer experience for cloud-native apps"
 
How are Companies Overcoming the Global Chip Shortage
How are Companies Overcoming the Global Chip Shortage How are Companies Overcoming the Global Chip Shortage
How are Companies Overcoming the Global Chip Shortage
 
Improve Time to Market for Industrial Edge Devices
Improve Time to Market for Industrial Edge DevicesImprove Time to Market for Industrial Edge Devices
Improve Time to Market for Industrial Edge Devices
 
Data-Driven Documents for Interactive Graph Visualization
Data-Driven Documents for Interactive Graph VisualizationData-Driven Documents for Interactive Graph Visualization
Data-Driven Documents for Interactive Graph Visualization
 

Similar to The future of Prototpying

Summit 16: NetIDE: Integrating and Orchestrating SDN Controllers
Summit 16: NetIDE: Integrating and Orchestrating SDN ControllersSummit 16: NetIDE: Integrating and Orchestrating SDN Controllers
Summit 16: NetIDE: Integrating and Orchestrating SDN ControllersOPNFV
 
The Architecture Of Software Defined Radios Essay
The Architecture Of Software Defined Radios EssayThe Architecture Of Software Defined Radios Essay
The Architecture Of Software Defined Radios EssayDivya Watson
 
PureApplication: Devops and Urbancode
PureApplication: Devops and UrbancodePureApplication: Devops and Urbancode
PureApplication: Devops and UrbancodeJohn Hawkins
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Scaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdfScaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdfKatamaRajuBandigari1
 
Composite C1 Presentaion
Composite C1  PresentaionComposite C1  Presentaion
Composite C1 Presentaionjakobbartholdy
 
The Language of Application Architecture
The Language of Application ArchitectureThe Language of Application Architecture
The Language of Application ArchitectureBrad Beiermann
 
What's next for unity in automotive, transportation and manufacturing – Unite...
What's next for unity in automotive, transportation and manufacturing – Unite...What's next for unity in automotive, transportation and manufacturing – Unite...
What's next for unity in automotive, transportation and manufacturing – Unite...Unity Technologies
 
Web components and friends
Web components and friendsWeb components and friends
Web components and friendsSergio Contreras
 
Autodesk Recap Empowering Businesses with 3D Modelling
Autodesk Recap Empowering Businesses with 3D ModellingAutodesk Recap Empowering Businesses with 3D Modelling
Autodesk Recap Empowering Businesses with 3D Modellingamanraza23
 
Qt Technology Overview for: MedAcuity
Qt Technology Overview for: MedAcuityQt Technology Overview for: MedAcuity
Qt Technology Overview for: MedAcuityQt
 
Software Factories in the Real World: How an IBM WebSphere Integration Factor...
Software Factories in the Real World: How an IBM WebSphere Integration Factor...Software Factories in the Real World: How an IBM WebSphere Integration Factor...
Software Factories in the Real World: How an IBM WebSphere Integration Factor...ghodgkinson
 
HCL Rtist: Stateful, Event-driven, Real-time applications Tool
HCL Rtist: Stateful, Event-driven, Real-time applications ToolHCL Rtist: Stateful, Event-driven, Real-time applications Tool
HCL Rtist: Stateful, Event-driven, Real-time applications ToolHCLSoftware
 
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...ICS
 
Iterative Architecture: Your Path to on-time Delivery
Iterative Architecture: Your Path to on-time DeliveryIterative Architecture: Your Path to on-time Delivery
Iterative Architecture: Your Path to on-time DeliveryAsanka Abeysinghe
 

Similar to The future of Prototpying (20)

ARCHICAD 20 - BIM Product of the Year
ARCHICAD 20 - BIM Product of the YearARCHICAD 20 - BIM Product of the Year
ARCHICAD 20 - BIM Product of the Year
 
Summit 16: NetIDE: Integrating and Orchestrating SDN Controllers
Summit 16: NetIDE: Integrating and Orchestrating SDN ControllersSummit 16: NetIDE: Integrating and Orchestrating SDN Controllers
Summit 16: NetIDE: Integrating and Orchestrating SDN Controllers
 
Welcome to Archicad 21
Welcome to Archicad 21Welcome to Archicad 21
Welcome to Archicad 21
 
ARCHICAD 21 Brochure
ARCHICAD 21 BrochureARCHICAD 21 Brochure
ARCHICAD 21 Brochure
 
The Architecture Of Software Defined Radios Essay
The Architecture Of Software Defined Radios EssayThe Architecture Of Software Defined Radios Essay
The Architecture Of Software Defined Radios Essay
 
PureApplication: Devops and Urbancode
PureApplication: Devops and UrbancodePureApplication: Devops and Urbancode
PureApplication: Devops and Urbancode
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Scaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdfScaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdf
 
Composite C1 Presentaion
Composite C1  PresentaionComposite C1  Presentaion
Composite C1 Presentaion
 
The Language of Application Architecture
The Language of Application ArchitectureThe Language of Application Architecture
The Language of Application Architecture
 
What's next for unity in automotive, transportation and manufacturing – Unite...
What's next for unity in automotive, transportation and manufacturing – Unite...What's next for unity in automotive, transportation and manufacturing – Unite...
What's next for unity in automotive, transportation and manufacturing – Unite...
 
Web components and friends
Web components and friendsWeb components and friends
Web components and friends
 
Autodesk Recap Empowering Businesses with 3D Modelling
Autodesk Recap Empowering Businesses with 3D ModellingAutodesk Recap Empowering Businesses with 3D Modelling
Autodesk Recap Empowering Businesses with 3D Modelling
 
Inventor 2011 Detail Brochure
Inventor 2011 Detail BrochureInventor 2011 Detail Brochure
Inventor 2011 Detail Brochure
 
Qt Technology Overview for: MedAcuity
Qt Technology Overview for: MedAcuityQt Technology Overview for: MedAcuity
Qt Technology Overview for: MedAcuity
 
Addin Revit.pdf
Addin Revit.pdfAddin Revit.pdf
Addin Revit.pdf
 
Software Factories in the Real World: How an IBM WebSphere Integration Factor...
Software Factories in the Real World: How an IBM WebSphere Integration Factor...Software Factories in the Real World: How an IBM WebSphere Integration Factor...
Software Factories in the Real World: How an IBM WebSphere Integration Factor...
 
HCL Rtist: Stateful, Event-driven, Real-time applications Tool
HCL Rtist: Stateful, Event-driven, Real-time applications ToolHCL Rtist: Stateful, Event-driven, Real-time applications Tool
HCL Rtist: Stateful, Event-driven, Real-time applications Tool
 
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...
 
Iterative Architecture: Your Path to on-time Delivery
Iterative Architecture: Your Path to on-time DeliveryIterative Architecture: Your Path to on-time Delivery
Iterative Architecture: Your Path to on-time Delivery
 

More from Netcetera

Payment trend scouting - Kurt Schmid, Netcetera
Payment trend scouting - Kurt Schmid, NetceteraPayment trend scouting - Kurt Schmid, Netcetera
Payment trend scouting - Kurt Schmid, NetceteraNetcetera
 
Boost your approved transaction volume - Ana Vuksanovikj Vaneska, Netcetera
Boost your approved transaction volume - Ana Vuksanovikj Vaneska, NetceteraBoost your approved transaction volume - Ana Vuksanovikj Vaneska, Netcetera
Boost your approved transaction volume - Ana Vuksanovikj Vaneska, NetceteraNetcetera
 
Increase conversion, convenience and security in e-commerce checkouts - Silke...
Increase conversion, convenience and security in e-commerce checkouts - Silke...Increase conversion, convenience and security in e-commerce checkouts - Silke...
Increase conversion, convenience and security in e-commerce checkouts - Silke...Netcetera
 
3-D Secure 2.0 - Stephan Rüdisüli, Netcetera & Patrick Juffern, INFORM
3-D Secure 2.0 - Stephan Rüdisüli, Netcetera & Patrick Juffern, INFORM3-D Secure 2.0 - Stephan Rüdisüli, Netcetera & Patrick Juffern, INFORM
3-D Secure 2.0 - Stephan Rüdisüli, Netcetera & Patrick Juffern, INFORMNetcetera
 
Digital Payment in 2020 - Kurt Schmid, Netcetera
Digital Payment in 2020 - Kurt Schmid, NetceteraDigital Payment in 2020 - Kurt Schmid, Netcetera
Digital Payment in 2020 - Kurt Schmid, NetceteraNetcetera
 
AI First. Erfolgsfaktoren für künstliche Intelligenz im Unternehmen
AI First. Erfolgsfaktoren für künstliche Intelligenz im UnternehmenAI First. Erfolgsfaktoren für künstliche Intelligenz im Unternehmen
AI First. Erfolgsfaktoren für künstliche Intelligenz im UnternehmenNetcetera
 
Augmenting Maintenance
Augmenting MaintenanceAugmenting Maintenance
Augmenting MaintenanceNetcetera
 
Front-end up front
Front-end up frontFront-end up front
Front-end up frontNetcetera
 
EMV Secure Remote Commerce (SRC)
EMV Secure Remote Commerce (SRC)EMV Secure Remote Commerce (SRC)
EMV Secure Remote Commerce (SRC)Netcetera
 
Online shopping technology in the fast lane?
Online shopping technology in the fast lane?Online shopping technology in the fast lane?
Online shopping technology in the fast lane?Netcetera
 
Merchant tokenization and EMV® Secure Remote Commerce
Merchant tokenization and EMV® Secure Remote CommerceMerchant tokenization and EMV® Secure Remote Commerce
Merchant tokenization and EMV® Secure Remote CommerceNetcetera
 
Seamless 3-D Secure e-commerce experience
Seamless 3-D Secure e-commerce experienceSeamless 3-D Secure e-commerce experience
Seamless 3-D Secure e-commerce experienceNetcetera
 
Augmenting Health Care
Augmenting Health CareAugmenting Health Care
Augmenting Health CareNetcetera
 
Driving transactional growth with 3-D Secure
Driving transactional growth with 3-D SecureDriving transactional growth with 3-D Secure
Driving transactional growth with 3-D SecureNetcetera
 
Digital Payment Quo Vadis
Digital Payment Quo VadisDigital Payment Quo Vadis
Digital Payment Quo VadisNetcetera
 
EMV® Secure Remote Commerce
EMV® Secure Remote CommerceEMV® Secure Remote Commerce
EMV® Secure Remote CommerceNetcetera
 
Context: The missing ingredient in multilingual software translation
Context: The missing ingredient in multilingual software translationContext: The missing ingredient in multilingual software translation
Context: The missing ingredient in multilingual software translationNetcetera
 
Digital Payments - Netcetera Innovation Summit 2018
Digital Payments - Netcetera Innovation Summit 2018Digital Payments - Netcetera Innovation Summit 2018
Digital Payments - Netcetera Innovation Summit 2018Netcetera
 
"Whats up and new at Netcetera?" - Netcetera Innovation Summit 2018
"Whats up and new at Netcetera?" - Netcetera Innovation Summit 2018"Whats up and new at Netcetera?" - Netcetera Innovation Summit 2018
"Whats up and new at Netcetera?" - Netcetera Innovation Summit 2018Netcetera
 
Fintech Innovations - Netcetera Innovation Summit 2018
Fintech Innovations - Netcetera Innovation Summit 2018Fintech Innovations - Netcetera Innovation Summit 2018
Fintech Innovations - Netcetera Innovation Summit 2018Netcetera
 

More from Netcetera (20)

Payment trend scouting - Kurt Schmid, Netcetera
Payment trend scouting - Kurt Schmid, NetceteraPayment trend scouting - Kurt Schmid, Netcetera
Payment trend scouting - Kurt Schmid, Netcetera
 
Boost your approved transaction volume - Ana Vuksanovikj Vaneska, Netcetera
Boost your approved transaction volume - Ana Vuksanovikj Vaneska, NetceteraBoost your approved transaction volume - Ana Vuksanovikj Vaneska, Netcetera
Boost your approved transaction volume - Ana Vuksanovikj Vaneska, Netcetera
 
Increase conversion, convenience and security in e-commerce checkouts - Silke...
Increase conversion, convenience and security in e-commerce checkouts - Silke...Increase conversion, convenience and security in e-commerce checkouts - Silke...
Increase conversion, convenience and security in e-commerce checkouts - Silke...
 
3-D Secure 2.0 - Stephan Rüdisüli, Netcetera & Patrick Juffern, INFORM
3-D Secure 2.0 - Stephan Rüdisüli, Netcetera & Patrick Juffern, INFORM3-D Secure 2.0 - Stephan Rüdisüli, Netcetera & Patrick Juffern, INFORM
3-D Secure 2.0 - Stephan Rüdisüli, Netcetera & Patrick Juffern, INFORM
 
Digital Payment in 2020 - Kurt Schmid, Netcetera
Digital Payment in 2020 - Kurt Schmid, NetceteraDigital Payment in 2020 - Kurt Schmid, Netcetera
Digital Payment in 2020 - Kurt Schmid, Netcetera
 
AI First. Erfolgsfaktoren für künstliche Intelligenz im Unternehmen
AI First. Erfolgsfaktoren für künstliche Intelligenz im UnternehmenAI First. Erfolgsfaktoren für künstliche Intelligenz im Unternehmen
AI First. Erfolgsfaktoren für künstliche Intelligenz im Unternehmen
 
Augmenting Maintenance
Augmenting MaintenanceAugmenting Maintenance
Augmenting Maintenance
 
Front-end up front
Front-end up frontFront-end up front
Front-end up front
 
EMV Secure Remote Commerce (SRC)
EMV Secure Remote Commerce (SRC)EMV Secure Remote Commerce (SRC)
EMV Secure Remote Commerce (SRC)
 
Online shopping technology in the fast lane?
Online shopping technology in the fast lane?Online shopping technology in the fast lane?
Online shopping technology in the fast lane?
 
Merchant tokenization and EMV® Secure Remote Commerce
Merchant tokenization and EMV® Secure Remote CommerceMerchant tokenization and EMV® Secure Remote Commerce
Merchant tokenization and EMV® Secure Remote Commerce
 
Seamless 3-D Secure e-commerce experience
Seamless 3-D Secure e-commerce experienceSeamless 3-D Secure e-commerce experience
Seamless 3-D Secure e-commerce experience
 
Augmenting Health Care
Augmenting Health CareAugmenting Health Care
Augmenting Health Care
 
Driving transactional growth with 3-D Secure
Driving transactional growth with 3-D SecureDriving transactional growth with 3-D Secure
Driving transactional growth with 3-D Secure
 
Digital Payment Quo Vadis
Digital Payment Quo VadisDigital Payment Quo Vadis
Digital Payment Quo Vadis
 
EMV® Secure Remote Commerce
EMV® Secure Remote CommerceEMV® Secure Remote Commerce
EMV® Secure Remote Commerce
 
Context: The missing ingredient in multilingual software translation
Context: The missing ingredient in multilingual software translationContext: The missing ingredient in multilingual software translation
Context: The missing ingredient in multilingual software translation
 
Digital Payments - Netcetera Innovation Summit 2018
Digital Payments - Netcetera Innovation Summit 2018Digital Payments - Netcetera Innovation Summit 2018
Digital Payments - Netcetera Innovation Summit 2018
 
"Whats up and new at Netcetera?" - Netcetera Innovation Summit 2018
"Whats up and new at Netcetera?" - Netcetera Innovation Summit 2018"Whats up and new at Netcetera?" - Netcetera Innovation Summit 2018
"Whats up and new at Netcetera?" - Netcetera Innovation Summit 2018
 
Fintech Innovations - Netcetera Innovation Summit 2018
Fintech Innovations - Netcetera Innovation Summit 2018Fintech Innovations - Netcetera Innovation Summit 2018
Fintech Innovations - Netcetera Innovation Summit 2018
 

Recently uploaded

Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..GB Logo Design
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Remy Rey De Barros
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理cyebo
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeCarlgaming1
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxDoraemon495609
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理cyebo
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationajroy0196
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationJaime Brown
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationJIT KUMAR GUPTA
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidiLivengood
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfoliodhrumibshah13
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisPeclers Paris
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designKhushiGandhi15
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headersekinlvnt
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Mustafa
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfJon Freach
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentationssuser8fae18
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...JIT KUMAR GUPTA
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfjeffreycarroll14
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistYudistira
 

Recently uploaded (20)

Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and Localisation
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 

The future of Prototpying

  • 1. Marcel Kessler uxcamp.ch, 2019-05-11 Demo and discussion of prototyping with coded components The future of prototyping
  • 2. TOC What - is this all about? Why - do I think this is the future of prototyping? How - does it work with UXPin Merge? - does it work with FramerX? - does it work with Alva? - does it work with Modulz? What - do you think? 2
  • 4.
  • 5. 5 A leading and independent Swiss software company Reliably reaching digital business targets on an engaging journey Innovative software covering the entire lifecycle Locations in Europe and Middle East
  • 6. Facts and figures 6 Revenue 55 Mio CHF in 2017 400 customers and 1’750 Successfully completed projects 13 offices in 6 countries Established 1996 in Switzerland 500 Employees Honored with 23 awards in the last 5 years
  • 7. UXO – the Netcetera User Experience Office Switzerland Austria Macedonia 15 UX experts Research Concept / Design Implementation Full service in-house design agency
  • 8. 8 UXO Locations @ Netcetera 15 UX experts in 4 out of 11+ cities Interdisciplinary approach Attractive nearshoring rates UX-Architects close to the customer Successful remote collaboration Zurich (HQ) Bern Linz Central Europe Emirates (UAE) Macedonia Skopje
  • 9. What is this all about? 9
  • 10.
  • 11.
  • 12.
  • 13. What is your prototyping toolbox? 13
  • 14. What is your prototyping workflow? 14
  • 16. 16 UXPin Merge Designers and engineers express their thoughts and ideas with tools lacking compatibility and synchronicity. Developers work with the final, platform-specific production technologies, designers often use vector illustration tools (Sketch, Figma, XD…) to design static representations of interfaces. Marcin Treder https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-ef10fb88a316
  • 17. 17 UXPin Merge What if designers could use the very same components used by engineers and they’re all stored in a shared design system (with accurate documentation and tests)? Many of the frustrating and expensive misunderstandings between designers and engineers would stop happening. Marcin Treder https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-24490697ceec
  • 18. 18 Create living prototypes with code components. Alva lets you design interactive products based on components engineered by your developers. Alva https://meetalva.io/
  • 19. 19 Almost all design tools are optimised for illustration. Vector-based tools are great for wireframing and exploration, but when it comes to designing interactive components, complex layouts and stateful user interfaces—we need something more powerful.Modulz is specifically designed to produce robust, accessible, production-grade components and interfaces. Modulz https://www.modulz.app/
  • 20. 20 Make your prototypes feel real by adding interactive components. Drag and drop animations, data, and rich media elements straight onto your canvas and then customize everything through custom UI. All components are backed by code, bringing you that much closer to development. FramerX https://www.framer.com/prototyping/
  • 21. 21 Across every company size and industry, there emerged two key determinators of a successful design system: - A workflow for keeping every component up-to-date. - A direct connection between design systems and production code. FramerX Bridge https://www.framer.com/blog/posts/announcing-framer-bridge/
  • 22. How the workflow could be… >_ 22
  • 23. Design and Developer collaboration 1. Agree on (or create) a Design System that roughly fits user and biz requirements 2. Start prototyping in [UXPin|FramerX|Alva] using the provided react components 3. Apply theming directly in the code (SCSS) 4. For new (i.e. not-yet-existing) components 1. Design component and behavior in [Sketch|Figma|…] 2. Import visual design to [UXPin|FramerX|Alva] to continue prototyping 3. Implement component (e.g. using Storybook) 4. Push component 5. Trigger continuous integration build 6. Replace visual component in prototype with react component 23
  • 24. Why I think this is the future… 24
  • 25. Benefits § One source of truth (the holy grail) § “Interactive” components (e.g. text fields) § “Responsive” components (e.g. resize) § No need to manage a separate sketch library § It’s the real deal § Designer can still work with pages § Designers don’t need to code 25
  • 26. How does it work? 26
  • 27. Setup 1. Prototyping tool connects via token to your code repository and build system 2. Components usually come with ”default”/”dummy” content that can be overridden 3. States can be changed according to the props defined 4. Designer still create “pages” 5. Interaction can be added based on “actions”/”triggers” or traditional ”hotspots” 27
  • 28. UXPin UXPin connects to a Git repository (command line tool is being installed as a project level dependency) UXPin learns about the code of components stored in the repository and serializes its content UXPin runs the build process and delivers production code to the UXPin design editor, where all the components are identical with the production environment, fully interactive and available to designers (even if they don’t know how to code) UXPin allows for connecting to a Continuous Integration Server to enable automatic synchronization between a Git repository and our design editor (every change in the production code is automatically reflected in the components in UXPin’s design editor) UXPin shows accurate specifications for all design projects that will show informative code snippets to tell developers how to implement a given design 28
  • 42. Alva
  • 46. Current limitations § UXPin Merge – Several components don’t work (e.g. Data table) – Variables cannot be used (mixing traditional and react prototyping) – CI only works from master branch § Framer Bridge – Not really tried enough yet à do you know more? § Alva – Not really tried enough yet à do you know more? 46
  • 48. 48 UXPin Merge Merge seamlessly connects to any GIT repository, imports React.js components to UXPin’s design editor and keeps all the versions in sync thanks to CI integration. Whatever exists in code, exists in UXPin, giving designers access to real coded components without forcing them to learn coding. Marcin Treder https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-24490697ceec
  • 49. 49 UXPin Merge With UXPin Merge, designers and engineers use a single source of truth and can finally work together without unnecessary misunderstandings and frustrations. Guess what? The perfect implementation of a design system is possible. Marcin Treder https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-24490697ceec
  • 50. My conclusion § The way to go! § Not yet ready… § …but hopefully soon 50
  • 51. 51 What is your experience?
  • 52. Links UXPin Merge § https://www.uxpin.com/merge § https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-ef10fb88a316 § https://wikiuxpin.atlassian.net/wiki/spaces/MA/pages/646938664/How+to+Integrate+Components+with+UXPin+Merge FramerX § https://www.framer.com/prototyping/ § https://designcode.io/framer-x-react-components § https://www.framer.com/blog/posts/announcing-framer-bridge Alva § https://meetalva.io/ Modulz § https://meetalva.io/ 52