Lexicon Update 2017

Lexicon is evolving to better fit the need of Liferay users and correct interactions from the past that needed improvements. The work in this slides is not definitive but is the way we are following for a better definition of Liferay DXP interfaces.

This presentation is given by two people Juan Anton and Victor Valle but many Liferay workmates have contributed as Emiliano Cicero, Juan Hidalgo (from Lexicon Team) and designer from the different multifunctional teams.

Transcript

1. Lexicon Evolution
   Víctor Valle
   Juan Antón
   !
   

   View Slide

2. 1. UX Design Team
   2. Updates & News
   2.1. Accessibility
   2.2. Forms
   2.3. Dataset Display
   2.4. Charts
   3. Lexicon for sites
   4. Lexicon + Clay
   Index
   

   View Slide

3. 1. UX Design Team
   

   View Slide

4. Liferay.Browser={acceptsGzip:function()
   {return!0},getMajorVersion:function()
   61},getRevision:function()
   {return”537.36”},getVersion:function()
   {return"61.0"}, isAir:function(){return!
   1},isChrome: Not only an awesome coders
   company anymore ,isSafari:function()
   0},isSun:function(){return!1},isWebKit:
   {return!0},isWindows:function(){return!
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. Designers will
   conquer Liferay ,
   

   View Slide

9. 2. News & Updates
   

   View Slide

10. 2.1. Accessibility
    

    View Slide

11. New colors, better
    contrast ratio
    4.5:1
    

    View Slide

12. View Slide

13. Accessibility
    

    View Slide

14. Accessibility
    

    View Slide

15. 2.2. Forms
    

    View Slide

16. View Slide

17. Forms / Fields
    

    View Slide

18. • Consecutive-embedded form sections
    • It is difficult to find sections
    • Tasks become long and time consuming
    • If I commit several errors in the form, I can
    feel stressed
    Forms / Form Length
    
    

    View Slide

19. Forms / New Structure & Navigation
    

    View Slide

20. 2.3. Dataset Display
    

    View Slide

21. Dataset Display
    dataset display table image
    

    View Slide

22. Dataset Display / Search
    

    View Slide

23. Dataset Display / Search
    

    View Slide

24. Dataset Display / Search
    

    View Slide

25. Dataset Display / View Change
    

    View Slide

26. Dataset Display / View Change
    

    View Slide

27. Dataset Display / Cards
    

    View Slide

28. Do you remember how
    to add an element
    into a dataset???
    Dataset Display / Plus Button
    

    View Slide

29. View Slide

30. View Slide

31. Dataset Display / Plus Button
    

    View Slide

32. Who knows how to
    select all elements
    in a dataset???
    Dataset Display / Select All
    

    View Slide

33. View Slide

34. 623 files 20 items 32 pages
    DATASET PAGE SIZE TOTAL
    / =
    32 PAGES * 2 CLICKS/PAGE - 1
    63 Clicks to select all
    

    View Slide

35. View Slide

36. Dataset Display / Select All
    

    View Slide

37. 2 Clicks to select all!!
    

    View Slide

38. View Slide

39. Dataset Display / Table
    

    View Slide

40. Dataset Display / Table / Row Hover
    

    View Slide

41. Dataset Display / Table / Drag & Drop
    

    View Slide

42. Dataset Display / Table / Columns Visibility
    

    View Slide

43. 2.4. Charts
    

    View Slide

44. Charts
    

    View Slide

45. View Slide

46. 3. Lexicon for Sites
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. …too /
    Modern Site Building
    “Make Liferay the best
    website builder and CMS
    platform on the market”
    

    View Slide

57. Lexicon for Sites
    

    View Slide

58. • Improving the information architecture
    of the portlets.
    • Creating better defined content
    hierarchies.
    • Providing greater flexibility through
    helping building modular components.
    

    View Slide

59. • Giving more personality and
    differentiation to applications.
    • Building visually more attractive and
    up-to-date interfaces.
    • Creating an environment in which you
    would like to work.
    

    View Slide

60. Lexicon for Sites
    24
    24
    24
    

    View Slide

61. Lexicon for Sites
    24
    24
    24
    24
    

    View Slide

62. Lexicon for Sites
    Widget toolbar
    Widget Content
    24
    24
    24
    24
    

    View Slide

63. Lexicon for Sites
    WIDGET TITLE WIDGET TITLE Subscribe
    
    Add Blog Entry
    
    

    View Slide

64. Lexicon for Sites
    Title toolbar
    Basic Metadata
    Content
    Social Toolbar
    WIDGET TITLE Subscribe
    
    WIDGET TITLE Add Blog Entry
    
    24
    24
    24
    24
    12
    

    View Slide

65. Lexicon for Sites
    Title toolbar
    Basic Metadata
    Content
    WIDGET TITLE Subscribe
    
    WIDGET TITLE Add Blog Entry
    
    This is Blog Entry Example One
    David Aragonés Otero
    Sep 25 - 3 Views
    
    DA
    This helps in creating a more dynamic web site: you can place user-created wiki entries, blog posts, or message
    board messages in context with your content. You’ll examine some of the Asset Publisher’s features next. As you
    create web content, it’s important to keep in mind that to Liferay Portal, the pieces of content are assets, just like
    message board entries and blog posts. This allows you to publish different …
    
    Share
    
    27
    5 min
    
    3
    
    24
    24
    24
    24
    12
    Social Toolbar
    

    View Slide

66. Lexicon for Sites
    WIDGET TITLE Subscribe
    
    WIDGET TITLE Add Blog Entry
    
    This is Blog Entry Example One
    David Aragonés Otero
    Sep 25 - 3 Views
    
    DA
    This helps in creating a more dynamic web site: you can place user-created wiki entries, blog posts, or message
    board messages in context with your content. You’ll examine some of the Asset Publisher’s features next. As you
    create web content, it’s important to keep in mind that to Liferay Portal, the pieces of content are assets, just like
    message board entries and blog posts. This allows you to publish different …
    
    Share
    
    27
    5 min
    
    3
    
    

    View Slide

67. Lexicon for Sites
    

    View Slide

68. Lexicon for Sites
    

    View Slide

69. Lexicon for Sites
    

    View Slide

70. Lexicon for Sites
    

    View Slide

71. Lexicon for Sites
    

    View Slide

72. Lexicon for Sites
    

    View Slide

73. Lexicon for Sites
    

    View Slide

74. Lexicon for Sites
    

    View Slide

75. Lexicon for Sites
    

    View Slide

76. Lexicon for Sites
    

    View Slide

77. Lexicon for Sites
    

    View Slide

78. Lexicon for Sites
    

    View Slide

79. 4. Lexicon + Clay
    

    View Slide

80. View Slide

81. Clay
    

    View Slide

82. Lexicon is a user experience
    language and interface
    design system.
    0
    

    View Slide

83. Lexicon is a user experience
    language and interface
    design system.
    Clay is the implementation
    of Lexicon.
    0
    

    View Slide

84. Lexicon is a user experience
    language and interface
    design system.
    Clay is OUR implementation
    of Lexicon.
    0
    

    View Slide

85. Lexicon Clay
    

    View Slide

86. Summarizing
    • Accessibility
    • Forms
    • Dataset Display
    • Charts
    • Lexicon for Sites
    • Lexicon Site
    • Clay Site
    

    View Slide

87. Thanks!!1
    

    View Slide

88. Liferay Community #lexicon
    @Liferay_Lexicon
    @victorvj06
    @mundotw
    
    
    

    View Slide