Recommended
More Related Content
Similar to The building blocks of the next web
Similar to The building blocks of the next web (20)
Recently uploaded
Recently uploaded (20)
The building blocks of the next web
- 1. The building blocks of the next web Antonio de Pasquale Pier Paolo Orioli ROME 24-25 MARCH 2017
- 2. # N E X T W E B @ M Y I N T E R ACT I O N & @ L A M B R U S C O _ T O P NEXT WEB T H E B U I L D I N G BLOCKS OF THE ANTONIO DE PASQUALE & PIER PAOLO ORIOLI
- 3. PIER PAOLO ORIOLI SENIOR DESIGN TECHNOLOGIST @ FROG ANTONIO DE PASQUALE ASSOCIATE CREATIVE DIRECTOR @ FROG
- 4. 02 FROM CONCEPT TO REALITY: KEY LEARNINGS COMPONENTS VS WDIGETS FROM TEMPLATES, TO COMPONENTS 01 03THE CONCEPT THE REALITY THE LEARNINGS #NEXTWEB
- 5. 01T H E CO N C E PT #NEXTWEB
- 6. I’d like to propose a new, optional HTML tag: IMG Required argument is SRC=”url”. Marc Andreessen #NEXTWEB
- 7. I don't want to change HTML now if I can help it, until it has gone to RFC track Tim Berners-Lee #NEXTWEB
- 8. The dark side of the force The introduction of Flash improved dramatically the web experience and set the requirements of future standards #NEXTWEB
- 9. The awake of HTML5 A fully open, uncontrolled platform forged by widely respected standards bodies #NEXTWEB
- 10. BACKTO THE FUTURE D ES I G N T R E N DS FO R T H E N E XT W E B
- 12. A BETTER AND ACROSS TOUCHPOINTS EXPERIENCE UNIFIED https://lines.chromeexperiments.com/
- 13. FROM TEMPLATE AND REUSABLE MODULES CARD DESIGN & GRIDS TO http://www.lonelyplanet.com/
- 14. IMPROVE TO SMOOTH NAVIGATION TRANSITIONS THE EXPERIENCE WITH https://famous.co/
- 15. DESIGN INTERACTIONS MICRO / MINI FOR MOTION AND https://material.io/guidelines/
- 16. MODULAR U S E R I N T E R F A C E S CONVERSATIONAL DESIGN APPROACH FOR https://api.ai/ - https://wit.ai/
- 17. AUGMENTED EXTENDING & V I RT UA L R E A L I T Y C O M P O N E N T S F O R https://aframe.io - Google VR - Unity3d Vr
- 18. JAVASCRIPT FRAMEWORKS UNIFIED EXPERIENCE CARD DESIGN SCREEN TRANSITIONS MICRO/MINI INTERACTIONS CONVERSATIONAL UI AUGMENT & VIRTUAL REALITY THE NEXT WEB 7 TRENDS FOR
- 19. 02T H E R E A L I T Y #NEXTWEB
- 20. #NEXTWEB WHICH COME FIRST C O M P O N E N T S T H E N UX FIRST T H E C H I C K E N O R T H E E G G ?
- 21. #NEXTWEB DESIGN SPRINT & VALIDATE THE CONCEPT PROTOTYPE A P P R O A C H T O
- 22. APRACTICAL APPROACH F RO M CO N C E PT D ES I G N TO R E A L P RO D U CTS
- 23. #NEXTWEB Break up the design concept into components Find the interaction pattern within the modules Identify the interaction areas and macro modules Split the macro modules into atomic components A top-down analysis phase to decompose design 1 2 3 CONCEPTDESIGN
- 24. #NEXTWEB Orchestrate components to reproduce the UX Split the macro modules into atomic components Define the communication and interaction between components to rebuild the UX Find the common patterns between the atoms Create the components hierarchy and inheritance 4 5 6 PRODUCTIONDESIGN fi
- 25. #NEXTWEB Maintain a library of components A good DLS can accelerate further development of your application but it’s important to define a strategy to maintain this. Maintain the documentation coupled with the code and the DLS Keep the library decoupled from the application Prefer a modular architecture than a monolithic one Unit test every component based on their input and output
- 26. #NEXTWEB Bringing components to life Selecting the technology stack. Which one? Full framework, promote future web standards Angular Focus on UI, reinvent the DOM React Modular approach, hide the framework, use standards as much as possible. Aurelia
- 27. #NEXTWEB Choose wisely your next cage You have only to suffer this union till death do you part WHO WILL CONSUME YOUR FRONTED CODE? DO YOU HAVE MEMORY CONSTRAINTS? ARE YOU DEALING WITH LEGACY DEVICES? IN WHICH ENVIRONMENT IT WILL BE INTEGRATED?
- 28. #NEXTWEB HOW CAN WE AVOID TO THE RESCUE WEB COMPONENTS DEPENDECIES? TEMPLATES SHADOW DOMCUSTOM ELEMENTS
- 29. #NEXTWEB Declare inert fragments of markup to clone and inject into the DOM TEMPLATES
- 30. #NEXTWEB Define custom HTML tags with their own lifecycle hooks that are automatically called by the browser. CUSTOM ELEMENTS
- 31. #NEXTWEB Encapsulate a fragment of DOM and isolate it from CSS rules and Javascript code in the global scope SHADOW DOM
- 32. #NEXTWEB Check the current browser support Chrome Firefox Safari Edge Shadow DOM Stable Under development Stable TBD Custom elements Stable Under development Arriving Soon! TBD Templates Stable Stable Stable Stable HTML imports Stable On hold Under consideration Under consideration While still Web Components aren’t supported globally, all browsers vendors are working on it and we can expect a broader compatibility in the next year.
- 33. CASE STUDY D L S & U I L I B RA RY I N T E RACT I V E W I D G E TS CO M P O N E N TS P ROTOT Y P I N G
- 34. Creating a modular design language system to facilitate the future widget design. DLS & UI LIBRARY ANALYTICS DASHBOARD
- 35. codice? #NEXTWEB
- 36. DLS & UI Library Creating a modular design language system to facilitate the future widget design. Design Development • Create a coherent and multi-purpose design library to re-use object for multiple flows. • Define the rules & stress components limits to validate all the possibile minor cases. • Document & explain the login behind the components in order to create a live repository that can grow in time keeping the same DNA • Find patterns to develop front-end code for a company that has always worked on the backend • Have the courage to give up after a week of development for fixing glitches on an overcomplicated template and build a simplified version • Avoid to keep code and documentation decoupled #NEXTWEB
- 37. Using a DLS System and Angular 1.0 to build full functional interactive widgets for production INTERACTIVE WIDGETS WEB APP FOR BANKING
- 38. #NEXTWEB codice?
- 39. #NEXTWEB Interactive Widgets Using a DLS System and Angular 1.0 to build full functional interactive widgets for production Design Development • Create a foundational design across section • Identify common process that can use similar patterns. • Test / stress components in terms of interaction / transition & real data content • Create initial flow prototype to anticipate the module complexity to be analysed • Maintain a documented component API for facilitating the integration • Create a modular structure compatible with a lazy loading strategy • Create an efficient communication channel between the components
- 40. Creating a modular wizard interface for product personalisation & check-out COMPONENTS PROTOTYPING CHECKOUT WIZARD
- 41. #NEXTWEB
- 42. Components prototyping Creating a modular wizard interface for product personalisation & check-out Design Development • Accelerate design activity by using simulation to understand complex behaviours • Compensate detail design task with real time test in the running prototype • Validate a design direction with final users when you are re-inventing the dynamic of an existing process • Concurrent Design and development • Keep the pace of the deliveries of 4 designers as a single developer • Develop the signature interactive parts and use PNGs placeholder for the rest • Use functional programming for keeping the state of the application and decoupling the different components #NEXTWEB
- 43. #NEXTWEB DLS UI TOOLKIT WIDGETS DESIGN ANGULAR VS REACT DESIGN & PROTOTYPING FLEXIBILITY VS ENGINEERING REAL CASE STUDY IDEAS FROM
- 44. 03T H E L E A R N I N G S #NEXTWEB
- 45. 10 LESSONS W E L E A R N E D I N R E A L L I F E +
- 46. DESIGN MODUL E VARIATION S MINIMIZE M U LT I P L E C A S E S TO 2
- 47. MODULARIZE & E N C A P S U L AT E EVERYTHING 1
- 48. PERFORM A A DESIGN SOLUTION VALIDATE STRESS TEST TO 4
- 49. DEFINE CONVENTIONS, FOLLOW THEM 3 STYLES & RULES AND
- 50. BALANCE TO AVOID BAD DESIGN CRAFTING FLEXIBILITY WITH 6
- 51. DON’T BE SCARED OF REWORK SAVE TIME 5 AT THE EN D IT COULD
- 52. PROTOTYPE BEFORE DEVELOPING EXPERIENCE RAW DESIGN SOLUTION TO 8
- 53. IF YOU’RE ADDING TOO MUCH REVISE IT 7 COMPLEXITY FOR A FEATURE
- 54. C U S T O M E R S D O N ’ T S E E DESIGNED FOR THEM PRODUCT COMPONENTS BUT A 10
- 55. WORKING WITH DESIGNERS MEANS SOLUTIONS 9 RAISE ISSUES AND FIND TOGETHER
- 56. MODULARISE & ENCAPSULATE EVERYTHING MINIMISE DESIGNVARIATIONS DEFINE CONVENTIONS & FOLLOW THEM STRESS THE DESIGN TOVALIDATE IT DON’T BE SCARED OF REWORK, IT COULD SAVE TIME BALANCE FLEXIBILITY WITH DESIGN CRAFT IFYOU’RE ADDING TO MUCH COMPLEXITY REVISE IT PROTOTYPE EXPERIENCE BEFORE DEVELOPING THEM WORK WITH DESIGNERS TO FIND SOLUTIONS USERS DON’T SEE COMPONENTS BUT PRODUCTS +
- 57. THANK YOU @ M Y I N T E R AC T I O N & @ L A M B R U S C O _ T O P # N E X T W E B / G I T H U B : L A M B R U S C O