MUSE Web Style Guide DRAFT v3

Transcription

1 MUSE Web Style Guide 2016 DRAFT v3

2 STYLE GUIDE CONTENTS STYLE GUIDE PURPOSE COLOR PALETTE TYPOGRAPHY MOOD BOARD IMAGERY FOR CONCEPTUALIZING HEADER, FOOTER, NAVIGATION HOMEPAGE and DROP DOWN NAVIGATION

3 STYLE GUIDE PURPOSE The purpose of this style guide is to serve as a reference and provide defined specifications of creative design elements; colors, fonts, imagery, usage and placement of these design elements. Use this guide for consistency when updating existing content and developing new content or new pages. This guide will aid in developing the source files (CSS) for the various page templates/assets. The color palettes, font specifications and page layouts contained within this document represent core pages of the website as they will exist. Harvard University core color palette, accent color palette and suggested typography served as a reference in flushing out the design for MUSE.

4 HARVARD UNIVERSITY CORE COLOR PALETTE A core palette has been defined to provide a neutral field against which the crimson can live, as per the Graphic Identity Standards Manual, Sept 2015, Developed by Harvard Public Affairs & Communications. Color PMS CMYK & RGB HEX Color PMS 1807 Coated 7/94/65/25 #A51C30 CRIMSON PMS 187 Uncoated RGB=165 / 28 / 48 INK MORTAR PARCHMENT SLATE SHADE hex# : 1e1e1e rgb: 30 / 30 / 30 hex# 8c8179 rgb: r-140 g-129 b-121 hex# f3f3f1 rgb: r-243 g-243 b-241 hex# 8996a0 rgb: r-137 g-150 b-160 hex# bac5c6 rgb: r-186 g-197 b-198

5 HARVARD UNIVERSITY ACCENT COLOR PALETTE An accent color palette has been defined for highlighting, as per the Graphic Identity Standards Manual, Sept 2015, Developed by Harvard Public Affairs & Communications. INDIGO IVY SAFFRON hex# rgb: r-41 g-51 b-82 hex# 52854c rgb: r-82 g-133 b-76 hex# d16103 rgb: r-209 g-97 b-3 BLUE- BONNET PEAR GOLD *Commemorative wreath 3.9 Accessibility Passes AA for large text (above 18pts or bold above 14pts) hex# 4e84c4 rgb: r-78 g-132 b-196 hex# c3d7a4 rgb: r-195 g-215 b-164 hex# c4961a rgb: r-196 g-150 b-26 LEMON CREAM hex# ffd86d hex# f4dcca

6 BOOTSTRAP COLOR PALETTE MAPPED TO HARVARD ACCENT COLOR PALETTE Bootstrap Color Palette: Harvard Accent colors replace Bootstrap variables such as primary, success, info and warning. Corresponding tints were also created. Parchment core color could be used as the default. Crimson should have it s own variable and should not be associated with Bootstrap Danger. DEFAULT #333 PRIMARY #337ab7 SUCCESS #3c763d INFO #31708f WARNING #8a6d3b DANGER #a94442 HOVER DEFAULT #333 PRIMARY # SUCCESS #2b542c INFO # WARNING #66512c DANGER # Harvard Accent INDIGO # IVY #52854c BLUEBON- NET #4e84c4 SAFFRON #d % Tint INDIGO IVY BLUEBONNET SAFFRON

7 BOOTSTRAP Bootstrap Gray Scale lighten(#000, 13.5%); // lighten(#000, 20%); // lighten(#000, 33.5%); // lighten(#000, 46.7%); // lighten(#000, 93.5%); // #eee BTN DEFAULT #333 FOCUS #333 HOVER #333 color: #333; background-color: #fff; border-color: #ccc; color: #333; background-color: #e6e6e6; border-color: #8c8c8c; color: #333; background-color: #e6e6e6; border-color: #adadad;

8 BOOTSTRAP Bootstrap Color Palette mapped to Harvard Accent Palette Bootstrap Color darken(#428bca, 6.5%); // #d9534f; Harvard Accent Color Variables Mapped to Bootstrap Color darken($indigo, #d9534f; // Default Bootstrap red Harvard Colors Set to Variables /* Harvard Core Colors */ $crimson: #a51c30; $ink: #1e1e1e; $mortar: #8c8179; $parchment: #f3f3f1; $slate: #8996a0; $shade: #bac5c6; /* Harvard Accent Colors */ $indigo: #293352; $bluebonnet: #4e84c4; $ivy: #52854c; $pear: #c3d7a4; $lemon: #ffd86d; $saffron: #d16103; $gold: #c4961a; $cream: #f4dcca;

9 TYPOGRAPHY Fonts used are the Harvard recommended, non-licensed, system fonts as listed in the Graphic Identity Standards Manual, Sept 2015, Developed by Harvard Public Affairs & Communications. System fonts - body copy and headers - sans serif and serif Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ Abcdefghijklmnopqrstuvwxyz Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZ Abcdefghijklmnopqrstuvwxyz Arial Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ Abcdefghijklmnopqrstuvwxyz Georgia Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ Abcdefghijklmnopqrstuvwxyz Arial Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ Abcdefghijklmnopqrstuvwxyz Geogia Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ Abcdefghijklmnopqrstuvwxyz

10 MOOD BOARD IMAGERY FOR CONCEPTUALIZING AND FLUSHING OUT BRANDING Suggested element selection and tone should pop and be compelling. Use of images / icons should create interest and compliment this overall theme. KEYWORDS: Accessible Pop Fun Engaging Vibrant Global Quality Established 18 to 22 years old

11 FLUSHING OUT BRANDING FROM MOOD BOARD Branding elements and icons tone should pop and create an overall cohesive theme. KEYWORDS: Accessible Pop Fun Engaging Vibrant Global Quality 3 Established 18 to 22 years old

12 FLUSHING OUT BRANDING FROM MOOD BOARD Branding elements and icons tone should pop and create an overall cohesive theme. KEYWORDS: Accessible Pop Fun Engaging Vibrant Global Quality Established 18 to 22 years old

13 PROCESS TO BRANDING Branding elements and icons tone should pop and create an overall cohesive theme. KEYWORDS: Accessible Pop Fun Engaging Vibrant Global Quality Established 18 to 22 years old

14 BRANDING UNIQUE TO MUSE Experimenting with variations on orange coupled with Harvard Accent Cream to come up with a Unique Muse Orange for use in the logo and highlights. Muse Orange should be unique to this application and should not be used for other applications. ORANGE #f2412d CREAM #f4dcca ORANGE #f2412d PARCHMENT #f3f3f1 ORANGE #d81118 CREAM #f4dcca RGB:

15 BRANDING UNIQUE TO MUSE Final Logo version... Muse Orange #d81118, RGB: with Harvard Accent Cream, Cream #f4dcca. Muse Orange should be unique to this application and should not be used for other applications. ORANGE #d81118 CREAM #f4dcca RGB:

16 EXISTING HEADER Out of the box Font Size: 0.875rem (14px) Font Color #9d9d9d Background Color: # luminosity contrast ratio is sufficient Level AA Tab brings up skip to main content option. Hover Color #fff Focus Outline Border Color #adadad The contrast ratio is: 5.63:1 Active

17 BRANDED HEADER Branded Nav Informational glyphicon color Boostrap info is mapped to $bluebonnet Tab brings up skip to main content option. Hover Colors background: $parchment outline: $lemon text: $muse-orange $muse-orange (#d81118) over $parchment (#f3f3f1) passes WCAG AA for normal text 4.71:1 Focus has underline Active same as focused

18 LANDING PAGE DESKTOP VIEW Including footer.

19 LANDING PAGE ipad VIEW

20 LANDING PAGE iphone 6 VIEW...

21 NAVS EXPANDED

22 MOBILE NAVIGATION Branding elements and icons should pop and create an overall cohesive theme. First time in landing page. Another option for mobile nav... Instead of using the hamburger button, stack the logo brand along with login on top of a horizontal nav with only three selections in the horizontal nav. BALSAMIQ MOCKUPS: Accessible Pop Fun Engaging Vibrant Global Quality Established 18 to 22 years old

23 BRANDED HEADER AND ACCESSIBILITY GUIDELINES (WCAG) 2.0 HARVARD HUIT MUSE Common issues report April 2016 (HHM). Color contrast minimum (Level AA) normal text and images should have a minimum color contrast ratio of 4.5:1. Branded Nav main.html <a class= navbar-brand href= / ><img alt= src= /static/images/tutor-icon.png width= 30 >MUSE</a> HHM see pg8. Solution:...combine the links and use a null alt attribute value. <!-- <button class= btn btn-xs btn-info gly-radius data-toggle= tooltip data-placement= bottom data-originaltitle= Click any question mark icon to get help and tips with specific tasks aria-describedby= tooltip > <span class= glyphicon glyphicon-question-sign aria-hidden= true ></span> <span class= sr-only >Click any question mark icon to get help and tips with specific tasks</span> </button> <!-- Alert triggered on click --> $(function () { $( [data-toggle= tooltip ] ).tooltip({ trigger: click }); }); HHM see pg31. Solution:..changed element to a button, changed the interaction to activate the tooltip on click (which, if using a button will automatically trigger with the space and enter keys) Informational glyphicon color is Boostrap info mapped to Harvard bluebonnet. Enlarged glyphicon font size from 12 px to 16 px as white on Bluebonnet contrast 3.91:1 fails WCAG AA for normal text but passes for large text Bluebonnet on nav bar black # gets 4.71:1 WCAG AA pass for normal text Tab brings up skip to main content option. Hover Colors background: $parchment outline: $lemon text: $muse-orange Focus has underline $muse-orange (#d81118) on Harvard $parchment contrast 4.71:1 passes WCAG AA for normal text.

24 Contrast Ratio: 4.66:1 for:.jumbotron {background-color: #f3f3f1; //$parchment} h1 small {color: #6d6d6d;} I tweaked the styles for the h1 tags:.step-tracker { color: $muse-orange; font-weight: bold; font-size:.6em; }.lead { text-align: left; margin-bottom: 1em; }.banner { padding: 0.5em; border-radius: 3px; color: $indigo; background-color: $parchment; } <div class= container > <div class= row id= content tabindex= -1 > <!-- Page Title... every page needs an h1 tag --> <h1 class= banner > Bureau of Study Counsel Peer Tutor Request Form <span class= step-tracker >Step 1 of 2</span> <!-- <span class= title-icon > <img src= images/book-icon-sm.png alt= >

25 BRANDED H1 TAG Each page has one level one, h1 tag. All subsequent headings should be in appropriate order for accessibility. For example next is h2 then h3 up to h6. Informational glyphicon color Boostrap info is mapped to $bluebonnet H1 tag with branding When using all 12 columns use row columns instead of two divs with two classes row and cols-sm-12 <div class= row columns > <h1 class= banner >Dashboard <span class= step-tracker nowrap > Subtitle </span> </h1> </div><!--end row columns--> H1 tag branding styles in lk.css.banner { padding: 0.5em; border-radius: 3px; text-align: left; border-radius: 3px; color: #293352; background-color: #f3f3f1; }.step-tracker { color: #d81118; font-weight: bold; font-size: 2rem; }