odyssey design & branding · design branding style guide v.1 17 // 48 section four color the...

Design & Branding Style Guide V.1

// 481

DESIGN & BRANDINGSTYLE GUIDE

ODYSSEY MIS

Marketing Ideas For Printers

MarketingIdeasForPrinters.com

[email protected]

MI4P

|

(800) 736-0688

5990 14th Street South

Fargo, North Dakota 58104

|


// 482

MI4PODYSSEY MIS

Design & Branding Style Guide

V.1


// 484

MI4P

SECTION ONEIntroduction


// 485

SECTION ONEIntroduction

THE DESIGN GUIDELINES

The following booklet describes the visual identity of Odyssey MIS, created by Marketing Ideas For Printers. This includes logos, typography, color, and graphics.

Presenting a consistent, and well designed, interface builds brand integrity and trust with our clients. We are committed to always giving our clients high quality, consistent, and stylish design, without sacrificing functionality.

All elements presented within this document are valued company assets, and we are responsible for ensuring brand integrity throughout future deisgn by eliminating incorrect usage of any brand materials.


// 486

MI4P

SECTION TWOLogo Application


// 487

SECTION TWO

Application on a background

The Odyssey logo is displayed in a number

of ways, including the full logo, logo symbol,

and logo text. Clearspace is vital to the visual

integrity of the Odyssey logo, therefore

the clearspace rules must be taken into

consideration during the design, and coding,

phases.

ODYSSEY

Clearspace full logo

Clearspace logo symbol

Clearspace logo text

ODYSSEY10 px

10 px

10 px

10 px

10 px

10 px

ODYSSEY10 px

10 px


// 488

Application on a background

A B C D

ODYSSEY ODYSSEY ODYSSEY ODYSSEY

Minimal Logo Sizefull logo

Minimal Logo Sizelogo symbol

Minimal Logo Sizelogo text

The full Odyssey logo must be at least 115 pixels on the long edge, and 30 pixels on the short edge (before clearspace has been added).

The Odyssey logo symbol must be at least 30 pixels on the long edge, and 30 pixels on the short edge (before clearspace has been added).

The Odyssey text logo must be at least 77pixels on the long edge, and 14 pixels on the short edge (before clearspace has been added).

ODYSSEY77px

14px

ODYSSEY115px

30px

30px

30px


// 489

Application // Incorrect usage

DThe Odyssey logo must be dispalyed in

accordance to the Application usage guide

shown in the previous pages. Deviating from

that guide is prohibited, and a violation of

the Copyright. Below are a few examples of

incorrect usage of the Odyssey logo:

ODYSSEY

ODYSSEY

ODYSSEY

ODYSSEY

ODYSSEY

ODYSSEY

ODYSSEY


// 4810

MI4P

SECTION THREETypography


// 4811

SECTION THREE

Typography // Fonts

Raleway

Odyssey features two distinct fonts: Raleway,

and FontAwesome, both fonts can be found

on the MI4P server.

This section will go into detail about how those

fonts are utilized to create the look and feel of

Odyssey’s typography.

Raleway is a unique font because of it’s shoulders, tails, and stems. It’s legible at very small sizes, and it has multiple weights.

Light

Regular

Italic

Medium

SemiBold

Bold

ExtraBold

Medium Italic

SemiBold Italic

Bold Italic

ExtraBold Italic

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0












// 4812

Typography // Fonts

FontAwesome

FontAwesome is used for many of the icons represented in Odyssey, and it can be downloaded for free here:

http://fontawesome.com

Regular � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � � � � � � �

� � � � � � � � � � � � � � � �


// 4813

Typography // Spacing // Line Height // Color // Font Size // On Light

#939597

#939597

#939597

#58585b

#58585b

#58585b

#58585b

#58585b

#58585b

#58585b

Light ItalicsSize: 8Line Height: 12

LightSize: 10Line Height: 14

MediumSize: 10Line Height: 14

RegularSize: 12Line Height: 16


SemiBoldSize: 12Line Height: 16





The quick brown fox jumps over the lazy dog.










Fine Print

Small Paragraph

Small Title

Paragraph

H6

H5

H4

H3

H2

H1


// 4814

Typography // Spacing // Line Height // Color // Font Size // On Dark

#939597

#d1d2d4

#d1d2d4

#d1d2d4

#d1d2d4

#d1d2d4

#d1d2d4

#d1d2d4

#f7f8f8

#f7f8f8

Light ItalicsSize: 8Line Height: 12


MediumSize: 10Line Height: 14



SemiBoldSize: 12Line Height: 16















Fine Print

Small Paragraph

Small Title

Paragraph

H6

H5

H4

H3

H2

H1


// 4815

Typography // Incorrect Usage

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt ac-cumsan varius. Mauris pretium nulla tellus, nec efficitur magna lacinia eget. Phasellus blandit finibus ex sit amet sollicitudin. Etiam quis consequat lectus. Nulla at nunc nec libero dignissim mollis sed nec mi. Aliquam mattis nisi non ultricies maximus. Aliquam eu consectetur nunc.

LOREM IPSUM DOLOR SIT AMET, CONSEC-TETUR ADIPISCING ELIT. NULLA TINCIDUNT ACCUMSAN VARIUS. MAURIS PRETIUM NUL-LA TELLUS, NEC EFFICITUR MAGNA LACINIA

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt ac-

cumsan varius. Mauris pretium nulla tellus, nec efficitur magna lacinia eget.

Phasellus blandit finibus ex sit amet sollicitudin. Etiam quis consequat lectus.

Nulla at nunc nec libero dignissim mollis sed nec mi. Aliquam mattis nisi non

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt accumsan varius. Mauris pretium nulla tellus, nec efficitur magna lacinia eget. Phasellus blandit finibus ex sit amet sollicitudin. Etiam quis consequat lectus. Nulla at nunc nec libero dignissim mollis sed nec mi. Aliquam mattis nisi non ultricies maximus. Aliquam eu consectetur nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt

accumsan varius. Mauris pretium nulla tellus, nec efficitur magna lacinia

eget. Phasellus blandit finibus ex sit amet sollicitudin. Etiam quis consequat

lectus. Nulla at nunc nec libero dignissim mollis sed nec mi. Aliquam mattis

nisi non ultricies maximus. Aliquam eu consectetur nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt

accumsan varius. Mauris pretium nulla tellus, nec efficitur magna lacinia

eget. Phasellus blandit finibus ex sit amet sollicitudin. Etiam quis consequat

lectus. Nulla at nunc nec libero dignissim mollis sed nec mi. Aliquam mattis

nisi non ultricies maximus. Aliquam eu consectetur nunc.

Spacing & Line Height

Color On Light & Dark BKG

Spacing and line height are vital to readability. Using these tools incorrectly will result in poorly designed paragraphs, headlines, and other page components. Spacing between letters should always be set to 0, unless text falls onto a white background. Then spacing between letters may be set to 10px-20px.

Text appears on a number of different background colors within Odyssey. A good rule of thumb, to make sure that the font colors are visible on these backgrounds, is to make sure the CMYK value is at least 10% higher or lower than the current background color.

For example: 0, 0, 0, 0 (background)0, 0, 0, 10 (font)


// 4816

MI4P

SECTION FOURColors


// 4817

SECTION FOUR

Color

The colors of Odyssey are derived from the

brand identity of MI4P, because Odyssey

functions as as extension of MI4P. There

are two naming schemes present, one for

the color and one for grey scale. The color

swatches are represented by a numerical

naming system, while the grey watches are

represented by levels.

Brand Primary#59a2c8

Brand Secondary#78cdd2

Brand Tertiary#74aeb2

This color is used for: Link colors, icon colors, some sub headlines. This color also represents Email Marketing.

This color is used for: Icon colors, This color also represents Social Media.

This color is used for: Icon colors, This color also represents Direct Mail.

10%

10%

10%

50%

50%

50%

20%

20%

20%

80%

80%

80%

HEX: #59a2c8

CMYK: 62, 23, 10, 0

RGB: 89, 162, 200

HEX: #78cdd2

CMYK: 50, 0, 19, 0

RGB: 120, 205, 210

HEX: #74aeb2

CMYK: 56, 17, 29, 0

RGB: 116, 174, 178


// 4818

Color

Brand Quaternary#b3d450

Brand Primary

Brand CTA

Brand Tertiary

Brand Secondary

Brand Danger

Brand Quaternary

Brand CTA#737024

Brand Danger#be1e2d

This color is used for: Customers, icon colors, This color also represents Websites.

This color is used for: CTA, and icon colors.

This color is used for: Warnings requiring immediate attention.

10%

10%

10%

50%

50%

50%

20%

20%

20%

80%

80%

80%

HEX: #b3d450

CMYK: 34, 0, 87, 0

RGB: 179, 212, 80

HEX: #737024

CMYK: 0, 70, 98, 0

RGB: 243, 112, 36

HEX: #be1e2d

CMYK: 15, 100, 90, 10

RGB: 190, 30, 45


// 4819

Color // Grey

Level 1#f7f8f8

Level 2#5f1f1f2

Level 3#e6e7e8

Level 4#d1d2d4

This color is used for: Alternate backgrounds, line item separators, text boxes, and text on a dark background.

This color is used for: Primary backgrounds, line item separators, text boxes, and text on a dark background.

This color is used for: Panels, uneditable sections, text, and other sections including the Hamburger Menu.

This color is used for: Inactive icons on light backgrounds,

10%

10%

10%

10%

50%

50%

50%

50%

20%

20%

20%

20%

80%

80%

80%

80%

HEX: #f7f8f8

CMYK: 0, 0, 0, 2

RGB: 248, 248, 248

HEX: #f1f1f2

CMYK: 0, 0, 0, 5

RGB: 241, 242, 242

HEX: #e6e7e8

CMYK: 0, 0, 0, 10

RGB: 230 231, 232

HEX: #d1d2d4

CMYK: 0, 0, 0, 20

RGB: 209, 211, 212


// 4820

Color // Grey

Level 5#bbbcdo

Level 6#939597

Level 7#808284

Level 8#585856

This color is used for: H4 headlines, and inactive buttons on a light background.

This color is used for: Fine print, small titles, small paragraphs, and inactive text/icons on a dark background.

This color is used for: Menus, secondary text colors.

This color is used for: Title bars, overlays, and is the default text color.

10%

10%

10%

10%

50%

50%

50%

50%

20%

20%

20%

20%

80%

80%

80%

80%

HEX: #bbbcdo

CMYK: 0, 0, 0, 30

RGB: 188, 190, 192

HEX: #939597

CMYK: 0, 0, 0, 50

RGB: 147, 149, 152

HEX: #808284

CMYK: 0, 0, 0, 60

RGB: 128, 130, 133

HEX: #585856

CMYK: 0, 0, 0, 80

RGB: 88, 89, 91


// 4821

White#ffffff

This color is used very sparingly throughout Odyssey.

10%

30%

30%

20%

HEX: #ffffff

CMYK: 0, 0, 0, 0

RGB: 255, 255, 255

Brand Primary Level 1

Brand CTA Level 5

Brand Tertiary Level 3

Brand Secondary Level 2

Brand Danger Level 6

Level 7

Level 8

White

Brand Quaternary Level 4

Color // Grey


// 4822

MI4P

SECTION FIVEPage components and colors


// 4823

Page Components // Colors

Odyssey is a very complex system, which

requires a more indepth look at colors. The

next few pages will give more information

specifically regarding page components and

their place within Odyssey.

Title BarLevel 8

Menu // Menu HoverLevel 7 // Level 6

Default background color.

Default title bar color, used for the header of Odyssey.

Menu and hover colors are very similar, so as to just slightly vary in appearance.

Background (BKG)Level 2

10%

50%

20%

80%

HEX: #f1f1f2

CMYK: 0, 0, 0, 5

RGB: 241, 242, 242

10%

50%

20%

80%

HEX: #585856

CMYK: 0, 0, 0, 80

RGB: 88, 89, 91

HEX: #808284

CMYK: 0, 0, 0, 60

RGB: 128, 130, 133

HEX: #939597

CMYK: 0, 0, 0, 50

RGB: 147, 149, 152


// 4824


Secondary BKGLevel 3

Alternate background color.

10%

50%

20%

80%

HEX: #e6e7e8

CMYK: 0, 0, 0, 10

RGB: 230 231, 232

White#ffffff

Used for text boxes, and some text on dark backgrounds such as title headers.

10%

30%

30%

20%

HEX: #ffffff

CMYK: 0, 0, 0, 0

RGB: 255, 255, 255

Inactive ButtonLevel 4

Buttons that function, but are not CTA related.

10%

50%

20%

80%

HEX: #bbbcdo

CMYK: 0, 0, 0, 30

RGB: 188, 190, 192

Active ButtonBrand CTA

Buttons that are a call to action.

10%

50%

20%

80%

HEX: #737024

CMYK: 0, 70, 98, 0

RGB: 243, 112, 36


// 4825


Action Required- NowBrand Danger

LinkBrand Primary

Active Menu ItemLevel 7

Line Item SeparatorLevel 1

Warnings that require immediate attention. For example: Tasks that need to be scheduled.

Standard link color.

Menu item that’s active, such as a task container.

If there are multiple line items, use this color to help distinguish one line from another.

10%

50%

20%

80%

HEX: #be1e2d

CMYK: 15, 100, 90, 10

RGB: 190, 30, 45

10%

50%

20%

80%

HEX: #59a2c8

CMYK: 62, 23, 10, 0

RGB: 89, 162, 200

10%

50%

20%

80%

HEX: #808284

CMYK: 0, 0, 0, 60

RGB: 128, 130, 133

10%

50%

20%

80%

HEX: #f7f8f8

CMYK: 0, 0, 0, 2

RGB: 248, 248, 248


// 4826


NotificationBrand CTA

Notification OutlineBrand CTA (Badge Only)

Notification NumberBrand CTA (Badge Only)

Notification WarningBrand CTA

Notifications through Odyssey will show on the top right corner as a pop up, and as an icon.

The Notification badge is outlined with a thin white border, usually 1-2px in width.

Numbers showing up in the Notification badge icon are white.

Notifications as a result of immediate action required are shown in red. For example: an invoice that’s overdue, or a failed payment.

10%

50%

20%

80%

HEX: #737024

CMYK: 0, 70, 98, 0

RGB: 243, 112, 36

10%

10%

30%

30%

30%

30%

20%

20%

HEX: #ffffff

CMYK: 0, 0, 0, 0

RGB: 255, 255, 255

HEX: #ffffff

CMYK: 0, 0, 0, 0

RGB: 255, 255, 255

10%

50%

20%

80%

HEX: #be1e2d

CMYK: 15, 100, 90, 10

RGB: 190, 30, 45


// 4827

Notification- SuccessBrand Danger

Modal -Title BarLevel 3

Modal -BKGLevel 2

Modal -SeparatorLevel 1

Notifications showing a successful update are shown in green. For example: an invoice that’s just been paid.

Modals show up throughout Odyssey for different functions, however they should all use this same color.

This is the default modal background color.

Information needing to be separated within the modal should be contained using this color.

10%

50%

20%

80%

HEX: #b3d450

CMYK: 34, 0, 87, 0

RGB: 179, 212, 80


10%

50%

20%

80%

HEX: #f1f1f2

CMYK: 0, 0, 0, 5

RGB: 241, 242, 242

10%

50%

20%

80%

HEX: #f7f8f8

CMYK: 0, 0, 0, 2

RGB: 248, 248, 248

10%

50%

20%

80%

HEX: #e6e7e8

CMYK: 0, 0, 0, 10

RGB: 230 231, 232


// 4828

ODYSSEY

MY SCHEDULE1

FILE PREP COVER PRINT COVERMY SCHEDULEY1

PRINT COVER

Level 8

Level 6

Page Components // Samples

Below are some visual samples of how

the components of Odyssey should come

together to create larger elements, such as

a title bar, a task container, etc. When new

components need to be assembled, use this

guide as a reference to see current structures.

HELP �

ODYSSEY MY SCHEDULE � Jane Quittschreiber

MY SCHEDULE1

PROOF COVER PRINT COVERMY SCHEDULEY1

HELP�

Complete Task

Pause Task

Task Conversations

Task Details

Task Event Log

Proofs

ABOUT THIS TASK

�

�

�

�

�

�

Add comments

This comment will be marked Public and is viewable to everyone.

UPDATE PROGRESS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend leo quis est ornare,

vehicula. Duis vel metus viverra, gravida mi id, posuere sapien. Aliquam ac sem nibh.

Who would you like to notify?

�

�

�

�

�

� �

Jane Quittschreiber

Mary Jones

Paul Anderson

Chuck Norris

Don Smith

Baxter Davis

Day Man

� Brenda WhiteBW�

� Tom Johnson

Team Members �

�

�

�

�

�

Rob White

Max Smith

Robby Miller

Tommy Jones

Paul Bunyon

RW

MS

RM

TJ

PB

Customers �

Already in this conversation:

Update Percent Complete: %

Time alotted for this task: 2 hours 30 minutes

90

PRINT COVER

UPDATE PROGRESS 90%White Retirement > PROOF COVER

Level 7

Level 6

Brand CTALevel 3

Level 1

White

Level 2

Level 3


// 4829

When there is an active task container, or

modal, the page beneath it should be hidden

with an overlay like in the above example.

Page Components // Samples

HELP fl

ODYSSEY DASHBOARD Jane Quittschreiber

1 HELP fl Paper Calculator

You’ve been assigned some tasks

Brand CTALevel 8

HELP

ODYSSEY CREATE A CALCULATOR Jane Quittschreiber

� CALCULATORS1

HELP

Heidelberg Plate Charge =Heidelberg Plate Charge =

=

=

�

Plates Required�

Plates Required

��

Per Plate Charge

Per Plate Charge

Signatures

Signatures

Determined by Acme Printing



Obtained from Order Form

� # of Ink Colors

# of Ink Colors

� Sides

Sides Obtained from Order Form

÷ Work & Turn

2

W&T

# Up÷

# Up

�

=

=

=

�

$ Heidelberg Plate Cost

�

Prepress Markup� ) �

$ Prepress Labor�

Plate Time�(( )$3.16

1.6

Heidelberg Plate Cost

Prepress Markup

Prepress Labor

Plate Time

=

=

Data Unknown

Obtained from collaboration with customer

Order form data


System variable

Price list

Calculator

Task time recorded

ADD WORK & TURN

ADD WORK & TUMBLE

+

+

Heidelberg Plate Charge Calculator��

# of decimals: 2 �� | Rounding: Always Up | Number Labels: None

Data Sources

Standard Always Up Always Down

DELETE

�DETAILS

�CONTAINER

Job Status63% Completed

Job Details

Tasks

Retirement Booklet

Order ID

Customer

Company

Sales Rep

Quantity

Order Price

3555592

� Brenda White

White CFP

� Jane Quittschreiber

100

$375

COVER

Prepress

Preflight Customer-supplied artwork

File Prep

Equipment - Design1

Equipment - Epson Stylus Pro 7900 Proofer

Equipment - Glunz & Jensen PlateWriter 2000

Paper - 80# Matte CoverInk - CMYK

Equipment Heidelberg SM52 Full-Color

Prepress


File Prep

Bindery

Fold

Trim

Equipment - Duplo 615 Digital Creaser/Trimmer : 8.5 x 11 (Finished Flat Size) to 5.5 x 8.5 (Finished size)

Equipment - Stahl B20 Folder : 8.5 x 11 (Finished Flat Size) to 5.5 x 8.5 (Finished size)

Proof

Proof (PDF)

Prepress

Make Plates

Press

Print Cover

Proof revisions (complimentary)

Proof revision (billable)


INTERIOR PAGES

�

�

�

�

�

�

�

�

�

�

�

ORDER 35555592

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

Tasks are currently unassigned. Schedule Tasks

3

12/19 Tasks Completed

MAKE PLATES

White Retirement > File Prep > MAKE PLATES

Complete Task

START Task

Task Conversations

Task Details

Task Event Log

Proofs

Team Members/Equip

Schedule Task

ABOUT THIS TASK

UPDATE PROGRESS 0%

�

�

�

�

�

�

�

�

Calculators• • Materials

Send Proof• • Approve/Reject

What calculator would you like to assign to this task?

ASSIGN CALCULATOR

Plates Required

Plates Required

Heidelberg Plate Charge Per Plate Charge

�

=

=

�

Signatures Ink Color

�

Sides W&T

÷# Up

÷

( ) ( )

$119.68 4

2 2

$29.92

Per Plate Charge = ��

Per Plate Cost

PerpessMarkup

�

Prepress Labor

Plate Time

2 2 2

$8.08 1.6 $17 1

Heidelberg Plate Charge | Heidelberg Plate Charge based on plates required... | Hide Calculator

Page OverlayLevel 7


// 4830

MI4P

SECTION SIXIconography


// 4831

Iconography and usage

CustomersBrand Quaternary

Team MembersLevel 5

Expand // ShrinkLevel 5

Close // DeleteLevel 5

Customers have three different views including, an icon, a name badge (when no image is available), and a badge with an image.

Team Members have three different views including, an icon, a name badge (when no image is available), and a badge with an image.

Used in areas of Odyssey to help expand and reduce the amout of information being displayed, i.e. the workflow.

Used throughout Odyssey to indicate when something can be deleted or closed.

�

�

� �

� �

TJ

JQ JQ


// 4832


SearchLevel 5

ScrollLevel 5

CommentsLevel 5, Brand CTA

CalendarLevel 5

Primary search icon used in Odyssey.

Used to navigate between sections of information, or between icons.

The CTA color indicates when a message is received, but has not been read yet. The greyscale outlined version indicates past conversations.

This icon is used for anything dealign with the calendar functions.

�

� �

� � � �

�


// 4833


DetailsLevel 5

LogLevel 5

Add NewLevel 5

OrdersLevel 5

Generally displayed within the task container.

Generally displayed within the task container.

All add new functions that are in a menu utilize this icon.

This icon is used to as a starting point to view multiple orders.

�

�

�

�


// 4834


SettingsLevel 5

TeamLevel 5

DialogLevel 5, Brand CTA

WorkflowLevel 5

Adjustments throughout Odyssey should be identified by this icon.

Multiple team members should be identified using this icon. For example: Entrance point to view all team members.

Splash screen icon used to indicate the dialog area.

Splash screen icon used to indicate the workflow area.

�

�

�


// 4835


Customers (Main)Brand Quaternary

BookmarkLevel 5

ScheduleLevel 5

CalculatorLevel 5

Multiple customers should be identified using this icon. For example: Entrance point to view all customers.

Icon indicating favorited areas of Odyssey for quick access.

Icon indicating quick access to scheduled items.

Icon indicating all calculator functions. For example: Manage calculators, create new calculator, etc.

�

�

�

�

�

�


// 4836


InventoryLevel 5

SystemLevel 5

ReportsLevel 5, Brand CTA

Accounting // P.O.SLevel 5

Icon indicating entry to the inventory area.

Icon indicating entry to the system area.

Icon indicating entry to the reporting area.

Icon indicating entry to the accounting and point of sale area.

�

�

�

� �


// 4837


VendorsLevel 5

MarketingLevel 5

EditLevel 5

Icon indicating entry to the vendor area.

Icon indicating access to marketing materials.

Icon indicating ability to edit a specific area or section.

�

�

�

�

�

�

�

�

�

�


// 4838

MI4P

SECTION SEVENElements and visual samples


// 4839

Elements and visuals

Header & Menu Bar

Splash Screen Layout

Header & Menu Bar(with items)

Splash Screen(Drag and Drop Menu)

Typical header and menu setup for the start of Odyssey.

Multi-level menu items make it simple for users to select their own featured splash screen.

Typical header style with active menu bar items.

This menu is part of a multi-level system to help make navaigating Odyssey easy and fun.

HELP fl


1 HELP fl

ODYSSEY

MY SCHEDULE1

FILE PREP COVER PRINT COVERMY SCHEDULEY1

PRINT COVER

DIALOG

Email

New Messages

All Conversations

�1

1

CREATE NEWWORKFLOW

��Work in progress

Estimates requested

Estimates needing file prep

SCHEDULE

�Link

Link

Link

CUSTOMERS

�By Name

By Branch

By Company

CALCULATORS

�Create New

Manage Calculators

System Variables

Customer

Job

Estimate

8

4

4

MARKETINGPOINT OF SALE

�INVENTORYORDERS TEAM

REPORTSSYSTEM

�� SETTINGS

�

Filter by...

JOB NUMBER DESCRIPTION CONTACT (COMPANY : BRANCH)

16044760

123454351

23456234

BOOKLET

BUSINESS CARDS

CALENDAR

WHITE RETIREMENT : NURSING

TREZIO : NORTH SALES

BEARSDEN : MARKETING

RECENT ORDERS

HELP


1 HELP

DIALOG

Email

New Messages

All Conversations

�1

1

CREATE NEWWORKFLOW

��Work in progress

Estimates requested

Estimates needing file prep

SCHEDULE

�Link

Link

Link

CUSTOMERS

�By Name

By Branch

By Company

CALCULATORS

�Create New

Manage Calculators

System Variables

Customer

Job

Estimate

8

4

4

MARKETINGPOINT OF SALE

�INVENTORYORDERS TEAM

REPORTSSYSTEM

�� SETTINGS

�

Filter by...

JOB NUMBER DESCRIPTION CONTACT (COMPANY : BRANCH)

16044760

123454351

23456234

BOOKLET

BUSINESS CARDS

CALENDAR

WHITE RETIREMENT : NURSING

TREZIO : NORTH SALES

BEARSDEN : MARKETING

RECENT ORDERS

HELP


1 HELP


// 4840


Search, Help, and HB Menu

Menu Bar Account Display

Active Search(with items)

Notification(Popup and Icon)

The menu bar should always feature a help and search function. The HB menu only shows if additional information is available.

Should always feature a User badge and their full name with a drop down arrow.

When the search is activated, the icon should shoot off to the left, revealing an area with a type cursor. The color should shift to Level 8

Should always slide in from the left, and disappear after about 10-15 seconds.

HELP fl


1 HELP fl

HELP fl



HELP fl



HELP fl



You’ve been assigned some tasks


// 4841


Task Container

Menu

Shows up for activated tasks,

Menu items feature an array of colors, and icons. Sub-header items like Pause Task, Complete Task, etc. should be indented slightly to indicate which section they belong to.

HELP �


MY SCHEDULE1


HELP�

Complete Task

Pause Task

Task Conversations

Task Details

Task Event Log

Proofs

ABOUT THIS TASK

�

�

�

�

�

�

Add comments


UPDATE PROGRESS




�

�

�

�

�

� �

Jane Quittschreiber

Mary Jones

Paul Anderson

Chuck Norris

Don Smith

Baxter Davis

Day Man


� Tom Johnson

Team Members �

�

�

�

�

�

Rob White

Max Smith

Robby Miller

Tommy Jones

Paul Bunyon

RW

MS

RM

TJ

PB

Customers �


White Retirement > PROOF COVER



90

PRINT COVER


HELP �


MY SCHEDULE1


HELP�

Complete Task

Pause Task

Task Conversations

Task Details

Task Event Log

Proofs

ABOUT THIS TASK

�

�

�

�

�

�

Add comments


UPDATE PROGRESS




�

�

�

�

�

� �

Jane Quittschreiber

Mary Jones

Paul Anderson

Chuck Norris

Don Smith

Baxter Davis

Day Man


� Tom Johnson

Team Members �

�

�

�

�

�

Rob White

Max Smith

Robby Miller

Tommy Jones

Paul Bunyon

RW

MS

RM

TJ

PB

Customers �





90

PRINT COVER


Level 2 // Text

Level 6 // Hover Color

Level 7 // Background

Level 4 // Icons

Level 1 // Icons


// 4842


SAMPLEcomponents

Task Container Title Bar

The task container features a bar that’s associated with the progress of a task. Color is indicated by colors set by the user.

HELP �


MY SCHEDULE1


HELP�

Complete Task

Pause Task

Task Conversations

Task Details

Task Event Log

Proofs

ABOUT THIS TASK

�

�

�

�

�

�

Add comments


UPDATE PROGRESS




�

�

�

�

�

� �

Jane Quittschreiber

Mary Jones

Paul Anderson

Chuck Norris

Don Smith

Baxter Davis

Day Man


� Tom Johnson

Team Members �

�

�

�

�

�

Rob White

Max Smith

Robby Miller

Tommy Jones

Paul Bunyon

RW

MS

RM

TJ

PB

Customers �





90

PRINT COVER


HELP �


MY SCHEDULE1


HELP�

Complete Task

Pause Task

Task Conversations

Task Details

Task Event Log

Proofs

ABOUT THIS TASK

�

�

�

�

�

�

Add comments


UPDATE PROGRESS




�

�

�

�

�

� �

Jane Quittschreiber

Mary Jones

Paul Anderson

Chuck Norris

Don Smith

Baxter Davis

Day Man


� Tom Johnson

Team Members �

�

�

�

�

�

Rob White

Max Smith

Robby Miller

Tommy Jones

Paul Bunyon

RW

MS

RM

TJ

PB

Customers �




90

PRINT COVER


HELP �


MY SCHEDULE1


HELP�

Complete Task

Pause Task

Task Conversations

Task Details

Task Event Log

Proofs

ABOUT THIS TASK

�

�

�

�

�

�

Add comments


UPDATE PROGRESS




�

�

�

�

�

� �

Jane Quittschreiber

Mary Jones

Paul Anderson

Chuck Norris

Don Smith

Baxter Davis

Day Man


� Tom Johnson

Team Members �

�

�

�

�

�

Rob White

Max Smith

Robby Miller

Tommy Jones

Paul Bunyon

RW

MS

RM

TJ

PB

Customers �





90

PRINT COVER



// 4843


Workflow

Workflow

Hover Menu

The workflow is set up with a list view of all tasks associated with a specific job. Each line item has a menu bar associated with it that carries a set of functions. The green ball indicates which item is currently being worked on. The ball should grow and shrink, as if to pulsate.

The workflow also contains some job-specific details, that are displayed on the left side of the page. The red badge indicates a warning that there are unassigned tasks that require a next step by the user before they can be completed.

The hover menu will change per line item based on whether it’s a container or a task.

HELP


� CALCULATORS1

HELP


=

=

�

Plates Required�

Plates Required

��

Per Plate Charge

Per Plate Charge

Signatures

Signatures





� # of Ink Colors

# of Ink Colors

� Sides


÷ Work & Turn

2

W&T

# Up÷

# Up

�

=

=

=

�


�


$ Prepress Labor�


1.6


Prepress Markup

Prepress Labor

Plate Time

=

=

Data Unknown


Order form data


System variable

Price list

Calculator

Task time recorded

ADD WORK & TURN

ADD WORK & TUMBLE

+

+



Data Sources


DELETE

�DETAILS

�CONTAINER


Job Details

Tasks

Retirement Booklet

Order ID

Customer

Company

Sales Rep

Quantity

Order Price

3555592

� Brenda White

White CFP


100

$375

COVER

Prepress


File Prep

Equipment - Design1





Prepress


File Prep

Bindery

Fold

Trim



Proof

Proof (PDF)

Prepress

Make Plates

Press

Print Cover




INTERIOR PAGES

�

�

�

�

�

�

�

�

�

�

�

ORDER 35555592

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00


3


HELP


� CALCULATORS1

HELP


=

=

�

Plates Required�

Plates Required

��

Per Plate Charge

Per Plate Charge

Signatures

Signatures





� # of Ink Colors

# of Ink Colors

� Sides


÷ Work & Turn

2

W&T

# Up÷

# Up

�

=

=

=

�


�


$ Prepress Labor�


1.6


Prepress Markup

Prepress Labor

Plate Time

=

=

Data Unknown


Order form data


System variable

Price list

Calculator

Task time recorded

ADD WORK & TURN

ADD WORK & TUMBLE

+

+



Data Sources


DELETE

�DETAILS

�CONTAINER


Job Details

Tasks

Retirement Booklet

Order ID

Customer

Company

Sales Rep

Quantity

Order Price

3555592

� Brenda White

White CFP


100

$375

COVER

Prepress


File Prep

Equipment - Design1





Prepress


File Prep

Bindery

Fold

Trim



Proof

Proof (PDF)

Prepress

Make Plates

Press

Print Cover




INTERIOR PAGES

�

�

�

�

�

�

�

�

�

�

�

ORDER 35555592

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00


3


HELP


� CALCULATORS1

HELP


=

=

�

Plates Required�

Plates Required

��

Per Plate Charge

Per Plate Charge

Signatures

Signatures





� # of Ink Colors

# of Ink Colors

� Sides


÷ Work & Turn

2

W&T

# Up÷

# Up

�

=

=

=

�


�


$ Prepress Labor�


1.6


Prepress Markup

Prepress Labor

Plate Time

=

=

Data Unknown


Order form data


System variable

Price list

Calculator

Task time recorded

ADD WORK & TURN

ADD WORK & TUMBLE

+

+



Data Sources


DELETE

�DETAILS

�CONTAINER


Job Details

Tasks

Retirement Booklet

Order ID

Customer

Company

Sales Rep

Quantity

Order Price

3555592

� Brenda White

White CFP


100

$375

COVER

Prepress


File Prep

Equipment - Design1





Prepress


File Prep

Bindery

Fold

Trim



Proof

Proof (PDF)

Prepress

Make Plates

Press

Print Cover




INTERIOR PAGES

�

�

�

�

�

�

�

�

�

�

�

ORDER 35555592

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00


3



// 4844


SAMPLEcomponents

Calculator ViewTask Container

View of the assigning, and previewing, functions from the task container.

HELP


� CALCULATORS1

HELP


=

=

�

Plates Required�

Plates Required

��

Per Plate Charge

Per Plate Charge

Signatures

Signatures





� # of Ink Colors

# of Ink Colors

� Sides


÷ Work & Turn

2

W&T

# Up÷

# Up

�

=

=

=

�


�


$ Prepress Labor�


1.6


Prepress Markup

Prepress Labor

Plate Time

=

=

Data Unknown


Order form data


System variable

Price list

Calculator

Task time recorded

ADD WORK & TURN

ADD WORK & TUMBLE

+

+



Data Sources


DELETE

�DETAILS

�CONTAINER


Job Details

Tasks

Retirement Booklet

Order ID

Customer

Company

Sales Rep

Quantity

Order Price

3555592

� Brenda White

White CFP


100

$375

COVER

Prepress


File Prep

Equipment - Design1





Prepress


File Prep

Bindery

Fold

Trim



Proof

Proof (PDF)

Prepress

Make Plates

Press

Print Cover




INTERIOR PAGES

�

�

�

�

�

�

�

�

�

�

�

ORDER 35555592

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00

$25.00


3


MAKE PLATES

White Retirement > File Prep > MAKE PLATES

Complete Task

START Task

Task Conversations

Task Details

Task Event Log

Proofs

Team Members/Equip

Schedule Task

ABOUT THIS TASK

UPDATE PROGRESS 0%

�

�

�

�

�

�

�

�

Calculators• • Materials

Send Proof• • Approve/Reject

What calculator would you like to assign to this task?

ASSIGN CALCULATOR

Plates Required

Plates Required

Heidelberg Plate Charge Per Plate Charge

�

=

=

�

Signatures Ink Color

�

Sides W&T

÷# Up

÷

( ) ( )

$119.68 4

2 2

$29.92

Per Plate Charge = ��

Per Plate Cost

PerpessMarkup

�

Prepress Labor

Plate Time

2 2 2

$8.08 1.6 $17 1

Heidelberg Plate Charge | Heidelberg Plate Charge based on plates required... | Hide Calculator

HELP


� CALCULATORS1

HELP


=

=

�

Plates Required�

Plates Required

��

Per Plate Charge

Per Plate Charge

Signatures

Signatures





� # of Ink Colors

# of Ink Colors

� Sides


÷ Work & Turn

2

W&T

# Up÷

# Up

�

=

=

=

�


�


$ Prepress Labor�


1.6


Prepress Markup

Prepress Labor

Plate Time

=

=




Calculator Settings

What resources would you like to assign this calculator to?

ASSIGN RESOURCE

Heidelberg SM52HS

Heidelbe

Data Unknown


Order form data


System variable

Price list

Calculator

Task time recorded

ADD WORK & TURN

ADD WORK & TUMBLE

+

+

Data Sources

Add a short description about this calculator

Heidelberg Plate Charge based on plates required and per plate charge.

Keywords (separate keywords with a comma)

Lorem Ips

Plate Charge, Plate, Heidelberg, Make Plates, PrePress, Labor

�Lorem Ips � Lorem Ips � Lorem Ips �

Task Settings

�

�

�

�

�

� �

Lorem Ipsum

Dolor Sit Amet

Lorem Ipsum

Dolor Sit Amet

Lorem Ipsum

Dolor Sit Amet

Lorem Ipsum

�

�

�

�

�

� �

Lorem Ipsum

Dolor Sit Amet

Lorem Ipsum

Dolor Sit Amet

Lorem Ipsum

Dolor Sit Amet

Lorem Ipsum


// 4845


Accounts

Search Accounts

Info Closeup

The accounts section features a large amount of information, most importantly it allows the user to edit and update information quickly and easily.

The left and right sections of a page may contain searches and search results. The search drop down should let the user input text, and then the search should filter the results.

Information displayed on the accounts view.

ODYSSEY ACCOUNTS (CUSTOMER LIST) Jane Quittschreiber

� CUSTOMER ACCOUNTS � ADD ACCOUNT1

HELP HELP

Customer List Create a NewCustomer Account

Brenda White

Kathy Hayes

Dave Thompson

Jim Ralph

Paul Jones

Andrew Johnson

Amanda James

Bruce Mills

Timmy Thomas

Jimmy Harris

White Retirement

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

BW

KH

DT

JR

PJ

AJ

AJa

BM

TT

JH

Name � Company

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

Email

West

18th Street

South Carolina

North Dakota

45th

52nd

13th

North

South

East

Branch

� PREVIEW EDIT DELETE

Search... Filter by...

Social Media

� � � � �

Last Name

Email

Password

First Name

Work (888)-888-8888 Ext

Cell (888)-888-8888

CREATE CUSTOMER ACCOUNT

Brenda White

Kathy Hayes

Dave Thompson

Jim Ralph

Paul Jones

Andrew Johnson

Amanda James

Bruce Mills

Timmy Thomas

Jimmy Harris

Recently ViewedCustomer Accounts

ODYSSEY ACCOUNTS (EDIT) Jane Quittschreiber


HELP HELP

BW

KH

DT

JR

PJ

AJ

AJa

BM

TT

JH

Work In Progress

Document Library Items

BRENDA WHITEWHITE RETIREMENT

�

[email protected]

**********

Login

Password

Send a Password Reset Link

View/Edit Branch

View/Edit Company

800-867-5309

Primary Phone

701-864-3345

Cell Phone

123

Ext

Add new photo

BWADD NEW CUSTOMER ACCOUNT�

Search... Search Accounts...�

16044760

123454351

23456234

34567233

45678231

BOOKLET

BUSINESS CARDS

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

16042760

123434351

33456234

34567233

56778231

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

DESCRIPTIONID NUMBER

DESCRIPTIONORDER NUMBER

Company Administrator

No Yes

Account information

Name, Company, Branch, Email Address

Brenda White | White Retirement | Branch: West | [email protected] �

Address, Shipping, Billing, Phone

1234 Odyssey Lane, Fargo, ND, 58104 | Shipping Address: Yes | Billing Address: Yes | 800-867-5309 �

Social Media

�

Approvers

� Robert White | Owner �

� � � � �

Account Settings Updated!+

Account information





Social Media

�

Approvers


� � � � �



HELP HELP


Brenda White

Kathy Hayes

Dave Thompson

Jim Ralph

Paul Jones

Andrew Johnson

Amanda James

Bruce Mills

Timmy Thomas

Jimmy Harris

White Retirement

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

BW

KH

DT

JR

PJ

AJ

AJa

BM

TT

JH

Name � Company

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

Email

West

18th Street

South Carolina

North Dakota

45th

52nd

13th

North

South

East

Branch



Social Media

� � � � �

Last Name

Email

Password

First Name

Work (888)-888-8888 Ext

Cell (888)-888-8888


Brenda White

Kathy Hayes

Dave Thompson

Jim Ralph

Paul Jones

Andrew Johnson

Amanda James

Bruce Mills

Timmy Thomas

Jimmy Harris




HELP HELP

BW

KH

DT

JR

PJ

AJ

AJa

BM

TT

JH

Work In Progress



�

[email protected]

**********

Login

Password


View/Edit Branch

View/Edit Company

800-867-5309

Primary Phone

701-864-3345

Cell Phone

123

Ext

Add new photo



16044760

123454351

23456234

34567233

45678231

BOOKLET

BUSINESS CARDS

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

16042760

123434351

33456234

34567233

56778231

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM




No Yes

Account information





Social Media

�

Approvers


� � � � �


Account information





Social Media

�

Approvers


� � � � �



HELP HELP


Brenda White

Kathy Hayes

Dave Thompson

Jim Ralph

Paul Jones

Andrew Johnson

Amanda James

Bruce Mills

Timmy Thomas

Jimmy Harris

White Retirement

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

BW

KH

DT

JR

PJ

AJ

AJa

BM

TT

JH

Name � Company

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

Email

West

18th Street

South Carolina

North Dakota

45th

52nd

13th

North

South

East

Branch



Social Media

� � � � �

Last Name

Email

Password

First Name

Work (888)-888-8888 Ext

Cell (888)-888-8888


Brenda White

Kathy Hayes

Dave Thompson

Jim Ralph

Paul Jones

Andrew Johnson

Amanda James

Bruce Mills

Timmy Thomas

Jimmy Harris




HELP HELP

BW

KH

DT

JR

PJ

AJ

AJa

BM

TT

JH

Work In Progress



�

[email protected]

**********

Login

Password


View/Edit Branch

View/Edit Company

800-867-5309

Primary Phone

701-864-3345

Cell Phone

123

Ext

Add new photo



16044760

123454351

23456234

34567233

45678231

BOOKLET

BUSINESS CARDS

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

16042760

123434351

33456234

34567233

56778231

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM




No Yes

Account information





Social Media

�

Approvers


� � � � �


Account information





Social Media

�

Approvers


� � � � �


// 4846


// 4847


// 4848

DESIGN & BRANDINGSTYLE GUIDE

ODYSSEY MIS

Marketing Ideas For Printers

MarketingIdeasForPrinters.com

[email protected]

MI4P

|

(800) 736-0688

5990 14th Street South

Fargo, North Dakota 58104

|

odyssey design & branding · design branding style guide v.1 17 // 48 section four color the...

Documents