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
Preview
Create Task
Basket
Open in InDesign
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
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
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!