eZ Platform's User Interface Guidelines

This is a resource for designers, product managers, and developers, providing a unified language to build and customize eZ Platform admin user interface (aka Platform UI). We use it to simplify how we can build and offer a consistent interface across our content management platform.

eZ’s UI Guidelines provides a simplified and recognizable experience; increases our productivity, enabling us to evolve faster; and it allows us to develop collectively.

This is an open source project, you can directly contribute to it by filling issues and submitting pull requests. This is as much your tool as it is ours, and we look forward to collaborating with developers and partners on making it even better.

Note: this is a work in progress, is only very partially used on eZ Platform version 1.x. Our goal is to embrace those guidelines as we will build eZ Platform version 2.x.

Design

This UI Guidelines reflects the components, features and patterns that underpin eZ’s Platform and Studio products. These patterns and components provide a cohesive language and consistent look and feel when improving and evolving our products. Our Design Principles underpin our user-centered and open source approaches.

Design Principles

SIMPLICITY

Simplify the way people interact with content. Optimize workflows removing unnecessary steps to make it easier, faster and more intuitive.

EXPANDABLE

Our UI design is open and includes extendable areas where contributors can add new features and functionalities that strengthen our product.

EFFICIENCY

The UI design has to adapt to the constantly evolving expectations of the users, enhancing the experience.

CONSISTENCY

Our design focuses on strengthen user’s intuition ensuring that the UI applies the same elements that are easy to access and understand for the same action across the product.

Philosophy

The design philosophy underpins everything we do as a Product and Engineering Teams. It informs the way our products look, the way they behave and the way we work as a team.

1. MODERN

We design and built a new generation of content management software. This has been the result of marathon 3 years of collaboration.

2. SIMPLE

Our interface is the result of our vision: to deliver tools that simplify the way people — developers, designers, editors and marketers — interact with content.

3. CONTENT-CENTRIC

eZ’s content engine provides a solid mechanism to reuse content. Across channels and contexts, users can easily repackage content for simple integration, and continuous optimization.

4. MULTI - PLATFORM / CHANNEL / LANGUAGE

A flexible UI that accounts for different languages as well as format time and date conventions to support global variations.

5. EXPERT / BEGINNER

To keep our focus on improving the experience of whomever uses eZ, from developers and designers to content editors, marketers and end users.

6. EXPANDABLE

eZ Platform is designed to be extended by developers with new features and functionality. The content editing interface is open and allows developers to create custom features.

7. FLEXIBLE

Opportunities for customization are limitless, so customers that use eZ are well positioned to continually adapt to their end users’ ever-changing needs.

8. USER-CENTERED

The experience must be personal and adapt to the constantly changing expectations of the end user. A great experience enhances the efficiency of any project.

9. OPEN SOURCED

Members of the Community play a key role in the continuous development of eZ Platform. We are committed to try to handle incoming community contributions.

10. LAST...

But not least. We put quality first.

Components

Buttons

Basic buttons

We use button as main element for click function. Use a disabled attribute disabled="disabled" when a button can’t be clicked.

eZ button

eZ button - Disabled

Primary button

Secondary button

Negative button

Ghost button

When adding icons to basic buttons just add the icon class name span tag before the text of the button.

Primary button with icon

Secondary button with icon

Negative button with icon

Action buttons

We use .ez-action as main element for buttons contained within action bars (discovery & action bars). Use a disabled attribute disabled="disabled" when a button can’t be clicked.

eZ action button - Discovery bar

eZ action button - Action bar

eZ action button - Action bar disabled

eZ action button - Action bar Translations

eZ action button - Action bar negative

eZ action button - Action bar preview

Form components

Checkboxes

Radio buttons

Input text

Will be shown at the top of article pages

Suggested style for validation messages.

Will be shown at the top of article pages

Input text extra small

Will be shown at the top of article pages

Input text small

Will be shown at the top of article pages

Input text large

Will be shown at the top of article pages

Date and time

Will be shown at the top of the article.

Will be shown at the top of the article.

Search

Select list

Switchers

On/Off switcher

Visibility switcher

Visibility switcher - Disabled

Content Box

Default Content Box

Location content swap

Swap the content item at this location with another

Default Content Box List

Composer

Minimum stability

stable

Tables

Default table

Published version

Version Language Author Created Last saved
2 eng-GB Administrator user 17 Sep 2015 12:53 PM 17 Sep 2015 12:55 PM
1 eng-GB Administrator user 15 Sep 2015 08:33 AM 15 Sep 2015 11:45 AM

Default table with checkboxes and interaction

Content type groups

Name Id
Content 1
Users 2
Media 3
More content 4
More users 5
More media 6
More content 2 7
More users 2 8
More media 2 9

Default table with checkboxes

Content type groups

Name Id
Content 1
Users 2
Media 3

Default table with interaction

Content details

Name Id
Content 1
Users 2
Media 3

Sub-items table

Sub-items table

Version Language Author Created Last saved
2 eng-GB Administrator user 17 Sep 2015 12:53 PM 17 Sep 2015 12:55 PM
1 eng-GB Administrator user 15 Sep 2015 08:33 AM 15 Sep 2015 11:45 AM

Dashboard table

Name Content type Contributor Last saved
Introducing eZ Platform V2 Article Yura Rajzer 17 Sep 2015 12:53 PM
Reaching for the stars Blog post Tara Fitzgerald 15 Sep 2015 08:33 AM
The Week in Review Blog post Thomas Smith 12 Sep 2015 10:23 PM
Announcing our new partners Blog post Claire LaVergne 10 Sep 2015 06:33 AM

Modals

Modal without header
Launch modal without header

Modal with header, but without footer
Modal with header, but no footer

Modal with header and footer
Modal with header and footer

Tabs

Tabs system

Resources

Typography

Typographic elements do not come with any other styling properties attached to them in order to emphasize modularity and make them more flexible in where they can be used. If you need to add more styling properties don’t forget to look for any other component before.

We have selected Noto Sans due to it's intended to be visually harmonious across multiple languages, a priority for us when promoting a multilanguage platform.

Type weights and styles

A

REGULAR (400)

A

REGULAR ITALIC (400)

A

BOLD (700)

A

BOLD ITALIC (700)

Type sizes

We use standard type sizes and weights to define a layout composition.

eZ is an open source content management system

h12.5em

eZ is an open source content management system

h22em

eZ is an open source content management system

h31.75em

eZ is an open source content management system

h41.5em

eZ is an open source content management system

h51.25em

eZ is an open source content management system

p1em

Colors

Visual hierarchy and differentiation. We prioritize Create and Edit content as main functions in our CMS with orange color. Because most of the application has soft colors, color stands out and catches user's attention. We also define secondary, neutral and negative colors. Despite of this, it is also important to remind to not always rely on color to provide visual differentiation. If too many colors are employed, colors might lose their meaning.

All color combinations have been previously tested to meet at least one or more of the minimum ratios that the WCAG 2.0 specifies for text and background color combinations. This compliance will help users who are colorblind or have low vision to better interact with our app, as well as it will benefit usability and readability for all users.

When planning a new color combination, check beforehand compliance with these standards. We suggest Colour Contrast Analyser app.

Primary colors

#f15a10

Primary

#c3480b

Primary
hover

#0f6d95

Secondary

#0a4b67

Secondary
hover

#757575

Neutral

#5c5c5c

Neutral
hover

#cb2540

Negative
enabled

#a01d32

Negative
hover

Text colors

#333

Text base

#fff

Text base inverted

#0645ad

Text hyperlink

#d92d42

Text error

#878787

Text base pale

#6b6b6b

Text base light

#4b4b4b

Text base medium

#0a4b67

Text base deep

Secondary colors

#fafafa

Ground base

#f3f3f3

Ground base light

#e5e3e3

Ground base medium

Notification colors

Feedback
positive

Feedback
processing

Feedback
negative

Icons

We provide visual context with icons, we want to emphasize the most important interactions. Our objective is to enhance usability.

Here you can find all SVG icons our CMS uses.

.ez-icon-about

.ez-icon-airtime

.ez-icon-align-center

.ez-icon-align-justify

.ez-icon-align-left

.ez-icon-align-right

.ez-icon-article

.ez-icon-author

.ez-icon-banner

.ez-icon-blog-post

.ez-icon-blog

.ez-icon-browse

.ez-icon-bubbles

.ez-icon-caret-back

.ez-icon-caret-down

.ez-icon-caret-next

.ez-icon-caret-up

.ez-icon-category

.ez-icon-checkmark

.ez-icon-circle-caret-back

.ez-icon-circle-close

.ez-icon-circle-caret-down

.ez-icon-circle-caret-next

.ez-icon-circle-caret-up

.ez-icon-circle-create

.ez-icon-clipboard

.ez-icon-comment

.ez-icon-content-list

.ez-icon-content-types

.ez-icon-copy

.ez-icon-create-content

.ez-icon-landingpage-add

.ez-icon-create

.ez-icon-dashboard

.ez-icon-discard

.ez-icon-download

.ez-icon-drag

.ez-icon-edit

.ez-icon-embed

.ez-icon-error

.ez-icon-file-text

.ez-icon-file-video

.ez-icon-file

.ez-icon-filters

.ez-icon-focus

.ez-icon-folder

.ez-icon-folder-empty

.ez-icon-form-data

.ez-icon-form

.ez-icon-future-publication

.ez-icon-gallery

.ez-icon-global-content

.ez-icon-global-page

.ez-icon-global-performance

.ez-icon-global-eztags

.ez-icon-home-page

.ez-icon-image

.ez-icon-image-left

.ez-icon-image-center

.ez-icon-image-right

.ez-icon-information

.ez-icon-keywords

.ez-icon-landingpage

.ez-icon-languages

.ez-icon-link-remove

.ez-icon-link

.ez-icon-lock

.ez-icon-maform

.ez-icon-media

.ez-icon-menu

.ez-icon-merge

.ez-icon-move

.ez-icon-new-tab

.ez-icon-open-newtab

.ez-icon-open-sametab

.ez-icon-news

.ez-icon-notice

.ez-icon-h1

.ez-icon-list

.ez-icon-paragraph

.ez-icon-paragrapgh-add

.ez-icon-bold

.ez-icon-italic

.ez-icon-underscore

.ez-icon-table-add

.ez-icon-options

.ez-icon-panel

.ez-icon-pdf-file

.ez-icon-personalize-block

.ez-icon-personalize-content

.ez-icon-pin

.ez-icon-pin-unpin

.ez-icon-place-list

.ez-icon-place

.ez-icon-portfolio

.ez-icon-product-list

.ez-icon-product

.ez-icon-publish-later-cancel

.ez-icon-publish-later

.ez-icon-publish

.ez-icon-recommended

.ez-icon-refresh

.ez-icon-relations

.ez-icon-review

.ez-icon-roles

.ez-icon-rss

.ez-icon-save

.ez-icon-schedule

.ez-icon-search

.ez-icon-sections

.ez-icon-settings-block

.ez-icon-shuffle

.ez-icon-stats

.ez-icon-subscriber

.ez-icon-swap

.ez-icon-system-information

.ez-icon-tag

.ez-icon-tags

.ez-icon-translation

.ez-icon-trash

.ez-icon-trash-empty

.ez-icon-trash-send

.ez-icon-trash-notrashed

.ez-icon-unarchive

.ez-icon-upload

.ez-icon-user

.ez-icon-users

.ez-icon-versions

.ez-icon-video

.ez-icon-view-custom

.ez-icon-view-grid

.ez-icon-view-list

.ez-icon-view-desktop

.ez-icon-view-tablet

.ez-icon-view-mobile

.ez-icon-view

.ez-icon-view-hide

.ez-icon-wand

.ez-icon-warning

.ez-icon-wiki-file

.ez-icon-wiki

.ez-icon-fields

Icon sizes

To increase icon sizes use the .ez-icon-x1, .ez-icon-x2, .ez-icon-x3, .ez-icon-x4, or .ez-icon-x5 classes.

.ez-icon-x1

.ez-icon-x2

.ez-icon-x3

.ez-icon-x4

.ez-icon-x5

Animated icons

Use the .ez-spin class to get any icon to rotate.

.ez-spin
.ez-icon-settings-block

.ez-spin
.ez-icon-review

.ez-spin
.ez-icon-refresh

Loading icons

We use .ez-spin & .ez-icon-loading for when content is loading within a specific view.

.ez-spin
.ez-icon-x1
.ez-icon-spinner

.ez-spin
.ez-icon-x2
.ez-icon-spinner

We also use .ez-square-clock to animate our logo when transitioning from one view to another one.