Rider University Web Design Manual

Document Purpose

Digital Design Documentation created March 2020

R I D ER UNIV E R SIT Y

Document Purpose

D I G I TA L DE SI GN DOCUM ENTA TION

Document Purpose This document was crafted to provide your team with a comprehensive guide to the design guidelines and recommendations for you to reference during website build and website content creation. This guide contains the typographic, color, and style guidelines as well as documentation on the proper use of the components throughout the Rider.edu website. Whether you’re new or experienced with using these tools, this document outlines what is needed to ensure consistency, flow, and impact across the website.

2

Document Purpose

Contents

4

Section 01:

Digital Brand Overview

10

Section 02:

Accessibility

12

Section 03:

Writing for Web

18

Section 04:

Component Documentation

19

Section 04A:

- Navigation

28

Section 04B:

- Hero Modules

38

Section 04C:

- Video, Image, and Text Modules

82

Questions?

01: Digital Brand Overview

R I D ER UNIV E R SIT Y

Digital Brand Overview

D I G I TA L DE SI GN DOCUM ENTA TION

Color Palette: Primary R I D E R C R A N B E R RY

Rider Cranberry is one of the primary colors of the Rider digital brand. This vibrant red color is used to add branded visual interest throughout the site in headlines, subheadlines, buttons, links, backgrounds, color treatments, and various design elements.

RIDER CRANBERRY PANTONE 201 C C-7 M-100 Y-68 K-32 R-157 G-34 B-53 HEX# 9D2235

BL ACK S & WHITE

Black and shades of gray make up an integral part of the primary color palette of the Rider digital brand. These colors are used to create breaker moments throughout the site that allow the white and red to feel elevated and engaging. These shades allow for content to be easily legible and approachable, and make up a majority of typography throughout the site.

BLACK PANTONE BLACK 6 C C-0 M-0 Y-0 K-100 R-0 G-0 B-0 HEX# 000000

DARK GRAY PANTONE NEUTRAL BLACK C C-0 M-0 Y-0 K-91 R-24 G-24 B-24 HEX# 181818

WHITE PANTONE WHITE C-0 M-0 Y-0 K-0 R-255 G-255 B-255 HEX# FFFFFF

5

R I D ER UNIV E R SIT Y

Digital Brand Overview

D I G I TA L DE SI GN DOCUM ENTA TION

Color Palette: Accents ACCENTS

The secondary colors are to be used sparingly for visual design elements throughout the Rider digital brand. These colors can provide accents, layering and added visual interest to the design by breaking up the overall visual flow created by the primary colors.

HOT RED PANTONE 1797 C C-0 M-97 Y-80 K-0 R-213 G-42 B-63 HEX# D52A3F

ROYAL PURPLE PANTONE 267 C C-82 M-97 Y-0 K-0 R-95 G-37 B-159 HEX# 5F259F

GOLD PANTONE 103 U C-5 M-8 Y-100 K-15 R-180 G-159 B-41 HEX# B49F29

GRAY PANTONE 424 C C-30 M-20 Y-19 K-58 R-112 G-115 B-114 HEX# 707372

6

R I D ER UNIV E R SIT Y

Digital Brand Overview

D I G I TA L DE SI GN DOCUM ENTA TION

Typography GT S U P E R D I S P L AY

GT Super Display Bold

GT Super Display Super

GT Super Display Bold is used as the main headline or hero typeface. The type should be used in sentence-case for legibility and clarity of messaging. It should never be used as body copy, but can be utilized for subheads or for oversized call-outs.

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

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

TO D AY S A N S

Today Sans Regular

Today Sans Bold

Today Sans is a sans serif typeface that is both highly functional and contemporary. It’s easy to read, includes a full range of weights and italics, and pairs well with Super Display.

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

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

For emphasis, it can be set in all caps or bolded in color.

In some instances, Bold or Demi can be used to highlight important copy, in either all caps or sentence case.

7

R I D ER UNIV E R SIT Y

Digital Brand Overview

D I G I TA L DE SI GN DOCUM ENTA TION

Design Elements V E RT I C A L & H O R I Z O N TA L R U L E S W I T H A D O R N M E N T S

The main non-functional design elements used throughout the Rider digital brand are subtle yellow rules that are adorned with various colored dots and circles.

When the rules are aligned horizontally, they’ve been programmed to animate and draw from left-to-right once the user scrolls through to encounter them.

Also notice the use of the Accent colors for these elements.

8

R I D ER UNIV E R SIT Y

Digital Brand Overview

D I G I TA L DE SI GN DOCUM ENTA TION

Photography & Images P H OTO G R A P H Y S E L E C T I O N B E S T P R AC T I C E S

When choosing photos for the Web it is important to keep in mind the container the photo will be shown in. The photo should match the orientation of the container. For example, if the container is a landscape aspect ratio, the photo used should be a landscape orientation.

In order to account for the responsive behavior of containers, it will be important to take into account how a photo or image will be utilized in the component and if there are any other elements such as text or buttons that may end up overlaying that image. The focal point could be center, offset to the right, or offset to the left based on this.

I M AG E S I Z E S A N D C R O P P I N G B E S T P R AC T I C E S

It is no longer necessary to crop photos and images to a set size due to the responsive nature of the design. We recommend working with your back-end developer to determine the specific aspect ratios and resolutions for various photos and images to be used, especially for images and backgrounds to be used in the heroes as those are going to be unique to specific pages.

Most of the images used in the designs will fall into the aspect ratios of 1:1 (square); 3:2 or 2:3 (landscape or portrait); and 16:9 (widescreen).

9

02: Accessibility

R I D ER UNIV E R SIT Y

Accessibility

D I G I TA L DE SI GN DOCUM ENTA TION

Color Contrast When creating new styles for Rider University digital content, it is important to ensure the contrast between colors is high enough to pass WCAG 2.0 AA accessibility standards.

This grid provides an overview of the Rider primary and secondary colors, and the level of contrast that exists between each.

Reference the top of the grid for the intended text color and the left column of the grid for the intended background color.

GRID KEY

Any combination with DNP in the bottom left corner indicates colors do not pass accessibility at any text size and cannot be used together on web.

Any combination with AA18 indicates the text must be over 14pt bold or 18pt regular in combination with that background color.

Any color combination with AA or AAA is acceptable to use.

11

03: Writing for Web

Writing for Web

R I D ER UNIV E R SIT Y

D I G I TA L DE SI GN DOCUM ENTA TION

Best Practices – General

Do • Write with your audience, brand strategy, and goals for the page in mind.

• Structure your content using the inverted pyramid concept (referenced on page 14).

• Use active voice for clarity and conciseness.

• Use pronouns to create more approachable content.

• Be search engine-friendly, and use language your users would type in Google.

Do Not • Be redundant.

• Make the user read through filler content before getting to the point.

• Use passive voice to sound fancy.

• Use internal jargon, complicated language, or acronyms that your users don’t know.

• Let outdated information live on your website.

13

R I D ER UNIV E R SIT Y

Writing for Web

D I G I TA L DE SI GN DOCUM ENTA TION

Inverted Pyramid The inverted pyramid writing style is traditionally known as a journalism writing method, though it is also a very good way to approach web writing. We know most users don’t read word-for-word, and this method allows them to scroll quickly and still catch the main point.

• Present the most important information first, then provide supporting details, and finish with any related information.

M O S T I M P O R TA N T

• Omit unnecessary ideas that don’t support the page’s purpose.

• Trim any content from the bottom-up, if necessary.

• Support all types of readers and get to the point quickly by using this style.

• This method will logically outline content for easy understanding.

SUPPORTING D E TA I L S

ADDITIONAL INFO

14

Writing for Web

R I D ER UNIV E R SIT Y

D I G I TA L DE SI GN DOCUM ENTA TION

Best Practices – Headlines

Do • Create headlines that are compelling, but also describe what the user is about to read.

Do Not • Revert to industry language the user may not understand.

• Keep SEO in mind when headline writing.

• Write a headline that is too long (typically no more than 55 characters).

• Be concise and direct.

• Forget about writing to your audience.

• Draw the user into the story.

• Use flowery language that doesn’t work for SEO.

• Occasionally use questions and headlines with pronouns for increased engagement.

• Write clickbait headlines that come across like a sales tactic.

15

Writing for Web

R I D ER UNIV E R SIT Y

D I G I TA L DE SI GN DOCUM ENTA TION

Best Practices – Scannability

Do

Do Not

• Choose bulleted and numbered lists over long paragraphs.

• Use only one content type to explain a detailed topic.

• Incorporate pull quotes and block quotes whenever appropriate to break up large text blocks.

• Overdo it with the adjectives and adverbs—opt for stronger verbs that encourage active voice.

• Use short 1-2 sentence paragraphs to keep users moving through the page.

• Forget that approximately 16% of people read web copy wordfor-word.

• Write to the inverted pyramid model (referenced on page 14) to make sure the most important information is viewed first.

• Use filler text or redundant information that detracts from the main point.

• Use objective language to earn credibility and trust.

• Let the main point get lost among wordiness.

16

Writing for Web

R I D ER UNIV E R SIT Y

D I G I TA L DE SI GN DOCUM ENTA TION

Best Practices – Accessibility

Do • Provide appropriate alternative text for non-text content.

• Use lists, bullets, and other ways to present content.

• Ensure headers provide context to the page.

• Make sure the overall layout of the page is purposeful and provides meaning.

• Avoid making the user link out to find key content that should be on the page.

Do Not • Fail to accommodate for the 1 in 5 users that have a disability and rely on website accessibility.

• Add links that don’t make sense out of context.

• Rely on color to convey pertinent information.

• Add video and live audio without captions and transcripts.

• Forget about making sure these users can submit forms as well.

• Refer to w3.org/WAI for more accessibility information.

17

06: Component Documentation

Component Documentation

A: Navigation This section explains the functionality of the primary navigation, footer, and search throughout the website.

19

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Desktop Navigation FUNCTIONALITY

The navigation bar appears on all pages throughout the Rider site. The navigation hides as the user scrolls down the page and pops back down when the user begins scrolling up.

The bar contains a logo, quicklinks, the “Info For” dropdown, and Search as represented by a magnifying glass icon.

20

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Desktop Navigation – Tier 1 Item Hover FUNCTIONALITY

When the user hovers over any of the Tier 1 links they are presented with the Tier 1 item child pages.

The underline for the Tier 1 items appears and the child pages appears in a dropdown nav.

21

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Touch Device (Mobile breakpoint) Navigation FUNCTIONALITY

The navigation on touch devices functions mostly the same as it does on Desktop.

The navigation bar appears on all pages throughout the Rider site. The navigation hides as the user scrolls down the page and pops back down when the user begins scrolling up.

The bar contains a hamburger menu, logo and search.

Once clicked, the hamburger menu launches the megamenu takeover to review the Tier 1 navigation and quick links.

The Tier 1 items become accordions where the user is able to tap on the page name to go to the corresponding page or tap the arrow to display the that section’s child pages.

Clicking the child page link brings the user to the corresponding page.

22

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Desktop Navigation – Global Alert Bar FUNCTIONALITY

If it is necessary for Rider to broadcast an important announcement, there is a global alert bar that appears above the navigation bar.

The alert bar has a black background with white text overlay that allows the user to focus on the alert.

The user is able to click into the alert to learn more or dismiss the alert and go through the rest of the site.

The alert should only appear at the beginning of a user’s

23

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Desktop Navigation – Interior Pages FUNCTIONALITY

When the user navigates to interior pages they are presented with the interior page template. The interior page template utilizes a sidebar column designed to accommodate links, photos and various other components to support content for interior pages.

The sidebar column can be utilized to contain navigation between sibling and child pages, an optional contact block, an optional featured link, optional related links, and optional links to social accounts.

On mobile the navigation becomes a dropdown menu with the related items in another dropdown menu below.

24

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Footer FUNCTIONALITY

The footer contains the logo, contact information, quick links, links to Rider social profiles, links to detailed disclosure information below, copyright information, and a CTA allowing visitors to quickly jump back to the top of the page.

25

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Search FUNCTIONALITY

When the user clicks the Search icon (magnifying glass) they are presented with a modal containing the Search bar.

The modal comes to the top layer of the screen experience so the user is able to complete a search.

The arrow icon appears inactive until the user has entered search information.

26

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Search – Results FUNCTIONALITY

Once the user has searched a term they are taken to a search results page.

The functionality of the search results page is coming from the Google Custom Search Engine. Standard setting for Google CSE is to display 10 results at a time with pagination at the bottom to access more results.

Each result should display the page headline, URL, and description. Clicking anywhere on the result will take the user to the corresponding page.

If the user clears the search term with the X button they are able to submit another search. The page items should not refresh until a user searches a new term.

27

Component Documentation

B: Hero Modules This section explains the hero modules and how they should be utilized throughout the various tiers of the website.

28

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Hero – Homepage - Textural Background Video MODULE USE

This hero is only used for the hero on the homepage of the website.

Rider has requested a custom hero that can accommodate mulitple functions. The default is to have a silent, textural video running in the background.

MODULE COMPONENTS

The hero contains: • background photo or silent background video • black overlay to ensure accessibility • vertical rectangle containing treated photo • headline • horizontal animated rule above copy • body copy • optional call-to-action button (links to internal page) • PAUSE video button

29

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Hero – Homepage - Featured Video MODULE USE

Another variation for the homepage hero contains the functionality to support a Featured Video that contains a static image as a background.

This version has a “WATCH VIDEO” CTA button which will pop open a video player modal when the user clicks.

MODULE COMPONENTS

The announcements bar contains: • static image background, preferably related to the Featured Video • black overlay to ensure accessibility • vertical rectangle containing treated photo • headline • sub-headline • horizontal animated rule above copy • body copy • optional call-to-action button to pop open video player modal to play the Featured Video

30

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Hero – Homepage - Featured Content Carousel MODULE USE

Last variaion for the homepage hero contains the functionality to support a Featured Content Carousel that contains a static image as a background.

This version can support a “LEARN MORE” CTA button or a “WATCH VIDEO” CTA button that will direct users to a curated link, or pop open the video modal based on the slide.

We are recommending no more than 4 slides for this Carousel as any more wouldn’t provide an optimal user experience. There is a auto-rotate built in where slides cycle through at 5-second intervals.

MODULE COMPONENTS

The announcements bar contains: • static images background, preferably related to the Featured Content being linked to • black overlay to ensure accessibility • vertical rectangle containing treated photo • headlines • sub-headlines • horizontal animated rule above copy • body copy • optional call-to-action button to direct user to link/URL or video to play in modal 31

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Hero – Landing Page - Single Image or Video MODULE USE

This hero is used to introduce landing pages (Tier 1) throughout the site. The hero should provide the user with context of the page they have landed on.

The hero will accommodate a single image or silent background video. The content author should be able to select a photo or background photo or video. When the author selects video, a PAUSE button should display to stop the background video for accessiblity compliance.

The hero should dynamically pull in the page headline from CMS page title.

MODULE COMPONENTS

The hero contains: • either a single photo, or a background photo or silent background video • black overlay to ensure accessibility (if needed) • horizontal animated rule next to headline • headline • sub-headline • body copy • call-to-action button to direct user to link/URL as programmed

by Rider, and PAUSE button when background video is used

32

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Hero – Landing Page - Double Image MODULE USE

This hero is used to introduce landing pages (Tier 1) throughout the site. The hero will provide the user with context of the page they have landed on.

The hero can accommodate two images or silent background video.

The content author should be able to select photo grid (2 photos or videos), or background photo or video. When the author selects video, a PAUSE button should display to stop the background video for accessiblity compliance.

The hero should dynamically pull in the page headline from the page name.

MODULE COMPONENTS

The hero contains: • a photo grid with either a single or double photo, or a single background photo and single silent background video • we would not recommend having two background videos running in this hero • black overlay to ensure accessibility (if needed) • horizontal animated rule next to headline • headline • sub-headline • body copy • call-to-action button to direct user to link/URL as programmed by Rider, and PAUSE button when background video is used 33

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Hero – Landing Page - Three-Image Grid MODULE USE

This hero is used to introduce landing pages (Tier 1) throughout the site. The hero will provide the user with context of the page they have landed on.

The hero can accommodate three images or 2 images plus 1 silent background video. When the author selects video, a PAUSE button should display to stop the background video for accessiblity compliance.

The hero should dynamically pull in the page headline from the page name.

MODULE COMPONENTS

The hero contains: • a photo grid with either a triple or double photo, or a single silent background video at top, and 2 photo images below • black overlay to ensure accessibility (if needed) • horizontal animated rule next to headline • headline • sub-headline • body copy • call-to-action button to direct user to link/URL as programmed

by Rider, and PAUSE button when background video is used in top image placeholder

34

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Hero – Level Two - Single Image MODULE USE

This is a standard hero module to be used on Level Two pages where core content is presented.

There is no CTA to link out to another location in this hero.

The hero should dynamically pull in the page headline from the page name.

MODULE COMPONENTS

The hero contains: • a single photo relevant to the content on the page • background image with red dutoone treatment is also customizable • headline • sub-headline • horizontal animated rule next to headline

35

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Hero – Level Two - Textural Video MODULE USE

This is a standard hero module to be used on Level Two pages where core content is presented.

There is no CTA to link out to another location in this hero.

The hero should dynamically pull in the page headline from the page name.

MODULE COMPONENTS

The hero contains: • a single background video with a PAUSE button; please note the unique nature of this hero as it’s shape is wider than other heroes • a single photo image • headline • sub-headline • horizontal animated rule next to headline

36

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Heroes – Interior MODULE USE

These heroes are to be used to introduce interior pages (Tier 3 and deeper) throughout the site. Each hero should provide the user with context of the page they have landed on.

The content author should be able to choose the Simple Interior Page Hero or the Background Interior Page Hero.

The simple hero is smaller and has a purple duoton overlay.

The Background Interior Page Hero has a customizable background image with dark overlay for accessibility compliance.

Content author will decide which hero is appropriate based on the content and the context of the page relative to the overall site.

The hero should dynamically pull in the page headline from the page name.

MODULE COMPONENTS

These heroes contain: • simple background with purple duotone overlay • photo background image with dark overlay to adjust for accessiblity compliance • horizontal animated rule • headline 37

Component Documentation

C: Video, Image, and Text Modules This section provides an overview of the functionality and usage guidelines that are associated with image and text modules

38

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

MODULE USE

This module is to be used whenever a CTA or link is used to access a featured video.

This module will pop open and take over the page. A dark overlay will be applied behind the modal.

The modal is to be a standard videoplayer with all necessary, standard video controls and indicators.

MODULE COMPONENTS

The module contains: • standard video player controls and functions • dark overlay to be applied on page, behind the modal

39

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Annoucement Banner And Accept Cookies

MODULE USE

The Announcement Banner will appear at the top of every page of the Rider site and be persistent until the user clicks through to the announcement, or dismisses it by clicking the close (x) button.

The Accept Cookies notice appears the first time a user visits the Rider website and be persistent until the user clicks through on the “Learn More’’ link where the Cookies Policy page should provide cookies information; or user dismisses the notice by clicking the “ACCEPT COOKIES” CTA button, whereupon it should no longer appear to the user on any subsequent visits to the Rider.edu site.

40

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Feature Text - Full MODULE USE

This module is a text module used to highlight content that is relevant to the page, or core content for the page.

It can be used with or without a CTA button to link out to a separate destination.

MODULE COMPONENTS

The module contains: • background image with gradient • animated horizontal rule design element • headline • body copy • one optional call-to-action button

41

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Feature-Media Image - Full MODULE USE

This module is an image and text module used to highlight a call to an interior page, or other destination URL. This module can be used to present information in a visually compelling way to emphasize hierarchy and interest.

MODULE COMPONENTS

The module contains: • background image in solid Rider Red • customizable photo image to highlight content being promoted • headline • animated horizontal rule design element • body copy • call-to-action button directing users to interior page or destination URL

42

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Feature-Media Video - Full MODULE USE

This module is an video and text module used to highlight featured video content.

MODULE COMPONENTS

The module contains: • background image in solid Rider Red • customizable video image to highlight featured video to be presented in the video player modal • PLAY button for users to click through and play video • headline • animated horizontal rule design element • body copy • call-to-action button directing users to interior page or destination URL

43

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Accordian Group - Full & Interior MODULE USE

This module is a text module used to organize content in an expandable and collapsible structure.

This module can be used to present information in a more efficient manner allowing the visitor on only select the content they want to see.

MODULE COMPONENTS

The module contains: • animated horizontal rule design element • summary • subheads • body copy in expandable and collapsible format • plus sign icon to expand • x icon to collapse • only one expansion allowed at a time

44

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Cards Content - Full MODULE USE

This module is a standard, 3-up image and text card module used to highlight a group of stories or links.

Each card has as unique image, text and LEARN MORE CTA that is customizable by the content author.

MODULE COMPONENTS

The module contains: • module headline • three images • three headlines • three summaries • three text CTAs • customizable background image behind the cards with a duotone overlay

45

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Cards Content - Events & News - Full MODULE USE

This module is similar to the 3-card up module, but contains unique design elements to support News and Events content.

Each card has as unique image, text and LEARN MORE CTA that is customizable by the content author.

Additionally, the Events module will have a designed date element appear in top-left of the image. Whereas for the News module, the News Category will appear.

MODULE COMPONENTS

The module contains: • module headline • three images with date for Events, and category for News • three headlines • three summaries • three text CTAs • customizable CTA button at top-right of each module

46

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Cards-Text - Full MODULE USE

This module is an image and text module used to highlight a group of related items in large blocks.

This module shows items through blocks with 1 call-toaction link each.

This module has been designed with two photo image elements that are customizable and up to six text cards.

The headlines and summaries of each individual block should be similar in length.

MODULE COMPONENTS

The module contains: • module headline • animated horizontal rule design element • two customizable images • text cards (headline, summary, LEARN MORE CTA link)

47

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Carousel Video - Full MODULE USE

This module is to be used to feature videos on a specific page. Each video will have a photo image relevant to the video with a PLAY button to trigger the video to play inline.

Included is the ability to scroll through a series of videos, though we recommend not having more than four videos be available in this module.

MODULE COMPONENTS

The module contains: • module headline • animated horizontal rule design element • summary • one call-to-action button • featured video with PLAY button to play inline • scroll arrows to cycle through the list of videos to view

48

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Contact Info - Full & Interior MODULE USE

This module is an image and text module used to provide Contact Information on a page.

MODULE COMPONENTS

The module contains: • module headline • animated horizontal rule design element • Contact Us information • clickable email address to open user’s native email app • solid Rider Red background • customizable photo/image

49

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Context Image Left - Full MODULE USE

This module is an image and text module used to highlight a specifici interior page or link.

There are two variations where the only difference is the background strip on the left of fhe customizable image. In case case we are asking to have a purple duotone overlay, in the other we are asking for a red duotone overlay.

MODULE COMPONENTS

The module contains: • module headline • animated horizontal rule design element • summary • CTA button • customizable photo/image

50

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Context Image Right - Full MODULE USE

This module is an image and text module used to highlight a specifici interior page or link.

There are two variations where the only difference is the background strip on the right of fhe customizable image. In case case we are asking to have a purple duotone overlay, in the other we are asking for a red duotone overlay.

MODULE COMPONENTS

The module contains: • module headline • animated horizontal rule design element • summary • CTA button • customizable photo/image

51

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Context Image Bleed Left & Right MODULE USE

This module is an image and text module used to highlight a specifici interior page or link.

There are two variations where the only difference is that the alignment of image to text is swapped, left-to-right and right-to-left

MODULE COMPONENTS

The module contains: • module headlinev • animated horizontal rule design element • summary • CTA button • customizable photo/image with duotone background treatment behind the photo/image

52

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Figure Group - Full & Interior MODULE USE

This module is used to highlight important data

MODULE COMPONENTS

The module contains: • module headline • summary • data text • data summary text

53

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Form & Thank MODULE USE

These modules are for Forms and the Thank You component upon successful submission

MODULE COMPONENTS

The module contains: • module headline • subheadline • form fields • form labels • error messaging • SUBMIT buttona • Thank you messaging and confirmation text

54

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Image 4up - Full MODULE USE

This module is used to highlight link to four interior pages or links from the images. Images are the CTAs.

MODULE COMPONENTS

The module contains: • headline • animated horizontal rule design element • summary • four customizable images with inset caption text as CTAs

55

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Link Group - Full MODULE USE

This module is used to house up to three CTA buttons to interior page or links

MODULE COMPONENTS

The module contains: • headline • animated horizontal rule design element • three CTA buttons

56

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Statistics – Small MODULE USE

This module is to feaure a text list. It also includes an optional CTA link if additional information about the list is available.

MODULE COMPONENTS

The module contains: • headline • animated horizontal rule design element • headline for list • bulleted list • optional CTA link

57

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

News Hub - Full MODULE USE

This module is used to highlight specific News stories and is recommended to be used on the Homepage.

The module features one top curated story on the right, and an automated feed of News stories to appear on the left.

However, the stories on the left should provide the capability to overall the automation and be curated as well..

MODULE COMPONENTS

The module contains: • category eyebrow of News story • headline • summary • curated photo for the main News story • individual call-to-action links • See All News CTA button in top right of module

58

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Photo Gallery - Full MODULE USE

This module is recommended for the Homepage and is a unique way to present specific photos based on Individual Stories.

The grid shall contain three CTAs linking to the Individual Stories and reveal a brief summary when the plus icon is clicked.

In the reveal wil be the CTA links that will take the user to the story.

MODULE COMPONENTS

The overlay contains: • headline • animated horizontal rule design element • summary • three customizable photos as CTAs to specific individual stories • two customizalbe photos/images as designs elements • plus icons to reveal summary of the person being highlighted • dark overlay to reveal text and comply with accessibility • x button to close the reveal summary

59

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Program Overview - Full MODULE USE

To be used primarily on the Programs landing pages.

However, this module is versatile enough to handle a customizable Headline and Summary and be used on to open any page.

MODULE COMPONENTS

• headline • sunmmnary • animated horizontal rule design element

60

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Quote Image - Full & Interior MODULE USE

This module is used to feature a curated quote as selected by by the content author. it also contains a photo/image element which should relate to the quote.

MODULE COMPONENTS

The module contains: • background image of Rider Broncos • light overlay where pullquote will be • customizable photo with circle treatment • pullquote • pullquote attribution (person’s name) • short descriptor about the person • CTA link to learn more about the person or the quote (optional, the Interior version does not show the link)

61

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Social Media Instagram - Full MODULE USE

This module is used to connect to select Instagram feeds.

The integration wil be done during back-end development phase once an aggregator has been selected.

The design has the ability to scroll through each feed and contains a FOLLOW US CTA that can be linked to whatever main Rider Instagram account that the client chooses.

MODULE COMPONENTS

The module contains: • headline (currently, “What’s Trending”) • summary text • CTA button for FOLLOW US to link to a selected Instagram account • left and right scroll arrows to cycle through feeds • cards to be curated and function as CTAs to specific Instagram feeds

62

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Stories Carousel - Full & Interior MODULE USE

This module will be used to feature specific stories in a Carousel feature.

The stories cards are to be curated and is recommended to focus on student, faculty, and alumni stories.

MODULE COMPONENTS

The announcements bar contains: • headline • animated horizontal rule design element • summary text • CTA to additional Rider stories (optional) • scroll buttons, recommend up to 4 stories to feature • customizable photo cards • story attribution element in solid purple to overlay in lower-left of photo • scroll right button which loops back to slide #1 • the interior version has left and right scroll arrows • interior version has a caption to support each slide • interior version has slide location dots indicating which slide is being viewed

63

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Tab Group - Full MODULE USE

The Tab Group allows the content creator to highlight specific pieces of content utilizing a dynamic content functionality.

Clicking on a TAB BUTTON will dynamically change the content on the right side, including the CTA/link that will lead users to more information about that particular content.

MODULE COMPONENTS

The pop-out contains: • animated horizontal rule design element • headline • summary text • Tab buttons • Dynamic content selected via the Tab buttons • CTA buttons and links specific to the content

64

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Mailing Address - Interior MODULE USE

This module can be used to list a Mailing Address.

MODULE COMPONENTS

The module contains: • headline • address text • Contact Us link

65

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Table - Interior MODULE USE

This module is shows the design of a standard table with top row utilizing a solid Rider Red background color and white bold text

MODULE COMPONENTS

The module contains: • table with text only

66

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Feature Text - Interior MODULE USE

This module is used to feature a specific page or feature on the Interior page.

The background image is customizable but we recommend a duotone treatment in red or purple so this module.

MODULE COMPONENTS

The module contains: • headline • summary text • CTA button • background image with duoton treatment (red or purple)

67

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Form and Thank You - Interior MODULE USE

This module is the version of the Form that is to be used on the Interior pages.

Included is the Thank You module that should appear when a submission is successful.

MODULE COMPONENTS

The module contains: • module headline • subheadline • form fields • form labels • error messaging • SUBMIT buttona • Thank you messaging and confirmation text

68

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Interior Story - Interior MODULE USE

This module is used to feature a specific story or content on the Interior pages.

MODULE COMPONENTS

The module contains: • headline • sub-headline • summary text • CTA link • customizable photo/image

69

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Interior Table List - Interior MODULE USE

This module is used to present a simple list on the Interior page.

MODULE COMPONENTS

The module contains: • list headline • text list set up as a 2-column table

70

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Interior Context Image - Interior MODULE USE

This module can be used to highlight specific pages or link out to content within the Interior pages.

MODULE COMPONENTS

The module contains: • customizable photo/image • headline • summary text • CTA button

71

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

WYSIWYG - Interior MODULE USE

This module represents the open, WYSIWYG container and various styling and design elements that can be used.

MODULE COMPONENTS

The module contains: • All headlines styles from H1 thru H6 • summary paragraph type • bulleted list • numbered list • photo/image spanning width of container • video CTA (this one plays the video inline) • any custom pieces can be inserted into the WYSIWYG module container

72

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Sidebar Menu - Interior MODULE USE

This module is used for left sidebar found in the Interior page template.

It is to be used to indicate, and to provide links to other pages available on the same level as the current page.

Itwill also indicate the current page the user is on.

MODULE COMPONENTS

The module contains: • headline • links to related pages on the same level as current page • indication of the current page

73

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Headshot - Interior sidebar MODULE USE

This module is used to provide a photo to place in the sidebar of the Interior page template.

When the page is used to provide individual profiles such as for students or faculty, a headshot can be used.

MODULE COMPONENTS

The module contains: • customizable photo/image

74

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Headshot - Interior sidebar MODULE USE

This module is used to provide contact information relevant to the content in the interior page.

It is placed in the left sidebar of Interior pages.

MODULE COMPONENTS

The module contains: • Contact Us information • clickable email address to open user’s native email app • solid Rider Red background • customizable photo/image

75

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Headshot - Interior sidebar MODULE USE

This module is used for left sidebar found in the Interior page template. It can be used to support the listing of multiple links.

MODULE COMPONENTS

The module contains: • headline • any number of links as needed

76

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Sidebar Details - Interior MODULE USE

This module is used for left sidebar found in the Interior page template. It can be used to provide a header and summary text to support any additional information to describe the content in the sidebar.

MODULE COMPONENTS

The module contains: • headline • summary text

77

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Faculty Search & Cards - Full MODULE USE

This module is to be used on the Faculty page to allow for searching and filtering features to access the list of Rider faculty members.

MODULE COMPONENTS

The module contains: • Search bar that searches exclusively content from Faculty profiles • Filter based on Department tags • Search result with Employee Name, Department, Email address if available, Phone number if available • CTA link to the Faculty profile page • LOAD MORE CTA to load up more Employee results

78

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Program Search & Cards - Full MODULE USE

This module is to be used on the Programs page to allow for searching and filtering features to access the list of Rider Programs.

MODULE COMPONENTS

The module contains: • Search bar that searches exclusively content from Programs • Filter based on Program tags such as Program Types, Colleges & Schools, Areas of Interest • The College & Schools have a colored box associated per college, these boxes will appear in the Program cards indicating at which colleges and schools a particular program is being offereed • Search result with Program Name, degree type, summary text • CTA link to the Program page • LOAD MORE button to load additional Program card results

79

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Stories Search & Cards - Full MODULE USE

This module is to be used to allow for searching and filtering features to access the list of Rider Stories.

MODULE COMPONENTS

The module contains: • Search bar that searches exclusively content from Stories • Customizable filters based on tagging associated with the Stories content • Stories cards to pull in Category & customizable photo • Headlines, sub-headlines, summary text and CTA link for each Story • LOAD MORE button to load additional Stories cards results

80

R I D ER UNIV E R SIT Y

Component Documentation

D I G I TA L DE SI GN DOCUM ENTA TION

Search Results Page - Full PAG E U S E

This represents the design of the Search Results page. It has been connected to the Google Custom Search Engine and results are laid out per standard Google CSE feed.

MODULE COMPONENTS

The module contains: • Search bar • Search resulte provided by Google CSE • Pagination to scroll through results

81

Document Purpose

Questions?

Following these guidelines will be critical to maintaining the integrity, strategy, and consistency of the Rider branding on the website. If you have any questions while developing or creating content for this website, please reach out to:

Pamela Abbazia Executive Director, Marketing & Digital Strategy Email: PAbbazia@rider.edu Office: (609) 896-5000 x7355