ADAM User Interface Guidelines

User Interface Guidelines Version 1.2

July 2013 This document contains design and brand guidelines to enable and create user consistency across all ADAM based interfaces and applications.

User Interface Guidelines v1.2 v1.0

Should you need any assistance, please contact the document owners: Jan Dejosse Marketing Manager Jan.Dejosse@adamsoftware.net Hans de Potter UI developer Hans.DePotter@adamsoftware.net Cathal McKee Creative Director CMK1 cathal@cmk1.com

2

Table of Contents UI Elements 6

IIO Design

8 Logo 10 Font Usage 12 Color Scheme 14 Containers & Elements 20 Navigation 24 Icons 40 Second Level of Information 42 Tone of Voice 44 Image Style

Templates 46 Login Page 48 ADAM Central 50 Top Banner & Sub-navigation 52 Error Screen 54 Assets 56 Asset Overview 5

User Interface Guidelines v1.2

IIO Design The IIO User Interface Design The design and brand philosophy behind this guide is based on our core values. Intelligent, intuitive and organized.

When designing an interface or even an invitation, always ask yourself: Is the work intelligent? Does it make things intuitive? Have I presented the information in a clear and organized way? It will take practice and learning to achieve this, but this guide is a brand and UI toolkit.

This describes the way we create the brand and how we communicate, whether in an application or an invitation.

Use these words as a filter for everything you do.

The new d esign guidelines are borne out of the User Interface of ADAM 5.

6

Intelligent The way we create compelling interfaces and brand messages, ensuring they are user focused and relevant.

Intuitive Keeping things short and simple is the easiest way to create an intuitive design.

Organized Complexity is all around us. Creating design and interaction that allows the user to be more intuitive comes from organizing information in an intelligent manner.

7

User Interface Guidelines v1.2

Logo Usage

Coloring The logo can be used in three ways: 1. The logo is predominantly used in white on a colored background.

2. The green/blue logo PMS 368 and PMS 313 in full color can only be used on a white background.

3. The black logo is used only when there are restrictions to use color.

8

Positioning Depending on the area and its use, the logo should always be positioned within one corner of the area.

1. For Internet - top left 2. For applications - top right 3. For advertising - bottom right 4. For print - top right 5. For presentations/PowerPoint - top right

1/3

1/1

1/1

1/1

1/1

1/1

1/1

1/3

1/1

1/3

1/1 1/1

9

User Interface Guidelines v1.2

Font Usage

Myriad Pro & Open Sans Myriad Pro Light This is the ADAM font for all printwork

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567891 !?@#$%^&*()§_+-=[]:;`’,.\ /{}”|<>~ Sizing 80 px. Page Titles 34 px. Main Items 22 px. Headers 18 px. Body Text 16 px. Footnotes

10

Open Sans Light This is ADAM font for everything digital For OS X Operating Systems and Applications For Web (Adobe Web Font) For Windows Operating Systems and Applications

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567891 !?@#$%^&*()§_+-=[]:;`’,.\/{}”|<>~ Sizing 80 px. Page Titles 34 px. Main Items 22 px. Headers 18 px. Body Text 16 px. Footnotes

11

User Interface Guidelines v1.2

Color Scheme Theme Colors Blue is the main ADAM User Interface color.

Green, Gray’s and Orange can be used for backgrounds, buttons and text in applications.

Gray’s are used for titles and body text.

Blue is used for clickable actions, links and selection.

Green is used for approval/acceptance.

Orange is used only for highlights and special pages.

12

Blue

Green

Orange

Gray

PMS 313

PMS 368

PMS 137

PMS Cool Gray 7

CMYK 100-0-11-2 sRGB 0-146-188 HEX #0092BC

CMYK 65-0-100-0 sRGB 120-190-32 HEX #78BE20

CMYK 0-41-100-0 sRGB 255-163-0 HEX #FFA300

CMYK 20-14-12-40 sRGB 151-153-155 HEX #97999B

Light Gray

Semi Gray

Deep Gray

Dark Gray

CMYK 11-7-7-0 sRGB 231-233-235 HEX #E7E9EB

CMYK 16-10-11-1 sRGB 219-221-223 HEX #dbdddf

CMYK 51-41-39-27 sRGB 115-117-119 HEX #737577

CMYK 67-54-50-51 sRGB 67-70-73 HEX #434649

Secondary Colors White may only be used for elements and text on colored backgrounds, never as background color.

Red is the signal color for errors (second level information).

Opacity Rules Background colors may only be used at White

CMYK 0-0-0-0 sRGB 255-255-255 HEX #FFFFFF

Red

100% opacity. 25%

PMS Red 032

opacity is allowed

CMYK 0-86-63-0 sRGB 239-51-64 HEX #EF3340

for text in selection options.

13

User Interface Guidelines v1.2

Containers & Elements Managing Content Containers Containers, like this one, are placed on colored backgrounds to separate information providing the user with a more focused view on content.

Arrows are used to direct the user through the containers.

Sizing The width of the container depends on the content of the container. Containers on top of each other have the same width, driven by the widest container.

20 px 23 px

Borders The elements inside the container are always placed 23 px from the side of the container.

23 px

The space between multiple containers is always 20 px.

14

Color Usage Containers with general content are always White.

Containers that are used to give notifications/alerts are Green (approval) or Red (error)

Containers can contain multiple elements: Text & Links Checkboxes Textboxes Buttons Click & Drag Fields Loading bars Placeholders These elements all have their own general specifications.

15

User Interface Guidelines v1.2

Text & Links Main text in containers is always written in Gray. The different Grays define the importance and readability of information. Actions and links are always written in Blue, to ensure they stand out and look clickable.

In colored containers (with second level information), text is always written in White.

Checkboxes Checkboxes are only used when text is not an option.

Texts are prefered as they can easily communicate the action or decision to be taken. When using a checkbox the same principles are as for textboxes.

16

Textboxes Textboxes are White with a 1 px Semi Gray border.

When active, this border becomes Blue.

When a required field misses content, the border becomes Red. The sizing of boxes depends on the layout.

Email pieter@ADAMs

These boxes can have a drop-down or search function as well.

Select Language Search

17

User Interface Guidelines v1.2

Buttons 126 px width x 42 px height is the size of all buttons.

Color is determined by the action.

Send

42 px

126 px

The size of the text inside the buttons is always 16 px.

Click & Drag Fields These are interactive areas you can click on them (as a button) or to drop items in.

The width is equal to the upper element(s) and the height is always 84 px.

The size of the text inside the field is always 16 px.

When the field is linked to one element is has a distance of 2 px. When the field is connected to mutiple elements the distance between them is 20 px.

84 px

Click or drag here to add a file Equal to the width of the element(s)

18

Loading Bars Loading Bars should have a maximum width of 400 px and depth of 10 px.

The color of a loading area is Green.

The background color is Light Gray.

10 px Maximum 400 px

Placeholders The placeholder is used when content cannot be displayed. Weâ&#x20AC;&#x2122;ve created an icon for use in these situations. The stroke of the icon is 2 px White and the fill Light Gray. The size depends on the content.

User Placeholder This icon is used when a user has not uploaded his or her own image.

19

User Interface Guidelines v1.2

Navigation Elements

Arrows - Linked to Containers Arrows are used to navigate the user through the containers with different information. These arrows always have the same size: 18 px by 9 px, but can point in any direction. The color should match the container color.

18 px 9 px

13 px

Collapsable Containers

10 px

Collapsable Containers Containers are often collapsable in order to reduce the amount of information on your screen. + is used to open a container and - to close. The size of these icons is always 10 px wide. The distance to the right upper conner of the container is 13 px (measured from the +).

20

Classification Tree To navigate through folders and files in the application a collapsable application tree is used. Blue is the color of the selected folder or file. For sizing, see image below.

Summer 2012

16 px font size

10 px 17 px

Campaign A Campaign B Campaign C Winter 2012 23 px

10 px

Summer 2013

10 px

21

User Interface Guidelines v1.2

Drop-downs Drop-downs are often used to navigate through possible actions or to change the view. The dropdown arrow can be found in the icon package.

View Grid

View Grid Grid List

Vertical Scrollbars Vertical Scrollbars have a width of 10 px and can

50 px

have various lengths. The color of a scrollbar is Semi Gray.

The color of the scrollbox is Blue and has a 50 px length.

22

10 px

23

User Interface Guidelines v1.2

Icons Usage

Icons - Usage The icon library is growing on a daily basis. Each icon has been created to try and communicate a product, title, section or action.

When Should You Use or Create an Icon?

Icons are to be created when there is a need to communicate.

Icons are to be used within two main areas: 1. As indicators of systems and products.

2. Used where there is no space for text.

24

Sizing Icons are used in different sizes for different functions: 16 px Actions Object type intance 24 px placeholers in search Applications in Top Banner, 32 px Sub-navigation and ADAM Central

48 px Notification messages

Object type intance 64 px placeholers in page

25

User Interface Guidelines v1.2

Icons

Product Signifiers Content Products ADAM Engine PIMS API

Customer Engagement

ADAM Web

PageBuilder

Asset Studio

DocMaker

Config Studio

Product Viewer

VideoManager ADAM Box

Comfort Zones Office Connector

26

Process Products

SharePoint Connector

Teamwork

Creative Suite Connector

Workflow

WebCenter Connector

Icons Online

Website Home Support Talk About Contact Our Next Event Case Studies How We Do It Webinars Solutions Jobs News

27

User Interface Guidelines v1.2

Icons

Applications Navigation Notifications Deleted Warning Added Succeeded Stop Restricted Question Information Error

Folder Selected Folder Open Folder Close Folder Dropdown Go Go Back Sortable Sorted Ascending Sorted Descending Nr. of...

Nr. of...

Open Action Panel Close Action Panel

28

Permissions Settings Read

MRM Studio

Classify

Timeline View

Modify

Asset View

Delete

Workpanel

Access

Toolkit

No Access

Object Types Drag & Drop

User

Multiple Asset Drop +

Classification

Multiple Asset Drop Nr.

Language

Non-drop Target

File Type

29

User Interface Guidelines v1.2

Tools & Actions Edit

View Comments

View

Archive

Download

Upload

Add/New

Set Milestone

Copy

Choice

Delete

Email

Preview

Create Task

Basket

Open in InDesign

Print

Facets Selected

Check out

Facets Unselected

Check in

User(group) Settings

Redo

Activity Log

Undo

Link

Rename

Search

Master Item

Video

Make Master Rotate Clockwise Rotate Counter Clockwise 30

File Types Picture

PNG

Text

BMP

RAS

Sound

DCR

TGA

Video

EPS

TIF

AVI

GIF

TIFF

DV

ICO

WMF

FLV

JPEG

WPG

F4V

JPG

Photoshop

MOV

JP2

Illustrator

MPEG

J2K

Word

MPG

PCD

HTML

WMV

PCX

InDesign

DCX

PDF

PCT

PowerPoint

PIC

QuarkXPress 31

Icons

Workflow Elements

Servers InDesign Server

CPU

Server Database

IIS

IIS Server

SharePoint Server

File/Folder ADAM Server User Two Users Multiple Users

32

ADAM IIS Server

ConceptShare Server

Usage These Icons have been created to illustrate workflows between people, processes and systems. Connector arrows help clarify these processes.

Example Usage

File Server

Database & Server

33

User Interface Guidelines v1.2

Connectors

34

Task Types Task Status 24px / 48px

16px Send task

Active

Receive task

Cancelled

User task

Passed

Manual task

Suspended

Business Rule task

Start

Service task

Stop

Script task

Gateway

Connectors

48px

48px Gateway

Sequence flow

Choice

Default flow

Multi-condition

Conditional flow

35

User Interface Guidelines v1.2

Activity 64px

36

Sub process

Upload file

Pick user

Create/Edit file

Pick group

Copy/Move file

Approval

Read file

Email

Delete file

For each

Create/Edit classification

Search

Is classified in

Add to record link

Remove classification

ADAM Extender

Copy Classification

General/Custom task

Move Classification

Call activity

Create product

Upload record

Execute product

Create/Edit record

Cancel product

Copy/Move record

Create order

Read record

Execute order

Delete record

Cancel order

Visualisation

37

User Interface Guidelines v1.2

Icons

Presentation Challenge Solution Scalability Security Multilingual / Multicultural Openness/ Integration Time to market / Shorten time delays Collaboration Workflows / Process Control Consistency Complexity Centralization Channels

38

Usage These icons are designed to illustrate certain topics in (PowerPoint) presentations. They can be used at any size.

Sync!

Customers Expert Services Cataloging Partners

.EPS files of all icons are available in the ADAM Download Center.

39

User Interface Guidelines v1.2

Second Level of Information The Second Level of information appears when the application informs the user of a certain state or action to be taken.

This can take the form of a warning, reminder or even advice to the user within a certain process.

The information provided should be easy to understand and easy to understand and complete.

The signal color for the Second Level is Green. This color should be used as a signifier for anything that happens next to the current flow of working.

A good example of this is a loading bar:

40

Banners Banners are used within the interface for errors, warnings, reminders or approvals.

The color Red is used for a errors.

The color Orange is used for warnings and reminders.

The color Green is used for reminders and approval.

41

User Interface Guidelines v1.2

Tone of Voice The Tone of Voice is vitally important within the UI as it defines not only what is read, but also the naming and taxonomy of the application.

Choosing the right naming and title are vitally important for the usability of the interface.

Even when a user is confronted with the wrong action, the tone of voice should be: a. Positive b. Helpful c. Short

42

Sorry! You need to save before leaving this page.

Almost! You just need to fill in your address.

Oops! Your file has expired.

Forgot? Click here to ask for a new password.

43

User Interface Guidelines v1.2

Image Style The ADAM Image style represents how ADAM is becoming part of everyday life through its interface.

1. Placeholders To be used as generic images where necessary.

44

2. Digital Interaction To be used when explaining a certain application or way of working.

45

User Interface Guidelines v1.2

Templates Login Page

46

47

User Interface Guidelines v1.2

Templates ADAM Central

48

49

User Interface Guidelines v1.2

Templates

Top Banner & Sub-navigation PSD files of all templates are available in the ADAM Download Center.

50

51

User Interface Guidelines v1.2

Templates Error Screen

52

53

User Interface Guidelines v1.2

Templates Assets

54

55

User Interface Guidelines v1.2

Templates Asset Overview

56

57

User Interface Guidelines v1.0

ADAM Europe

ADAM USA

ADAM Software

ADAM Software US Inc

Kortrijksesteenweg 1108a

1515 Broadway

BE-9051 Ghent

New York, NY 10036

Belgium

United States

Phone: +32 9 381 63 36

Phone: +1 212 520 1028

Fax: +32 9 381 63 46

58

We can only make a great User Interface with your feedback. Please be critical and send us your requests and ideas!