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


2/36


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


4/36


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


5/36

Site Elements

1


6/36


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


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/36


9/36


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


10/36


11/36


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


12/36

Site Examples

2


13/36


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


14/36


2.1 Home Page Examples (District)

12


15/36


2.1 Home Page Examples (District)

13


16/36


2.1 Home Page Examples (Chapter)

14


17/36



15


18/36



16


19/36


2.2 Sub-Page Examples

17


20/36


2.2 Sub-Page Examples

18


21/36

Site Conventions and Guidelines

3


22/36


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


23/36


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


24/36


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


25/36


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


26/36


27/36

Visual Elements and Styling

4


28/36


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


29/36


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


30/36


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)


HEX Color: #231F20

Body H4

Fon Size: 18px (1.12em)


HEX Color: #231F20

Body H5Fon Size: 16px (1.0em)


HEX Color: #231F20

Body H6

Fon-size: 14px (.9em)


HEX Color: #231F20

Body Paragraph


Fon: Arial

HEX Color: #231F20

Sidebar

Narrow Sidebar Widh: 200px

Fon: Arial


HEX Color: #BEC0C2

Header HEX Color: #0068AC

28


31/36

Online Advertising Standards

5


32/36


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


33/36


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


34/36

Brand Message

6


35/36


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


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.

apics digital brand guidelines

Documents