Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Victor Valle Juarranz

October 30, 2017
Tweet

More Decks by Victor Valle Juarranz

Other Decks in Design

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. 2022







































    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