15. Don’t make me think
! ! !
Edit
Draft
content
Edit
Intranet
content
Edit
Public
content
Color hint of content status
16. Don’t make me think
Color hint of content status
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Uncollapse toolbar to edit Private content
18. Structured elements
Visual hierarchy
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Log in
Forgot password? Ask for a new password.
SIGN IN TO START SESSION
!
"
Guill O’TinaUSERNAME
••••••••••••••PASSWORD
Title
Legend, Section titling
Form
Help, secondary options
Happy path action
19. A CMS deserves icons
covering all its needs
Provide a full visual experience
Visual hierarchy
Drop files here or click to browse
23. Reusability
Visual hierarchy
CONTROL WHO CAN VIEW OR EDIT THIS CONTENT
!PERSONAL INFORMATION
PERSONAL INFORMATION PERSONAL PREFERENCES PERSONAL PREFERENCES
Legend, Section titling
Uncollapse section
Tabs
32. Adaptative editing guillotina.plone.org
Paragraph lorem ipsum dolor sum consecuteur est sit amet.
Title of document
Sure to delete?
Paragraph lorem ipsum dolor sum consecuteur est sit amet. Paragraph lorem ipsum dolor sum consecuteur est sit amet.
Paragraph lorem ipsum dolor sum consecuteur est sit amet.
www.kitconcept.com
Paragraph lorem ipsum dolor sum consecuteur est sit amet.
#252525
BOLD ctrl+B
44. Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Guill O’Tine
Guill O’Tine
Paul One
Paul One
Anita Llonch
Anita Llonch
5 days ago
5 days ago
CREATED
EDITED
5 days ago
DRAFTED
3 days ago
PUBLISHED
3 days ago
EDITED
6 minutes ago
EDITED
!
"
#
!
"
#
History of Name of the content$
!
"
45. Pastanga UI
guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
GENERAL
CONTENT
Site setup
Warning
You have not configured a mail host or a site 'From'
address, various features including contact forms,
email notification and password reset will not work.
Go to the Mail control panel to fix this.
DATE AND
TIME
LANGUAGE MAIL
NAVIGATION SITE ADD-ONS
SEARCH DISCUSSION THEMING
SEARCH SINDICATION TINY MCE
51. guillotina.plone.org
!
"
#
$
Guill O’TineNAME
PERSONAL INFORMATION PERSONAL PREFERENCES
%Guill O’Tine &
name@domain.ctEMAIL
http://EXTERNAL URL
Tell about you…BIOGRAPHY
Guill O’TineUSERNAME
PORTRAIT
Short overview of who you are and what you do
' Browse
()
Guill O’Tine
PROFILE
!
PREFERENCES
!!
SITE SETUP
126 43 13
ITEMS CREATED UPLOADS REVIEWS
55. guillotina.plone.org
Private
Name of the document
Name of the folder
NAME
Name of the form
Name of the news
Name of the image
1 month ago
3 days ago
LAST MODIFIED
3 months agos
1 year ago
3 years ago
1 page selected items per page
None
None
PUBLICATION DATE
None
None
None
STATE ACTIONS
Intranet
Draft
Public
Public
1 2 3 4 520
HOME /
!
!
!
!
!
!
!!!!!!!!!!
" $ % &
Search…
56. guillotina.plone.org
Private
Name of the document
Name of the folder
NAME
Name of the form
Name of the news
Name of the image
1 month ago
3 days ago
LAST MODIFIED
3 months agos
1 year ago
3 years ago
1 page selected items per page
None
None
PUBLICATION DATE
None
None
None
STATE ACTIONS
Intranet
Draft
Public
Public
1 2 3 4 520
HOME /
!
!
!
!
!
!
!!!!!!!!!!
" $ % &
Search…
Edit
View
Set as default view
Move last
Move first
State
Type comments…COMMENTS
PrivateSTATE !
If checked, this will modify the status of the folder
and its subfolders and items.
INCLUDE CHILDREN ITEMS
57. guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
STATE
HOME / … / SUBFOLDER / CURRENT FOLDER /
Contents!
""""""""""
NAME
Name of document
Name o folder
Name of form
Name of news
Name of the image
Name of form
Name of news
Name of news
""""""
Private
Draft
Public
Public
Public
Public
Intran
Intran
loading contents…
100%17:14G Mobile
Guill O’Tine
PREFERENCES
PROFILE
guillotina.plone.org
!
100%17:14G Mobile
!!
SITE SETUP
126 43 13
ITEMS CREATED UPLOADS REVIEWS
63. Create navigation tabs only for folder items.
ONLY FOLDERS NAVIGATION TABS
Add automatically a tab of elements created at
root level.
CREATE NAVIGATION TABS
PROFILE TO IMPORT CACHE SETTINGS
WITH CACHING PROXY
WITH CACHING PROXY AND SPLIT-VIEW
WITHOUT CACHING PROXY
USE UUID FOR USERS
Automatically generate UUIDs for new users.
Newly installed content will be enabled by default unless
explicitly tuned off.
COLLECTION
COMMENT
EVENT
FILE
FOLDER
IMAGE
LINK
NEWS ITEM
PAGE
TYPES SHOWN IN SEARCHES en-us !
Nynorsk !
Catalan
Languages in which the site should be translatable.
AVAILABLE
LANGUAGES
!
64. Deleted successfully!
Updates available
Update installed add-ons: Standard tiles and Drafts
support
!
Warning
You have not configured a mail host or a site 'From'
address, various features including contact forms,
email notification and password reset will not work.
Go to the Mail control panel to fix this.
Delete selected
types?
66. guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Content Rules settings
ENABLE CONTENT RULES
CONFIGURE CONTENT RULES
Rules automatically perform actions on content
when certain triggers take place. After defining
rules, you may want to go to a folder to assign
them, using the ‘rules’ item in the actions menu.
SITE CONTENT RULES
ADD NEW RULE
MY SUPER RULE NAME
NASTY RULE
DISABLED RULE
MY ALMOST SUPER RULE
Filter rules…
67. guillotina.plone.org
100%17:14G Mobile 100%17:14G Mobile
Content Rules settings
ENABLE CONTENT RULES
CONFIGURE CONTENT RULES
Rules automatically perform actions on content
when certain triggers take place. After defining
rules, you may want to go to a folder to assign
them, using the ‘rules’ item in the actions menu.
SITE CONTENT RULES
ADD NEW RULE
NAVIGATION
STATIC TEXT
CALENDAR
CTP
Filter rules…
After this rule is executed, stop further rules
ENABLE RULE
RULE CASCADE OTHER RULES
RULE STOPS OTHER RULES
After this rule is executed, trigger other
rules. Attention! Be sure it won’t create
infinite loops.
Add Content Rule
Content rule nameTITLE
CONFIGURE RULE
Short explanation of rule
and its purpose…
DESCRIPTION
Comment added
EVENT
TRIGGER
68. ADD NEW RULE
STATIC TEXT
CALENDAR
CTP
After this rule is executed, stop further rules
RULE CASCADES OTHER RULES
After this rule is executed, trigger other
rules. Attention! Be sure it won’t create
infinite loops.
RULE CONDITIONS
RULE ASSIGNMENT
If all of the following conditions are met:
State Draft, Revie…are
File extension PDFis
Group Administrat…is
Perform the following actions:
Email email@address.i…
Logger text_contentrul…
Notify Info “Message al…
content ! pageASSIGN TO
LOCATION
!
page !
Select type…ADD ACTION
Select type…
ADD
CONDITION
71. Error Ready Warning Info Clear
Alert .alert-warning, role=“alert”, aria-live=“assertive”
Warning
You have not configured a mail host or a site 'From'
address, various features including contact forms,
email notification and password reset will not work.
Go to the Mail control panel to fix this.
!
73. Pastanaga UI :: Messaging @albertcasado 1/2
Error
Connection to Produce & Publish Server is not
functional
Warning
You have not configured a mail host or a site 'From'
address, various features including contact forms,
email notification and password reset will not work.
Go to the Mail control panel to fix this.
Info
You are running in "debug mode", intended for
development. Changes will take effect
immediately, but will make your site run
slowler.
You are now logged in!
Alert .alert-error, role=“alert”, aria-live=“assertive”
Alert .alert-warning, role=“alert”, aria-live=“assertive”
Alert .alert-info, role=“status”, aria-live=“polite”
Alert .alert-success, role=“status”, aria-live=“polite”
Recommended to use always with a dismiss. Success is auto-dismissed after 5 seconds
In the future notes can be extended to support tips, important messaging or usage recommendations
Recommended to use always with a dismiss
// Optional
// Optional
// Like a button with its label and tooltip “Dismiss”
ALERTS NOTES
<div class="alert alert-warning alert-dismissible" role="alert" aria-live="assertive">
<button type="button" class="alert-dismiss" aria-label="Dismiss">
<img … >
</button>
<img class=“alert-image” src=“status.svg” aria-hidden=“true” alt=“”>
<h2 class=“alert-title”>Title</h2>
<p class=“alert-description”>Description</p>
</div>
<p class=“note” role=“note”> … </p>
You are running in "debug mode", intended for
development. Changes will take effect
immediately, but will make your site run slowler.
You are running in "debug mode", intended for
development. Changes will take effect
immediately, but will make your site run slowler.
error.svg
warning.svg
info.svg
clear.svg
ready.svg
clear.svg
74. Pastanaga UI :: Messaging 2/2
CONFIRMATION DIALOGS
Delete selected
types?
<dialog class=“alertdialog” role="alertdialog" aria-labelledby=“alertdialog-title-id01">
<div class=“alertdialog-wrapper” role="document" tabindex="0">
<h2 class=“alertdialog-title” id="alertdialog-title-id01">Delete selected types?</h2>
<p class=“alertdialog-description”>Optional description, better not to have</p>
<div class="button-group" role="group" aria-label="Alert dialog actions”>
<button type="button" class="button button-highlighted">
<img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”>
<span class=“button-label”>Cancel</span>
</button>
<button type="button" class="button button-destructive button-highlighted">
<img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”>
<span class=“button-label”>Delete</span>
</button>
</div>
</div>
</dialog>
<dialog class=“dialog” role="alertdialog" aria-labelledby="dialog-title-id01">
<div class=“dialog-wrapper” role="document" tabindex="0">
<h2 class=“dialog-title” id="dialog-title-id01">Delete selected types?</h2>
<p class=“dialog-description”>Optional description, better not to have</p>
<button type="button" class="button button-primary button-highlighted">
<img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”>
<span class=“button-label”>OK</span>
</button>
</div>
</dialog>
There was an error loading
the modal
User must confirm actions that cannot be easily undo or have consequences
clear.svg
delete.svg
ahead.svg
@albertcasado
75. Pastanaga UI :: Buttons 1/2
HIERACHY
TEXT BUTTONS
GROUPS
PSEUDO-STATES
Update
SAVE AND TEST
Destructive Default Primary
happy path
Default
not highlighted
Non-iconizable buttons
do not use as primary
If there are several buttons a group is required. With a single button, just the button itslelf is required.
Status appears as a hint in the toolbar for the main action replacing the primary
Note that not only tooltips but shortcuts must be also translated. E.g.: Delete key “del” is “supr” in a Catalan keyboard.
Adding a shortcut is convinient, both for productivity and accessibility; addapt them to Win and Mac.
Composite shortcuts are marked nesting kbd’s tags
Just remove the <img> tag
darken 10% darken 30%
// Default
// Primary blue
// Destructive red
// Adds circled style
.button
.button .button-primary
.button .button-destructive
.button .button-highlighted
.button-public .button-intranet .button-review .button-draft .button-private
.button .button-primary
:default :hover :active :disabled :focus
<div class="button-group" role="group" aria-label="Label to the group of buttons">
<button type="button" class="button button-destructive button-highlighted">
<img class=“button-image” src=“...” alt=“” role=“presentation” aria-hidden=“true”>
<span class=“button-label”>Remove</span>
</button>
…
</div>
<div class="button-group" role="group" aria-label="Label…">
<button type="button" class="button button-destructive button-highlighted has-tooltip"
aria-describedby=“button-tooltip-id01”>
<img class=“button-image” src=“...” alt=“” role=“presentation”
aria-hidden=“true”>
<span class=“button-label”>Remove</span>
<span class=“button-tooltip” id=“button-tooltip-id01”
role=“tooltip”>Remove <kbd title=“delete”>del</kbd></span>
</button>
…
</div>
<span class=“button-tooltip” id=“button-tooltip-id01” role=“tooltip”>Delete</span>
<kbd><kbd title=“command”>⌘</kbd><kbd>N</kbd></kbd>
REMOVE del
<button type="button" class="button button-primary">
<span class=“button-label”>Update</span>
</button>
STATUS IN ICONS
TOOLTIPS AND SHORTCUTS
@albertcasado
DELETE
NEW DOCUMENT ⌘ N
backgroundTBD