Design & Branding Style Guide V.1
// 481
DESIGN & BRANDINGSTYLE GUIDE
ODYSSEY MIS
Marketing Ideas For Printers
MarketingIdeasForPrinters.com
MI4P
|
(800) 736-0688
5990 14th Street South
Fargo, North Dakota 58104
|
Design & Branding Style Guide V.1
// 482
MI4PODYSSEY MIS
Design & Branding Style Guide
V.1
Design & Branding Style Guide V.1
// 483
ODYSSEY MIS
Table of Contents
DESIGN & BRANDING STYLE GUIDE
SECTION 1 | INTRODUCTION PAGE 4
SECTION 4 | COLORS PAGE 16
SECTION 7 | ELEMENTS AND VISUAL SAMPLES PAGE 38
SECTION 2 | LOGO APPLICATION (WEB) PAGE 6
SECTION 5 | PAGE COMPONENTS AND COLORS PAGE 22
SECTION 8 | TBD PAGE XX
SECTION 3 | TYPOGRAPHY PAGE 10
SECTION 6 | ICONOGRAPHY PAGE 30
SECTION 9 | TBD PAGE XX
SECTION 10 | TBD PAGE XX
Design & Branding Style Guide V.1
// 484
MI4P
SECTION ONEIntroduction
Design & Branding Style Guide V.1
// 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.
Design & Branding Style Guide V.1
// 486
MI4P
SECTION TWOLogo Application
Design & Branding Style Guide V.1
// 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
Design & Branding Style Guide V.1
// 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
Design & Branding Style Guide V.1
// 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
Design & Branding Style Guide V.1
// 4810
MI4P
SECTION THREETypography
Design & Branding Style Guide V.1
// 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
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
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
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
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
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
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
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
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
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
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
Design & Branding Style Guide V.1
// 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 � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � � � � � � �
� � � � � � � � � � � � � � � �
Design & Branding Style Guide V.1
// 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
RegularSize: 16Line Height: 20
SemiBoldSize: 12Line Height: 16
RegularSize: 14Line Height: 18
RegularSize: 18Line Height: 22
RegularSize: 24Line Height: 30
LightSize: 26Line Height: 32
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Fine Print
Small Paragraph
Small Title
Paragraph
H6
H5
H4
H3
H2
H1
Design & Branding Style Guide V.1
// 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
LightSize: 10Line Height: 14
MediumSize: 10Line Height: 14
RegularSize: 12Line Height: 16
RegularSize: 16Line Height: 20
SemiBoldSize: 12Line Height: 16
RegularSize: 14Line Height: 18
RegularSize: 18Line Height: 22
RegularSize: 24Line Height: 30
LightSize: 26Line Height: 32
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Fine Print
Small Paragraph
Small Title
Paragraph
H6
H5
H4
H3
H2
H1
Design & Branding Style Guide V.1
// 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)
Design & Branding Style Guide V.1
// 4816
MI4P
SECTION FOURColors
Design & Branding Style Guide V.1
// 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
Design & Branding Style Guide V.1
// 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
Design & Branding Style Guide V.1
// 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
Design & Branding Style Guide V.1
// 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
Design & Branding Style Guide V.1
// 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
Design & Branding Style Guide V.1
// 4822
MI4P
SECTION FIVEPage components and colors
Design & Branding Style Guide V.1
// 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
Design & Branding Style Guide V.1
// 4824
Page Components // Colors
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
Design & Branding Style Guide V.1
// 4825
Page Components // Colors
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
Design & Branding Style Guide V.1
// 4826
Page Components // Colors
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
Design & Branding Style Guide V.1
// 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
Page Components // Colors
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
Design & Branding Style Guide V.1
// 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
Design & Branding Style Guide V.1
// 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
Determined by Acme Printing
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
Determined by Acme Printing
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
Preflight Customer-supplied artwork
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)
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
Design & Branding Style Guide V.1
// 4830
MI4P
SECTION SIXIconography
Design & Branding Style Guide V.1
// 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
Design & Branding Style Guide V.1
// 4832
Iconography and usage
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.
�
� �
� � � �
�
Design & Branding Style Guide V.1
// 4833
Iconography and usage
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.
�
�
�
�
Design & Branding Style Guide V.1
// 4834
Iconography and usage
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.
�
�
�
Design & Branding Style Guide V.1
// 4835
Iconography and usage
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.
�
�
�
�
�
�
Design & Branding Style Guide V.1
// 4836
Iconography and usage
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.
�
�
�
� �
Design & Branding Style Guide V.1
// 4837
Iconography and usage
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.
�
�
�
�
�
�
�
�
�
�
Design & Branding Style Guide V.1
// 4838
MI4P
SECTION SEVENElements and visual samples
Design & Branding Style Guide V.1
// 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
ODYSSEY DASHBOARD Jane Quittschreiber
1 HELP fl
ODYSSEY
MY SCHEDULE1
FILE PREP COVER PRINT COVERMY SCHEDULEY1
PRINT COVER
DIALOG
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
ODYSSEY DASHBOARD Jane Quittschreiber
1 HELP
DIALOG
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
ODYSSEY DASHBOARD Jane Quittschreiber
1 HELP
Design & Branding Style Guide V.1
// 4840
Elements and visuals
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
ODYSSEY DASHBOARD Jane Quittschreiber
1 HELP fl
HELP fl
ODYSSEY DASHBOARD Jane Quittschreiber
1 HELP fl Paper Calculator
HELP fl
ODYSSEY DASHBOARD Jane Quittschreiber
1 HELP fl Paper Calculator
HELP fl
ODYSSEY DASHBOARD Jane Quittschreiber
1 HELP fl Paper Calculator
You’ve been assigned some tasks
Design & Branding Style Guide V.1
// 4841
Elements and visuals
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 �
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:
White Retirement > PROOF COVER
Update Percent Complete: %
Time alotted for this task: 2 hours 30 minutes
90
PRINT COVER
UPDATE PROGRESS 90%White Retirement > PROOF COVER
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:
White Retirement > PROOF COVER
Update Percent Complete: %
Time alotted for this task: 2 hours 30 minutes
90
PRINT COVER
UPDATE PROGRESS 90%White Retirement > PROOF COVER
Level 2 // Text
Level 6 // Hover Color
Level 7 // Background
Level 4 // Icons
Level 1 // Icons
Design & Branding Style Guide V.1
// 4842
Elements and visuals
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 �
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:
White Retirement > PROOF COVER
Update Percent Complete: %
Time alotted for this task: 2 hours 30 minutes
90
PRINT COVER
UPDATE PROGRESS 90%White Retirement > PROOF COVER
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
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:
White Retirement > PROOF COVER
Update Percent Complete: %
Time alotted for this task: 2 hours 30 minutes
90
PRINT COVER
UPDATE PROGRESS 90%White Retirement > PROOF COVER
Design & Branding Style Guide V.1
// 4843
Elements and visuals
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
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
Determined by Acme Printing
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
Determined by Acme Printing
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
Preflight Customer-supplied artwork
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)
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
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
Determined by Acme Printing
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
Determined by Acme Printing
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
Preflight Customer-supplied artwork
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)
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
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
Determined by Acme Printing
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
Determined by Acme Printing
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
Preflight Customer-supplied artwork
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)
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
Design & Branding Style Guide V.1
// 4844
Elements and visuals
SAMPLEcomponents
Calculator ViewTask Container
View of the assigning, and previewing, functions from the task container.
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
Determined by Acme Printing
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
Determined by Acme Printing
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
Preflight Customer-supplied artwork
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)
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
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
Determined by Acme Printing
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
=
=
Heidelberg Plate Charge Calculator��
# of decimals: 2 �� | Rounding: Always Up | Number Labels: None
Standard Always Up Always Down
Calculator Settings
What resources would you like to assign this calculator to?
ASSIGN RESOURCE
Heidelberg SM52HS
Heidelbe
Data Unknown
Obtained from collaboration with customer
Order form data
Determined by Acme Printing
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
Design & Branding Style Guide V.1
// 4845
Elements and visuals
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
West
18th Street
South Carolina
North Dakota
45th
52nd
13th
North
South
East
Branch
� PREVIEW EDIT DELETE
Search... Filter by...
Social Media
� � � � �
Last Name
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
� CUSTOMER ACCOUNTS � ADD ACCOUNT2
HELP HELP
BW
KH
DT
JR
PJ
AJ
AJa
BM
TT
JH
Work In Progress
Document Library Items
BRENDA WHITEWHITE RETIREMENT
�
**********
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
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 �
� � � � �
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
West
18th Street
South Carolina
North Dakota
45th
52nd
13th
North
South
East
Branch
� PREVIEW EDIT DELETE
Search... Filter by...
Social Media
� � � � �
Last Name
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
� CUSTOMER ACCOUNTS � ADD ACCOUNT2
HELP HELP
BW
KH
DT
JR
PJ
AJ
AJa
BM
TT
JH
Work In Progress
Document Library Items
BRENDA WHITEWHITE RETIREMENT
�
**********
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
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 �
� � � � �
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
West
18th Street
South Carolina
North Dakota
45th
52nd
13th
North
South
East
Branch
� PREVIEW EDIT DELETE
Search... Filter by...
Social Media
� � � � �
Last Name
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
� CUSTOMER ACCOUNTS � ADD ACCOUNT2
HELP HELP
BW
KH
DT
JR
PJ
AJ
AJa
BM
TT
JH
Work In Progress
Document Library Items
BRENDA WHITEWHITE RETIREMENT
�
**********
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
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 �
� � � � �
Design & Branding Style Guide V.1
// 4846
Design & Branding Style Guide V.1
// 4847
Design & Branding Style Guide V.1
// 4848
DESIGN & BRANDINGSTYLE GUIDE
ODYSSEY MIS
Marketing Ideas For Printers
MarketingIdeasForPrinters.com
MI4P
|
(800) 736-0688
5990 14th Street South
Fargo, North Dakota 58104
|