Download - Apics Digital Brand Guidelines
-
8/12/2019 Apics Digital Brand Guidelines
1/36
APICS DIGITAL BRAND IDENTITY STANDARDSAn Overview
Version 1.0 October 1, 2013
Proprieary and Confidenial For Inernal Purposes Only
-
8/12/2019 Apics Digital Brand Guidelines
2/36
-
8/12/2019 Apics Digital Brand Guidelines
3/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
Building the APICS Brand
As he leading proessional associaion or supply chain and operaions managemen, APICS is he premier
provider o research, educaion and ceriicaion programs ha enable individuals and heir organizaions o
learn how o advance supply chain excellence, innovaion and resilience.
We undersand ha supply chains are a sraegic asse. Companies ha build smar, high-perorming supply
chains know success depends upon rigorous managemen and he applicaion o bes pracices. In much he
same way, careully managing APICSs proessional image will build our brand ino a sraegic and valuable
asse. Consisency in he presenaion o our exernal image across all media reinorces our leadership
posiion and communicaes our commimen o excellence.
TheAPICS Digital Brand Identity Standardsconains wha you need o know o suppor he growh o our
brand on an APICS disric or chaper websie. These guidelines should be used in conjuncion wih he
APICS Brand Ideniy Sandards. Following hese guidelines will ensure ha we presen our organizaion in a
way ha augmens our brand equiy and increases our marke impac.
Please conac us wih any quesions you may have abou our digial brand sandards. Togeher we can
increase APICSs brand awareness, repuaion and equiy.
APICS Marketing Team
1
Introduction
-
8/12/2019 Apics Digital Brand Guidelines
4/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
The APICS Brand Advantage
A brand can be among the most valuable assets a company owns. In a crowded marketplace, a brand can be
a primary means of dif ferentiation. However, a brand requires active management to achieve its full potential.
Brands are much more han a name and logo. Managed correcly, a brand will provide a susainable compeiive
advanage, a posiive placeholder in he minds o arge audiences, and equiy ha upholds premium pricing.
Srong, well-managed brands oer marke srengh in he ace o economic, indusry or company adversiy.
They inspire cusomer rus, loyaly and addiional business. They also help people undersand wha an
organizaion values.
TheAPICS Digital Brand Identity Standards provides he oundaion or brand excellence and success in he
online realm. This guide esablishes crieria and ses orh he ground rules o presen a consisen APICS
brand experience o he markeplace. This guide is inended or anyone who manages, wries, edis or
designs a websie or online collaeral.
TheAPICS Digital Brand Identity Standardscannoand is no inended oprovide a soluion or every siuaion.If you have a branding question, please contact the APICS Marketing team at [email protected].
2
Introduction
-
8/12/2019 Apics Digital Brand Guidelines
5/36
Site Elements
1
-
8/12/2019 Apics Digital Brand Guidelines
6/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
1.0 Site Elements
Creating a Consistently Excellent Online Experience
For many o our members, poenial members, prospecs and cusomers, he very irs experience hey have
wih APICS will be wih a chaper or disric websie. A colleague could orward a link o an even, or a
prospecive member could ind a sie via an online search. Is mos imporan, hereore, ha when someone
reaches an APICS ailiaed sie hey have a posiive experience. This irs digial ouch poin could enice
someone o join, or lead o an immediae exi.
The sie elemens APICS has chosen are inended o oer visiors a consisenly excellen experience ha
highlighs he chaper and disric connecion wih APICS, ye allows or local personalizaion. Is a simple ye
srong design ha oers lexibiliy. The design was purposeully inended o be easy o consisenly apply and
updae across various conen managemen sysems.
High-resoluion iles or web developmen purposes are available rom he APICS Markeing eam. To reques
he iles, please conac he APICS Markeing deparmen a [email protected].
4
-
8/12/2019 Apics Digital Brand Guidelines
7/36APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
1.1 Header Treatment
The header conains saic elemens such as he logo, navigaion and social media icons. This area is consisen hroughou
he sie and provides he user wih a clear way o navigae he sie.
Header size: 980px by 115px
Logo size: 300px by 50px
Social media icon size: 30px by 30px
Heigh mus remain consisen
Layou, ypography and background mus remain consisen
OFFICIAL ORGANIZATION LOGO
Links back o home page o he disric or chaper sie.LEAVE THIS AREA BLANK SOCIAL MEDIA ICONS (OPTIONAL)
I a chaper or disric has social media
links, hey can be displayed here.
5
-
8/12/2019 Apics Digital Brand Guidelines
8/36
-
8/12/2019 Apics Digital Brand Guidelines
9/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
1.3 Navigation
HORIZONTAL NAVIGATION
Horizonal navigaion is an opion or primary navigaion.
UP STATE
The up sae o he buton mus use #5c400 as he color.
DOWN STATE
The down sae o he buton mus use #00548b as he color.
Navigaion butons are 40px by 135px
Type size or navigaion is 11px
Sub-menus can be used as well or second-ier navigaion
LEFT NAVIGATION
Lef navigaion can be used as he primary navigaion or he sie.
SECOND LEVEL NAVIGATION
When arrow is clicked, opional sub-menu appears. Secion iles are
used when he sub-navigaion needs o be caegorized, bu here is no
page or he caegories.
7
-
8/12/2019 Apics Digital Brand Guidelines
10/36
-
8/12/2019 Apics Digital Brand Guidelines
11/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
1.5 Body
The body is where he main conen o he websie goes. The design o he cener column should be deermined based on
he ype o conen ha will be presened in his area.
EXAMPLES
9
-
8/12/2019 Apics Digital Brand Guidelines
12/36
Site Examples
2
-
8/12/2019 Apics Digital Brand Guidelines
13/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
2.0 Site Examples
Creating a Visually Appealing Web Presence
The sample home page and inerior page designs are inended o provide some examples o sies designed
using hese guidelines. They are aracive, easy o navigae and disincive. The horizonal and verical
navigaion, combined wih he wo- or hree-column ormas, allows or many page coniguraions.
11
-
8/12/2019 Apics Digital Brand Guidelines
14/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
2.1 Home Page Examples (District)
12
-
8/12/2019 Apics Digital Brand Guidelines
15/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
2.1 Home Page Examples (District)
13
-
8/12/2019 Apics Digital Brand Guidelines
16/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
2.1 Home Page Examples (Chapter)
14
-
8/12/2019 Apics Digital Brand Guidelines
17/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
2.1 Home Page Examples (Chapter)
15
-
8/12/2019 Apics Digital Brand Guidelines
18/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
2.1 Home Page Examples (Chapter)
16
-
8/12/2019 Apics Digital Brand Guidelines
19/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
2.2 Sub-Page Examples
17
-
8/12/2019 Apics Digital Brand Guidelines
20/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
2.2 Sub-Page Examples
18
-
8/12/2019 Apics Digital Brand Guidelines
21/36
Site Conventions and Guidelines
3
-
8/12/2019 Apics Digital Brand Guidelines
22/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
3.0 Site Conventions and Guidelines
Following Best Practices to Create a Highly Functional Site
While is easy o ocus on he design elemens, he images and he conen, is oen he aenion o sie
organizaion ha separaes a grea websie rom a good one.
By ollowing hese sandard convenions and guidelines, your sie will oer a beer user experience and
become easier o manage and updae. Over ime, hese pracices will improve your sie search engine
opimizaion, oo.
20
-
8/12/2019 Apics Digital Brand Guidelines
23/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
3.1 Site Conventions
GENERAL
Site Names.Sie names in he header and he ile ag should be writen using ile case. Call he sie APICS Cleveland
Chaper, no APICS CLEVELAND CHAPTER.
Horizontal Navigation.Iems in he horizonal navigaion mus be writen using ile case. For example, do no use
ALL CAPS; insead, use All Caps. Menu iems should be a maximum o wo lines o ex ha will wrap. Horizonal
navigaion should be used only on sies wih our o eigh abs. Sies wih ewer han our abs or more han eigh should
use he lef navigaion.
LINKS
When creaing pages and links, use hyphens and no underscores in he URLs o separae words or numbers.The reason behind his guideline is purposeul and oulined below:
1. Readability.As par o he emplaes CSS, links have ex decoraion se o blue (#0068AC) and no underlined in body
copy, which means ha here is no line under he links. Links ha are displayed in a bulleed lis should appear in blue
(#0068AC) ex, wih no underline on hover. The hover color is se o dark gray (#6A737B).
2. Search Engine Optimization (SEO).Google recommends using hyphens insead o underscores in URLs. For example, i a
URL conains keyword1_keyword2, Google will only reurn ha page i he user searches or keyword1_keyword2 (which
almos never happens). However, i you use hyphens in your URLs (e.g., keyword1-keyword2), ha page can be reurned i
he user searches or keyword1, keyword2, and even keyword1 keyword2.
We also recommend ha all links be writen using lower case leters and should no include any spaces.
21
-
8/12/2019 Apics Digital Brand Guidelines
24/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
3.2 Additonal Guidelines
LINK TEXT
Embed links in your senences and avoid copying and pasing he URL ino your ex. For example, i you
are adverising he evens schedule, you migh say: Ourevens scheduleis consisenly updaed; be sure o check
i requenly.
EMAIL LINKS
Email links mus be labeled as email and/or use he email address as he link ex. I used in a narraive, hen you may use
he persons name as he link ex, provided i is clear ha you are supplying a conac resource.
INTERNAL VS. EXTERNAL LINKS
All links o any sie in he chaper or disric subdomain, including links o anoher page wihin your sie, should open in hesame window. Links o chaper or disric websies should use he non-www URL as per he subdomain sandards. Links o
exernal hird-pary sies should open in a new window. Remember o check your exernal links periodically o make sure
ha he pages you are linking o are sill live; his helps you avoid rusraing your users by aking hem o a broken link.
Back to Top Links.When creaing Back o Top anchor links or pages wih longer conen, use # as your link.
For example:Back o Top
ALL PAGES SHOULD HAVE THE
FOLLOWING ELEMENTS
Link o he home page rom he logo; his
link should open in he same window.
Always include he area code or all
phone numbers.
Email addresses mus be clickable.
No flyou menus in navigaion.
All sites are subject to review by the Marketing
Services department to ensure compliance with
the above standards.
22
-
8/12/2019 Apics Digital Brand Guidelines
25/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
3.2 Additonal Guidelines
CONTACT FORM
Individual conacs should be lised on all chaper or disric sies. In addiion, all o hese sies should include a conac
orm. This orm mus be accessible via he uiliies links a he upper righ o he page in he green header (jus underneah
he conexual home link). The ollowing componens should be included in he orm:
1. To (muliple caegories may be used)
2. Your name
3. Your email address
4. Subjec
5. Message (ex box wih 500-characer limi)
6. Send a copy o his message o yoursel (opional checkbox)7. CAPTCHA (prevens spam)
All fields above, wih he excepion o send a copy o his message o yoursel, are required. Please conac APICS or orm
suggesions o embed on your sie. Google, Wordpress and Wuoo all offer embed opions.
LOGOS
The appropriae APICS logo mus be used a all imes. To view our logo sandards, please visi he Markeing
websie a apics.org/cbox.
IMAGES
All images should be resized beore uploading hem o he server. Don rely on HTML widh and heigh atribues.
Alternative Text (alt text).The use o al ex is required, which describes he conen o he image whenever you use images
on your page. Al ex is required or ADA compliance (his ex is read aloud o sie visiors who use screen readers) and is
displayed i a user has images urned off in heir browser. Including al ex is an acceped sandard among web developers.
Tool Tip: When using an image or a link, be sure o include a ool ip by using he ile atribue.
Uploaded images should be a minimum o 72 dos per inch (dpi) in resoluion.
23
-
8/12/2019 Apics Digital Brand Guidelines
26/36
-
8/12/2019 Apics Digital Brand Guidelines
27/36
Visual Elements and Styling
4
-
8/12/2019 Apics Digital Brand Guidelines
28/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
4.0 Visual Elements and Styling
Building and Maintaining Site Appearance
While is emping o use all he colors in he palee or make changes o ypeaces o add exra emphasis or
characer, a consisen applicaion o color and ype will reward you wih a sie has crisp, clear and visually
balanced.
These guidelines will help you creae and mainain sies similar o he examples.
26
-
8/12/2019 Apics Digital Brand Guidelines
29/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
4.1 Colors and Fonts
COLOR
The approved web color palete is based on he colors developed as par o he prin sandards a APICS.
The approved web colors are presened below wih heir corresponding hexidecimal code.
The ligher colors are ideal or background colors o blocks or placemen in sidebars or oher regions. The darker
colors work bes or horizonal lines, block borders and page ile embellishmens.
#FFCF01 #0068AC #009DDC #6A737B
FONTS
Fons are deermined by he CSS in he emplae.
Page iles and subiles appear in Franklin Gohic. Arial is he alernaive.
Page headings appear in Franklin Gohic. Arial is he alernaive. Body copy appears in Arial.
Avoid adding exraneous reamens o ex, such as highlighing or any oher ype o decoraion.
27
-
8/12/2019 Apics Digital Brand Guidelines
30/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
4.2 Grid and Elements
GRID
The APICS chaper/disric websie should be se up on a 24-column grid wih 30px column widh and 10px guter widh.
All design elemen should be applied o his grid.
ELEMENTS
Header
Widh: 100%
Heigh: 100px
Background HEX Color: #FFFFFF
Horizontal Navigation
Widh: 950px
Cell Widh: Divided equally among he 950px
Fon: Arial
Fon Size: 10px (.63em)
HEX Color: #0068AC
Rollover HEX Color: #FFFFFF
Vertical Navigation
Widh: 200px
Fon Size: 14px (.9em)HEX Color: #BEC0C2
Rollover HEX Color: #0068AC
Body H2
Fon Size: 24px (1.5 em)
Fon: Times New Roman; Weigh: Bold
HEX Color: #0068AC
Body H3
Fon Size: 22px (1.38em)
Fon: Times New Roman; Weigh: Bold
HEX Color: #231F20
Body H4
Fon Size: 18px (1.12em)
Fon: Times New Roman; Weigh: Bold
HEX Color: #231F20
Body H5Fon Size: 16px (1.0em)
Fon: Times New Roman; Weigh: Bold
HEX Color: #231F20
Body H6
Fon-size: 14px (.9em)
Fon: Times New Roman; Weigh: Bold
HEX Color: #231F20
Body Paragraph
Fon Size: 12px (.75em)
Fon: Arial
HEX Color: #231F20
Sidebar
Narrow Sidebar Widh: 200px
Fon: Arial
Fon Size: 11px (.7em)
HEX Color: #BEC0C2
Header HEX Color: #0068AC
28
-
8/12/2019 Apics Digital Brand Guidelines
31/36
Online Advertising Standards
5
-
8/12/2019 Apics Digital Brand Guidelines
32/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
5.1 Online Advertising Standards
Spreading the Word Through Banner Ads
A some poin, i could make sense o adverise a disric, a chaper or even a communiy even on your
websie. I you decide o place banner ads on your sie, he ollowing guidelines are helpul.
30
-
8/12/2019 Apics Digital Brand Guidelines
33/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
5.1 Online Advertising Standards
File Formats Accepted
GIF, JPG, PNG, and SWF
Resolution
72 dpi (dos per inch)
Color Profile
RGB only
Animation
Animaion may loop 3x, 24 ps., 15 seconds maximumrecommended or sandard ad unis.
Click-Through URL
Click URLs mus be included when creaive iles are
submied or hrough a hird-pary ad ag. Lengh
canno exceed 1,000 characers.
Flash
All SWF Flash iles mus be submied along wih a back up GIF/
JPG/PNG ile. Also, all SWF Flash iles mus conain a clickTag
and should be published or Flash Player 10.0 or an earlier
version.
Content
Ads may no be designed o blend in wih he sie, mimic
ediorial ons/colors, include ake orm elemens or incorporae
graphic symbols ha represen non-exisen uncionaliy. I he
creaive has he same background color as he sie, i musconain a visible border.
31
-
8/12/2019 Apics Digital Brand Guidelines
34/36
Brand Message
6
-
8/12/2019 Apics Digital Brand Guidelines
35/36
APICS Digital Brand Identity Standards Overview Version 1.0 October 1, 2013
6.1 Mission, Brand Pillars, Position and Promise
Mission
APICS builds and validaes knowledge in supply chain
and operaions managemen. We enable our communiy
o members, affiliaes and cusomers o lead in he
global markeplace.
Brand PillarsGlobal: Supply chains exend across ime zones, coninensand culures. APICS offers a world o operaions managemen
experisewherever your supply chain akes you.
Strategic: APICS is a sraegic parner or is membersand cusomers. We are he resourcewheher or
career developmen sraegies or he growh sraegy
o an enire organizaion.
Responsive:APICS is a he oreron o he indusry,challenging he saus quo, uncovering he rends and
providing he inormaion needed o advance supply chain
and operaions managemen excellence.
Brand PositionAPICS develops and empowers supply chain proessionals
and heir colleagues. We are essenial parners in
ransorming he way people do business, drive growh
and reach global cusomers.
Brand PromiseAPICS creaes exciing possibiliies or curren and uure
supply chain leaders o deliver, innovae and impac our world.
33
-
8/12/2019 Apics Digital Brand Guidelines
36/36
2013 APICS
About APICS
APICS is he leading proessional associaion or supply chain and operaions managemen and he
premier provider o research, educaion and ceriicaion programs ha elevae end-o-end supply chain
excellence, innovaion and resilience. APICS Ceriied in Producion and Invenory Managemen (CPIM)
and APICS Ceriied Supply Chain Proessional (CSCP) designaions se he indusry sandard. Wih over
37,000 members and more han 250 inernaional parners, APICS is ransorming he way people do
business, drive growh and reach global cusomers. To learn more abou APICS, visi apics.org.
2013 APICS.