Website Style Guide 2014

Transcription

1 Website Style Guide 2014

2 Contents 3 Color / Pallette Images / Tablet & Mobile Icons 4 Page Templates / List 31 Images / What Not to Do 5 Typography / Fonts 32 Portal / Image Specifications 6-7 Typography / Styles 8-9 Typography / Navigation 10 Layout Widgets 21 Images / Overview Images / Specifications 2

3 Color / Pallete WSU Blue WSU Yellow Content Background R0 G51 B142 hex #00338e R238 G179 B53 hex #eeb335 R242 G242 B242 hex #efefef Link Color Main Text Color Footer Color R0 G102 B204 hex #0066cc R102 G102 B102 hex # R23 G33 B84 hex # Accent Color R134 G156 B195 hex #869cc3 3

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 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 Used for the sitemap Graduate Detail without Left Nav As above, but without left navigation 4

5 Typography / Fonts Primary Font Open Sans ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Used for body copy. Secondary Font Open Sans Bold ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Title Font Noto Serif ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Used for menu items, subheadings (h2, h3, h4, etc.), and form labels. Used for main titles (h1). 5

6 Typography / Styles Header Styles Body Copy 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 # This is body copy lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. 14px/1.5em Open Sans # 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 # This is a text link. 14px/1.5em Open Sans #0066cc underlined Header 5 13px Open Sans Bold #28447e 6

7 Typography / Styles Example of Correct Typograpy Header 1 Page Title Header 2 Page Headline Body Copy Paragraph 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. Header 3 Subheading Body Copy Paragraph 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 ready to succeed. 7

8 Typography / Navigation Main Navigation Font OSWALD ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Used for main menu. Always capitalized. Left Navigation Font Open Sans Bold ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Left Sub Navigation Font Open Sans ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Used for left-side sub menu. Used for left-side navigation. 8

9 Navigation Typography / Styles Example of Correct Typograpy Main Navigation Font Left Side Navigation Left Side Sub Navigation 9

10 Layout 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. Global Header Contains main menu with dropdown navigation menus and useful links. Icons Page printing, , social-media sharing and RSS feed link. Main Content Contains the main page content. Global Footer Contains navigation links, contact information, and social-media links. 10

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 Contains: Tab titles and content. 11

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. Typographic Specifications Box header Open Sans, uppercase, 18px, #fff Announcement Headline Open Sans, 15px, #0066cc Announcement Copy Open Sans, 14px, #666 This widget is not available on mobile and tablet devices. 12

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. Typographic Specifications Header Noto Serif, 24px, #28447e Header supplement Open Sans, 12px, #28447e Article Title Open Sans Bold, 15px, #00338e Article Date Open Sans Bold, Uppercase, 11px, #eeb335 Article Summary Open Sans, 12px, #666 Article Link Open Sans, 12px, #666 This widget is not available on mobile and tablet devices. 13

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. Typographic Specifications Box header Open Sans, uppercase, 18px, #fff Quick Fact Slide 238px x 98px Quick Fact Figure Noto Serif, 16px, #0066cc Quick Fact Label Open Sans, 11px, #4e483b This widget is not available on mobile and tablet devices. 14

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. Typographic Specifications Box header Open Sans, uppercase, 18px, #fff Link Open Sans Bold, 12px, #00338e This widget is not available on mobile and tablet devices. 15

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. Typographic Specifications Box header Open Sans Bold, uppercase, 19px, #fff Image 229px x 124px Feature Title Open Sans, 15px, # Featured Profile Link Open Sans Bold, uppercase, 11px, #0066cb Featured Profile Copy Open Sans, 14px, line-height:21px, #666 This widget is not available on mobile and tablet devices. 16

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. Typographic Specifications Box header Open Sans Bold, uppercase, 19px, #fff Video 2/3 columns: 600px x 346px 1/3 columns: 286px x 165px Single Column Title Open Sans Bold, 10px, #0f3f95 This widget is available on mobile and tablet devices. 17

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. Typographic Specifications Tab Title Open Sans, 15px, #fff Tab Body Copy Open Sans, font-size 14px, line-height 14px, #666 This widget is not available on mobile and tablet devices. 18

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. Typographic Specifications Box header Open Sans, 15px, #fff Paragraph Copy Open Sans, font-size 14px, line-height 14px, #666 This widget is not available on mobile and tablet devices. 19

20 Widgets / Form The form widget is used for capturing contact Typographic Specifications 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 Form Items Open Sans, font-size 14px, line-height 14px, #666 CAPTCHA Determines if you are human and not a spam bot. *required This widget is available on mobile and tablet devices. 20

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, scaled, or otherwise modified. 21

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 thoughtprovoking and encourage the user to take action 394px 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 720px 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 Slider Control top right. There is a linked text option to create a call-to-action opportunity. Caption Sentence Headline Text 22

23 Images / Specifications Home News Feature Home Page News Feed Home Page Sidebar Slideout Feature 259px x 141px 140px x 150px 230px x 125px 23

24 Images / Specifications Home Ad Space Banner Left Column Banner 284px x 103px 272px x 200px 24

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 25

26 Images / Specifications Image Size 182px x 116px 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 #

27 Images / Specifications Image Size 199px x 135px 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. 27

28 Images / Specifications Image Size 120px x 180px 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. 28

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 156px 29

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 89px 30

31 Images / What Not to Do Too pixelated (low resolution image) Text added on image WSU Virtual Tour! Blatant use of stock photography Stretching images and wrong dimensions 31

32 Portal / Images Toolkit Icons The blue toolkit icons are 43px x 40px Blog Pictures 150px x 150px Footer Icons 45px x 45px 32