Website Style Guide 2014

32 

Loading....

Loading....

Loading....

Loading....

Loading....

Full text

(1)

Style Guide

(2)

Contents

3 Color

/ Pallette

4

Page Templates / List

5 Typography

/ Fonts

6-7

Typography

/ Styles

8-9

Typography

/ Navigation

10 Layout

11-20

Widgets

21 Images

/ Overview

29-30

Images / Tablet & Mobile Icons

31 Images

/ What Not to Do

(3)

Color

/ Pallete

WSU Blue

R0 G51 B142 hex #00338e

WSU Yellow

R238 G179 B53 hex #eeb335

Main Text Color

R102 G102 B102 hex #666666

Content Background

R242 G242 B242 hex #efefef

Accent Color

Link Color

R0 G102 B204 hex #0066cc

Footer Color

R23 G33 B84 hex #172154

(4)

Page Templates

/ List

Home

The home page for worcester.edu Degree Program

Listing page for the degree-and-program Detail

General detail page Detail without Left Nav

As above but without left navigation Detail, 1 Column

A general template with 1 column

Detail, 3 Column

A general template with 3 columns Detail, 3 Column without Left Nav As above, but without left navigation Directory

Employee and location directory Error

Displayed when a user enters the correct domain but an incorrect or expired page address

Graduate School Detail

Detail page for the Graduate School section

Graduate Detail without Left Nav As above, but without left navigation

Portal Login

Login page for the portal student and faculty/staff

Portal Home

Home page for the myWSU portal section of worcester.edu

Portal Detail

Detail page for the portals Search

Used for the search page Sitemap

(5)

Typography

/ Fonts

Primary Font

Open Sans

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Used for body copy.

Secondary Font

Open Sans

Bold

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Used for menu items, subheadings (h2, h3, h4, etc.), and form labels.

Title Font

Noto Serif

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

(6)

Typography

/ Styles

Header Styles

Header 1

30px Noto Serif #00338e

Header 2

20px Noto Serif #00338e

Header 3

15px Open Sans #0066ee

Header 4

14px Open Sans Bold #666666

Body Copy Styles

This is body copy lorem ipsum dolor sit amet,

consectetur adipisicing elit, sed do eiusmod

tem-por incididunt ut labore et dolore magna aliqua.

Ut enim ad minim.

14px/1.5em Open Sans #383737

This is home page news box text lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 12px/1.5em Open Sans #383737

This is a text link.

(7)

Experience Worcester State

A tradition of academic excellence

Worcester State University is a liberal arts and sciences university

with a long tradition of academic excellence. Our students receive

a variety of multi-disciplinary opportunities enabling them to

explore their academic interests and prepare for their careers.

Academics and real-world experience

We prepare our students to take on real-world challenges with

portfolios that include critical thinking, teamwork, problem solving,

communication, technology, and global awareness skills. They are

Header 1

Page Title

Example of Correct Typograpy

Header 2 Page Headline Body Copy Paragraph Body Copy Paragraph Header 3 Subheading

Typography

/ Styles

(8)

Typography

/ Navigation

Main Navigation Font

OSWALD

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Used for main menu. Always capitalized.

Left Navigation Font

Open Sans

Bold

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Used for left-side navigation.

Left Sub Navigation Font

Open Sans

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

(9)

Main Navigation Font

Example of Correct Typograpy

Left Side Navigation Left Side Sub Navigation

(10)

Global Header

Contains main menu with dropdown navigation menus and useful links.

Layout

Icons

Page printing, email, social-media sharing and RSS feed link.

Page Header

Contains page title and breadcrumb navigation links.

Sub Menu

A secondary menu allowing the user to navigate

between pages inside the current section of the site.

Main Content

Contains the main page content.

Global Footer

Contains navigation links, contact informa-tion, and social-media links.

(11)

Widgets

/ List

Announcements Box

Contains: Announcement titles, maximum of 8 words. Brief sentence summary, maximum of 36 words.

Sub Menu

A secondary menu allowing the user to navigate between pages inside the current section of the site

Main Content

Contains the main page content

Images in the 2-column featured profile The image is displayed in a left column with optional captions.

Global Footer

Contains navigation links, contact information, and social-media links Quick Facts

Contains: Image slider. List of facts, maximum of 30 characters.

Related Links

Contains a list of related links, maximum of 72 characters. Feature Profiles

Contains: A photograph, title, description text, link, and a brief biography

Photo/Video Gallery

Contains images or embedded YouTube videos and subsequent titles

Photo Gallery Navigation

Contains thumbnails from the gallery. These are automatically generated by the CMS. Users are not required to supply thumbnail versions of their images. Quick Facts 2 col

Image Slider. A list of facts, maximum of 30 characters. Hide-and-Reveal Content

Contains: sub headings-and-content. Tabbed Sections

(12)

Widgets

/ Announcement Box

An announcement box appears in the left-hand column beneath the sub-navigation. It uses 1/3 or 2/3 columns of site width on desktop browsers.

Box header

Open Sans, uppercase, 18px, #fff

Typographic Specifications

Announcement Headline

Open Sans, 15px, #0066cc

Announcement Copy

(13)

Widgets

/ Index Box

The Article Index displays navigation to several articles. You cannot place images in the Article Index.It uses 1/3 columns of site width on desktop browsers.

Header

Noto Serif, 24px, #28447e

Typographic Specifications

Header supplement

Open Sans, 12px, #28447e

Article Title

Open Sans Bold, 15px, #00338e

Article Date

Open Sans Bold, Uppercase, 11px, #eeb335

Article Summary

(14)

Widgets

/ Quick Facts

The Quick Facts widget contains a miniature slideshow with a series of callout facts below. Keep callout facts to one line only, 28 characters.

Box header

Open Sans, uppercase, 18px, #fff

Typographic Specifications

Quick Fact Slide

238px x 98px

Quick Fact Figure

Noto Serif, 16px, #0066cc

Quick Fact Label

(15)

Widgets

/ Related Links

Related Links are links to pages that are supplemental to the current page content. This widget uses 1/3 columns of site width on desktop browsers.

Box header

Open Sans, uppercase, 18px, #fff

Typographic Specifications

Link

(16)

Widgets

/ Featured Profile

Featured Profiles appear in the left-hand column. They are used for featuring exceptional Students & Alumni in the Worcester State University community. Profiles are brief storytelling tools. This widget uses 1/3 or 2/3 columns of site width on desktop browsers.

Box header

Open Sans Bold, uppercase, 19px, #fff

Typographic Specifications

Image

229px x 124px

Feature Title

Open Sans, 15px, #003399

Featured Profile Link

Open Sans Bold, uppercase, 11px, #0066cb

Featured Profile Copy

(17)

Widgets

/ Video Player & Photo Gallery

The video player can hold an embedded YouTube player and/or a series of

photographs. It uses 1/3 or 2/3 columns of site width on desktop browsers and full site width on tablet and smartphone browsers.

Box header

Open Sans Bold, uppercase, 19px, #fff

Typographic Specifications

Video

2/3 columns: 600px x 346px 1/3 columns: 286px x 165px

Single Column Title

(18)

Widgets

/ Tabbed Boxes

Tabbed boxes appear in the main content area. They are useful for separating content into categories. This widget uses 1/3 or 2/3 columns of site width on desktop browsers.

Tab Title

Open Sans, 15px, #fff

Typographic Specifications

Tab Body Copy

Open Sans, font-size 14px, line-height 14px, #666

(19)

Widgets

/ Hide-and-Reveal Boxes

The Hide-and-Reveal Boxes are used to separate content into categories. The user must click on the plus sign to reveal the content in each box. It uses 1/3 or 2/3 columns of site width on desktop browsers.

Box header

Open Sans, 15px, #fff

Typographic Specifications

Paragraph Copy

Open Sans, font-size 14px, line-height 14px, #666

(20)

Widgets

/ Form

The form widget is used for capturing contact information from interested parties. It generally serves an administration and admissions function. It uses 2/3 columns of site width on desktop browsers and full width of the browser on tablet and smartphone browsers.

Header

Noto Serif, 20px, #00338e

Typographic Specifications

Form Items

Open Sans, font-size 14px, line-height 14px, #666

CAPTCHA

Determines if you are human and not a “spam bot.” *required

(21)

Images

/ Overview

Images used on the site should be professional quality images. Photography must be contemporary to reflect the new website. Images should

accurately enhance the student experience and capture the essence of Worcester State University. It is highly recommended to avoid placing non-HTML text over images. Should the occasion occur where it is necessary use the font Noto Serif or Open Sans and only a few words.

Images uploaded to the site should be 72dpi images in the RGB color space. To maintain quality and consistency, all photography used on the site should be cropped or scaled to the appropriate size (e.g. the home-page carousel slider control). Also, chosen images should never be stretched,

(22)

Images

/ Specifications

Home page Slider

720px x 394px

The most prominent area on the home page is the photo slider. These images should be thought-provoking and encourage the user to take action and get more information about Worcester State University. For example, a photo of a student using real-world skills or in an internship environment. The headline text and link is placed over the image and should be a short, powerful, high-level brand message relating to the story behind the image. It is recommended that this headline be 7 words or less. Optional captions are overlayed on the bottom left of the image, and slide markers are present on the

720px

394px

(23)

Images

/ Specifications

Home News Feature

259px x 141px

Home Page News Feed

140px x 150px

Home Page Sidebar

Slideout Feature

(24)

Images

/ Specifications

Home Ad Space Banner

284px x 103px

Left Column Banner

(25)

Images

/ Specifications

Secondary Page

Header/Slider Images

600px x 245px

Image carousels are present on any secondary page templates. When choosing the composition of the image, bear in mind the caption (46-character limit) will overlay the illustrated areas. Captions and image carousels are

optional. Showing a single photo is fine. 600px

245px

Caption Sentence

Limit: 46 characters including spaces

(26)

Images

/ Specifications

Images in Body Content

These images appear in a row of 3 in the body content of a secondary level page. A 2-pixel border is added with the color #666666.

Image Size

(27)

Images in Departments Page

Each academic department has an image on this page. A white and blue border is automatically added by the system. Its is a 1-pixel border with the color #00338e, and a 4-pixel, padded white frame.

(28)

Images

/ Specifications

Images in Faculty Profiles

The faculty portrait is displayed in the right column of a profile on a faculty member page. It is 120px wide by 180px tall and no border.

The system will automatically apply a 2-pixel gray border to the image.

Image Size

(29)

Images

/ Tablet Icons

Icons on Tablet Devices

Icons should always be simple and communicate easily. They are 193px wide and 156px tall.

Width

193px

Height

(30)

Images

/ Mobile Icons

Icons on Smartphone Devices

Icons should always be simple and communicate easily. They are 114px wide and 89px tall.

Width

114px

Height

(31)

Images

/ What Not to Do

Too pixelated (low resolution image)

Blatant use of stock photography

Text added on image

Stretching images and wrong dimensions

(32)

Portal

/ Images

Toolkit Icons

The blue toolkit icons are 43px x 40px

Blog Pictures

150px x 150px

Footer Icons

Figure

Updating...

References

Updating...

Related subjects :