Slide 1
Slide 1 text
Lexicon Evolution
Víctor Valle
Juan Antón
!
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
1. UX Design Team
Slide 4
Slide 4 text
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!
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
2022
Slide 8
Slide 8 text
Designers will
conquer Liferay ,
Slide 9
Slide 9 text
2. News & Updates
Slide 10
Slide 10 text
2.1. Accessibility
Slide 11
Slide 11 text
New colors, better
contrast ratio
4.5:1
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Accessibility
Slide 14
Slide 14 text
Accessibility
Slide 15
Slide 15 text
2.2. Forms
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Forms / Fields
Slide 18
Slide 18 text
• 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
Slide 19
Slide 19 text
Forms / New Structure & Navigation
Slide 20
Slide 20 text
2.3. Dataset Display
Slide 21
Slide 21 text
Dataset Display
dataset display table image
Slide 22
Slide 22 text
Dataset Display / Search
Slide 23
Slide 23 text
Dataset Display / Search
Slide 24
Slide 24 text
Dataset Display / Search
Slide 25
Slide 25 text
Dataset Display / View Change
Slide 26
Slide 26 text
Dataset Display / View Change
Slide 27
Slide 27 text
Dataset Display / Cards
Slide 28
Slide 28 text
Do you remember how
to add an element
into a dataset???
Dataset Display / Plus Button
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Dataset Display / Plus Button
Slide 32
Slide 32 text
Who knows how to
select all elements
in a dataset???
Dataset Display / Select All
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
623 files 20 items 32 pages
DATASET PAGE SIZE TOTAL
/ =
32 PAGES * 2 CLICKS/PAGE - 1
63 Clicks to select all
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Dataset Display / Select All
Slide 37
Slide 37 text
2 Clicks to select all!!
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Dataset Display / Table
Slide 40
Slide 40 text
Dataset Display / Table / Row Hover
Slide 41
Slide 41 text
Dataset Display / Table / Drag & Drop
Slide 42
Slide 42 text
Dataset Display / Table / Columns Visibility
Slide 43
Slide 43 text
2.4. Charts
Slide 44
Slide 44 text
Charts
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
3. Lexicon for Sites
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
…too /
Modern Site Building
“Make Liferay the best
website builder and CMS
platform on the market”
Slide 57
Slide 57 text
Lexicon for Sites
Slide 58
Slide 58 text
• Improving the information architecture
of the portlets.
• Creating better defined content
hierarchies.
• Providing greater flexibility through
helping building modular components.
Slide 59
Slide 59 text
• 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.
Slide 60
Slide 60 text
Lexicon for Sites
24
24
24
Slide 61
Slide 61 text
Lexicon for Sites
24
24
24
24
Slide 62
Slide 62 text
Lexicon for Sites
Widget toolbar
Widget Content
24
24
24
24
Slide 63
Slide 63 text
Lexicon for Sites
WIDGET TITLE WIDGET TITLE Subscribe
Add Blog Entry
Slide 64
Slide 64 text
Lexicon for Sites
Title toolbar
Basic Metadata
Content
Social Toolbar
WIDGET TITLE Subscribe
WIDGET TITLE Add Blog Entry
24
24
24
24
12
Slide 65
Slide 65 text
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
Slide 66
Slide 66 text
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
Slide 67
Slide 67 text
Lexicon for Sites
Slide 68
Slide 68 text
Lexicon for Sites
Slide 69
Slide 69 text
Lexicon for Sites
Slide 70
Slide 70 text
Lexicon for Sites
Slide 71
Slide 71 text
Lexicon for Sites
Slide 72
Slide 72 text
Lexicon for Sites
Slide 73
Slide 73 text
Lexicon for Sites
Slide 74
Slide 74 text
Lexicon for Sites
Slide 75
Slide 75 text
Lexicon for Sites
Slide 76
Slide 76 text
Lexicon for Sites
Slide 77
Slide 77 text
Lexicon for Sites
Slide 78
Slide 78 text
Lexicon for Sites
Slide 79
Slide 79 text
4. Lexicon + Clay
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
Clay
Slide 82
Slide 82 text
Lexicon is a user experience
language and interface
design system.
0
Slide 83
Slide 83 text
Lexicon is a user experience
language and interface
design system.
Clay is the implementation
of Lexicon.
0
Slide 84
Slide 84 text
Lexicon is a user experience
language and interface
design system.
Clay is OUR implementation
of Lexicon.
0
Slide 85
Slide 85 text
Lexicon Clay
Slide 86
Slide 86 text
Summarizing
• Accessibility
• Forms
• Dataset Display
• Charts
• Lexicon for Sites
• Lexicon Site
• Clay Site
Slide 87
Slide 87 text
Thanks!!1
Slide 88
Slide 88 text
Liferay Community #lexicon
@Liferay_Lexicon
@victorvj06
@mundotw