Responsive Grid. Grid Variations. Built with responsive 12 column grid, layouts and components. LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER

Transcription

1 WEB STYLE GUIDE

2 School of Medicine Styleguide LAYOUT Responsive Grid Built with responsive 12 column grid, layouts and components. Grid Variations One Column LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER 1170 px maximum main wrapper width Two Column Left LOGO HEADER IMAGE SECONDARY NAVIGATION LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER Two Column Right LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER Three Column LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER FOOTER

3 School of Medicine Styleguide LAYOUT Responsive Layout Adapts the layout to the viewing environment by using fluid proportion-based grids, flexible images, and CSS3 media queries. Desktop Layout Tablet Layout Phone Layout

4 Typography Color Palette School of Medicine uses bold typography to create stronger hierachies and drama across all our web sites. We have chosen the Google font family Open Sans as the web font of choice because it is an open source font that closely resembles Myriad Pro (the Univerisity s preferred sans serif font #ae162b R 174 G 22 B 43 #f0583e R 240 G 88 B 62 family for print publications), and because it has a varitey of weights and widths available. Open Sans Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz #046c93 R 5 G 108 B 147 #27abe2 R 240 G 88 B )!?&,: Open Sans Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ #a0cb39 R 160 G 203 B 57 #eeeeee R 238 G 238 B 238 abcdefghijklmnopqrstuvwxyz )!?&,: #aaaaaa # R 170 G 170 B 170 R 86 G 86 B 86

5 Typography <H1> Heading, 600 Open Sans Bold 27px <H2> Heading, Open Sans 20px <H3> Heading, bold Open Sans 18px A Splash of Red Crimson is the color of The University of Utah. However, red should not be the predominant color on our web sites. Use red sparingly and as an accent to add emphasis or interest to web pages. <p> Body, 400 Open Sans 16px. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptate distinctio reprehenderit, autem deleniti ad voluptatum eaque. Optio ea aperiam nisi distinctio nemo repellat, voluptate fugiat. Quidem neque illum. Breadcrumbs > Breadcrumbs > Active Breadcrumb This style is for text links is blue #27abe2 This style is for text links hover is dark blue #046c93

6 Header Header logo consists of SOM logo with the department name next to it. The department text should not change throughout the entire site and will link to the department home page. Social media icons are linked to department social media site. Search feature on the right. This searches all of health sciences and is not department based. When left navigation is used, the text in the header image should match the section name. The format is department/division name followed by the section name. Header images are sized at 1500 X 150. These images are intended to be used as a design element and should not contain pictures that need to be seen fully (i.e. a group photo or photos with text). Make sure the header image is dark enough for the white text to be legible.

7 Navigation There are a number of different types of secondary navigation. They are broken into two categories: horizontal and vertical navigation. Horizontal Navigation Upper Navigation The upper navigation remains consistent throughout the department or divisions. Keep It Simple Limit the number of web pages in the navigation menu.if you have too many categories in your navigation menu, visitors may overlook important information. Re-think your site structure. It may require tiered navigation (drop down menus). Sum up what information a visitor will find in a word or two. You don t have much real estate in the navigation bar. And your users don t have much patience. Be succinct. Section Navigation These navigational elements are used mostly on lab homepages but can be used on other pages if wanted. They are a way to better showcase more simple groups of pages to lead the user to a specific area of the site.

8 Vertical Navigation Multi Page Left Column Navigation Multi Page left column navigation is used when pages have many additional sub pages. You can use icons to customize your left navigation. Icons can found at: test.medicine.utah.edu/ redesign/icons.html When left navigation is used, the text in the header image should match the section name. The format is department/division name followed by the section name. Simple Left Column Navigation These are navigational links generally used on homepages to call out important sections which are not essential to the main navigation. In mobile view these will be the first things that the user sees.

9 Hero Images Hero images can either be a single image, a slideshow, or a video. The images should be sized at: 822 X 395. The hero image is always located under the secondary navigation and to the right of the left navigation if present. The blue box on the right shows the position. LOGO HEADER IMAGE SECONDARY NAVIGATION Single Image Slideshow FOOTER Video

10 Widgets Widgets are customizable elements that generally appear on the right column of a page. They are used for supporting content or providing other information such as event dates. Below are all of the widgets available on School of Medicine: Text Widgets Text widgets are the most basic widget. All text widgets must have at the minimum a headline and another element. These other elements consist of either a short paragraph, an icon, or a button. Link, Archive and Document Widgets There are a variety of widgets which contain links. Link widgets contain links to internal pages or external sites, archive widgets link to folders of archived material, and document widgets contain links to specific documents.

11 Image, Video and Banner WIdgets Multimedia widgets can consist of photos with text, photos with a text overlay, and videos. Event Widgets There is only one event widget available. It is used to show 3 upcoming events and includes a link to the main calendar.

12 Icons Icons add customization to each page. Icons are mainly used in the various types of navigation but can also be used in certain widgets. A list of all icons is available at:

13 News News has 3 options (pulled in by matching department or division tags): 1. Pull in department and/or division specific news from Health Sciences. 2. Combine Health Sciences news with department generated news. 3. Department generated news only

14 Profile Pages Version 1 Version 2

15 Contact Us Contact Us pages are generally made of a table with contact information and links. If you have 4 or more columns, text needs to be kept to a minium so it can be read on mobile devices.