Lexicon Update 2017

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.

F3df45fc971eed7036d0698e9bb05f85?s=128

Victor Valle Juarranz

October 30, 2017
Tweet

Transcript

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

  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
  3. 1. UX Design Team

  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!
  5. None
  6. None
  7. 2022

  8. Designers will conquer Liferay ,

  9. 2. News & Updates

  10. 2.1. Accessibility

  11. New colors, better contrast ratio 4.5:1

  12. None
  13. Accessibility

  14. Accessibility

  15. 2.2. Forms

  16. None
  17. Forms / Fields

  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
  19. Forms / New Structure & Navigation

  20. 2.3. Dataset Display

  21. Dataset Display dataset display table image

  22. Dataset Display / Search

  23. Dataset Display / Search

  24. Dataset Display / Search

  25. Dataset Display / View Change

  26. Dataset Display / View Change

  27. Dataset Display / Cards

  28. Do you remember how to add an element into a

    dataset??? Dataset Display / Plus Button
  29. None
  30. None
  31. Dataset Display / Plus Button

  32. Who knows how to select all elements in a dataset???

    Dataset Display / Select All
  33. None
  34. 623 files 20 items 32 pages DATASET PAGE SIZE TOTAL

    / = 32 PAGES * 2 CLICKS/PAGE - 1 63 Clicks to select all
  35. None
  36. Dataset Display / Select All

  37. 2 Clicks to select all!!

  38. None
  39. Dataset Display / Table

  40. Dataset Display / Table / Row Hover

  41. Dataset Display / Table / Drag & Drop

  42. Dataset Display / Table / Columns Visibility

  43. 2.4. Charts

  44. Charts

  45. None
  46. 3. Lexicon for Sites

  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. …too / Modern Site Building “Make Liferay the best website

    builder and CMS platform on the market”
  57. Lexicon for Sites

  58. • Improving the information architecture of the portlets. • Creating

    better defined content hierarchies. • Providing greater flexibility through helping building modular components.
  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.
  60. Lexicon for Sites 24 24 24

  61. Lexicon for Sites 24 24 24 24

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

    24
  63. Lexicon for Sites WIDGET TITLE WIDGET TITLE Subscribe  Add

    Blog Entry 
  64. Lexicon for Sites Title toolbar Basic Metadata Content Social Toolbar

    WIDGET TITLE Subscribe  WIDGET TITLE Add Blog Entry  24 24 24 24 12
  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
  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 
  67. Lexicon for Sites

  68. Lexicon for Sites

  69. Lexicon for Sites

  70. Lexicon for Sites

  71. Lexicon for Sites

  72. Lexicon for Sites

  73. Lexicon for Sites

  74. Lexicon for Sites

  75. Lexicon for Sites

  76. Lexicon for Sites

  77. Lexicon for Sites

  78. Lexicon for Sites

  79. 4. Lexicon + Clay

  80. None
  81. Clay

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

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

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

    Clay is OUR implementation of Lexicon. 0
  85. Lexicon Clay

  86. Summarizing • Accessibility • Forms • Dataset Display • Charts

    • Lexicon for Sites • Lexicon Site • Clay Site
  87. Thanks!!1

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