SlideShare ist ein Scribd-Unternehmen logo
1 von 54
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

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
 

Was ist angesagt? (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
 

Ähnlich wie The Future of Prototyping with Coded Components

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
 

Ähnlich wie The Future of Prototyping with Coded Components (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
 

Mehr von 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
 

Mehr von 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
 

Kürzlich hochgeladen

(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一F La
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一Fi L
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdfvaibhavkanaujia
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case StudySophia Viganò
 
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryDesign and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryrioverosanniejoy
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back17lcow074
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Yantram Animation Studio Corporation
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作7tz4rjpd
 

Kürzlich hochgeladen (20)

(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar,  9953056974 Escort ServiceCall Girls in Pratap Nagar,  9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case Study
 
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryDesign and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industry
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作
 

The Future of Prototyping with Coded Components

  • 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