Designing for the web changed from an artisan template design to a more modern LEGO builder approach. Creating a personalized library of UI&UX bricks with intelligent behaviors helps an organization to build a real product. Reusable components can be combined in more complex structures, widgets and templates thus providing higher fidelity to design and decreasing the time to market. Through real project examples, this talk will introduce the design methodology and process to translate a UX model into a set of components, and the recommended development practices to implement.

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

11. THE RAISE
FRAMEWORK
JAVASCRIPT
OF NEW
Angular 4

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