Website Style Guide 2014

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "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

Online Brand Guide JANUARY 2013

Online Brand Guide JANUARY 2013 Online Brand Guide JANUARY 2013 Hello! This is a guide to the basic elements of the Sacred Heart University website. For General Usage questions, please contact: Nancy Boudreau Director of Web Content

More information

Colgate University Website Content Style Guide

Colgate University Website Content Style Guide University Website Content Style Guide Website Color Palette Maroon #862633 Dark Orange #e7810b Blue #365777 Gray #58595b Light Orange* #e39615 NOTE: No other colors are to be used within colgate.edu.

More information

TOOLKITPRO << Table of Contents

TOOLKITPRO << Table of Contents > 1. OVERVIEW Brand Diagram Homepage... 3 News Article... 4 2. LOGO MARKS U.S. Army Logo Styles & Usage... 5 WWW.ARMY.MIL Logo Web Usage... 6 Print Usage... 6 WWW.ARMY.MIL Banner

More information

Web Standards Guide The Warren Alpert Medical School of Brown University

Web Standards Guide The Warren Alpert Medical School of Brown University Web Standards Guide The Warren Alpert Medical School of Brown University 1 Alpert Medical School Homepage Structure and Components The Alpert Medical School homepage consists of 7 parts: 1. audience gateways,

More information

Message from Marketing & Creative Services

Message from Marketing & Creative Services Web Style Guide September 2013 Message from Marketing & Creative Services 2 Campus Community Members: The University of West Florida web presence is one of the most valuable assets we have as an institution.

More information

EVENT PLANNING MYTHBUSTER. Building Pre-event Engagement: How to Make an Email Invite

EVENT PLANNING MYTHBUSTER. Building Pre-event Engagement: How to Make an Email Invite EVENT PLANNING MYTHBUSTER Building Pre-event Engagement: How to Make an Email Invite YOUR STEP BY STEP GUIDE In reality, most events begin months before the doors open on the first day. The internet is

More information

Responsive Email Design

Responsive Email Design Responsive Email Design For the Hospitality Industry By Arek Klauza, Linda Tran & Carrie Messmore February 2013 Responsive Email Design There has been a lot of chatter in recent months in regards to Responsive

More information

1.1. Design elements

1.1. Design elements 1.1 Design elements 1 The fundamental design elements, color, typography, structure and imagery contribute to an optimal user experience. The following section details the specifics of these elements.

More information

I. Introduction... 3 II. Web Page Design Templates... 3

I. Introduction... 3 II. Web Page Design Templates... 3 T able of Contents I. Introduction... 3 II. Web Page Design Templates... 3 Design #1 - Red Bar with Tabs Template... 3 Design #1 - Options for Subpage layout/navigation... 4 Design #2 - Red Bar without

More information

Mobile Web Site Style Guide

Mobile Web Site Style Guide YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University

More information

www.xad.com Creative GUIDELINES

www.xad.com Creative GUIDELINES www.xad.com Creative GUIDELINES General Guidelines Required Assets For best results, please provide fully editable assets. FILES Design Files - Layered PSD (Photoshop) / Layered PNG (Fireworks) Fonts -

More information

Using the Adventist Framework with your netadventist Site

Using the Adventist Framework with your netadventist Site Using the Adventist Framework with your netadventist Site Introduction: The Adventist framework is available for everyone with a netadventist web site. Sites using this framework will visually identify

More information

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux

More information

UPSIDE EDUCATION RESPONSIVE WORDPRESS THEME DOCUMENTATION

UPSIDE EDUCATION RESPONSIVE WORDPRESS THEME DOCUMENTATION 1 UPSIDE EDUCATION RESPONSIVE WORDPRESS THEME DOCUMENTATION Created: Sep 09/ 2015 Version: 1.0.+ WordPress Theme Developed by Kopatheme Email: support@kopasoft.com After activating the theme please ensure

More information

RSW. Responsive Fullscreen WordPress Theme

RSW. Responsive Fullscreen WordPress Theme RSW Responsive Fullscreen WordPress Theme Thank you for purchasing this theme. This document covers the installation and Setting up of the theme. Please read through this Help Guide if you experience any

More information

Joomla Article Advanced Topics: Table Layouts

Joomla Article Advanced Topics: Table Layouts Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand

More information

<Insert Picture Here> Designing the Oracle Store with Oracle Application Express Marc Sewtz Software Development Manager Oracle Application Express Oracle USA Inc. 540 Madison Avenue,

More information

Cardiff University User Experience Style Guide

Cardiff University User Experience Style Guide Page 1 Cardiff University User Experience Style Guide cardiff.ac.uk/ux V2 : 04/06/2013 Page 2 Contents Page 3 Page 4 Page 17 Page 35 Page 52 About Type Sizes Iconography Welsh Page 5 Page 18 Page 41 Page

More information

introduces the subject matter, presents clear navigation, is easy to visually scan, and leads to more in-depth content. Additional Resources 10

introduces the subject matter, presents clear navigation, is easy to visually scan, and leads to more in-depth content. Additional Resources 10 STYLE GUIDE Style Guide for Course Design Think of your Moodle course page as the homepage of a website. An effective homepage: introduces the subject matter, presents clear navigation, is easy to visually

More information

FAQs. How do I remove the search bar completely?

FAQs. How do I remove the search bar completely? FAQs Company Logo How do I change the logo? Can I make the logo larger or smaller? How do I add change or remove the logo in the footer? Can I add a favicon? Navigation Menu How do I change my navigation

More information

Google Sites Getting Started

Google Sites Getting Started Google Sites Getting Started 1. Log into your gmail account 2. Click on Sites 3. Click on Create 4. Choose a Template if you want (these will have preset elements and page settings which you can then adapt

More information

LE LOGO NORMALISATION DIGITAL MEDIA GUIDELINES

LE LOGO NORMALISATION DIGITAL MEDIA GUIDELINES 1 LE LOGO NORMALISATION DIGITAL MEDIA GUIDELINES JANUARY 2015 Before taking any kind of action, please check to make sure that what you plan to do is in line with Total s strategy. Refer any questions

More information

June Brand Guidelines. For External Use

June Brand Guidelines. For External Use June 2016 Brand Guidelines For External Use Content 1.0 Basic Elements Page 3 2.0 Trademarks Page 10 3.0 Creating Unique Materials Guidance for Franchises Page 12 4.0 Creating Unique Materials Guidance

More information

Bill Pay Marketing Program Campaign Guide

Bill Pay Marketing Program Campaign Guide Bill Pay Marketing Program Campaign Guide This guide provides details on each of the creative components in this campaign, including the target audience, timing, placement, and sample images. SEASONAL

More information

QUICK START GUIDE FOR CLUB WEBSITES

QUICK START GUIDE FOR CLUB WEBSITES QUICK START GUIDE FOR CLUB WEBSITES Introduction Quick Start Guide for Club Websites For more than 100 years, Rotary has united leaders committed to applying their expertise to better their communities.

More information

Getting Started with Google Sites

Getting Started with Google Sites Getting Started with Google Sites Getting Started with Google Sites 1 Background Information Google Sites is an online application that makes creating a team web site as easy as editing a document. With

More information

CONTENTS. 03 BRAND IDENTITY 04 Logo 06 Wordmark 07 Graphic Element 08 Logo Usage 13 Logo Elements

CONTENTS. 03 BRAND IDENTITY 04 Logo 06 Wordmark 07 Graphic Element 08 Logo Usage 13 Logo Elements GRAPHIC STANDARDS 1 CONTENTS 2 03 BRAND IDENTITY 04 Logo 06 Wordmark 07 Graphic Element 08 Logo Usage 13 Logo Elements 14 SUPPORTING ELEMENTS 15 Color Specifications 16 Typography 17 Layout & Photography

More information

Table of Contents. 3 Custom Meta Boxes 3.1 Slider meta box 3.2 Page header meta box 3.3 Sidebar meta box 3.4 Post format meta boxes

Table of Contents. 3 Custom Meta Boxes 3.1 Slider meta box 3.2 Page header meta box 3.3 Sidebar meta box 3.4 Post format meta boxes 0 User Guide Table of Contents 1 Getting started 1.1 Requirements for Mobius 1.2 Theme installation 1.3 Plugins installation 1.4 1-click demo installation 1.5 Regenerate images 1.6 Set home page 1.7 Set

More information

2016 Oakland University Website Layout Governance

2016 Oakland University Website Layout Governance 2016 Oakland University Website Layout Governance General Layout of Pages There are several locations within a web page to strategically communicate information. Main content area: This should be used

More information

Style Guide Provided courtesy of Innovative Emergency Management Inc.

Style Guide Provided courtesy of Innovative Emergency Management Inc. Style Guide 1. Introduction Louisiana.gov is an enterprise approach for state agencies to work together to provide citizen-centric digital government services and information. Key to achieving this goal

More information

User Guides Neetrix SiteFront

User Guides Neetrix SiteFront User Guides Neetrix SiteFront The website building and content management system 2011 v1.00 1 INTRODUCTION This documentation takes you through the process of building a website step by step using the

More information

OneSixty Themes Fade Theme

OneSixty Themes Fade Theme OneSixty Themes Fade Theme Documentation v.1.0 1. Installing Theme 1.1 Installation Process 1.2 Theme Activation 2. Setting up Home and Blog Page 2.1 Homepage 2.2 Blog Page 3. Admin panel usage 4. Home

More information

HTML Editor Contents. User Guide Updated August 22, 2008

HTML Editor Contents. User Guide Updated August 22, 2008 HTML Editor 8.3.0 User Guide Updated August 22, 2008 Contents About this guide Audience Related guides HTML Editor Overview Accessing the HTML Editor HTML Editor tabs HTML Editor Views HTML Editor Icons

More information

Email Creator Coding Guidelines Toolbox

Email Creator Coding Guidelines Toolbox Email Creator Coding Guidelines Toolbox The following information is needed when coding your own template from html to be imported into the Email Creator. You will need basic html and css knowledge for

More information

1. How Basekit Works

1. How Basekit Works 1. How Basekit Works BaseKit is site building software that runs on an external BaseKit server and is accessible through your cpanel account. To use BaseKit, just follow these steps: 1. Log into cpanel

More information

Building a Website using Site Builder

Building a Website using Site Builder Building a Website using Site Builder Getting Started Request a site via webdev@whoi.edu. Go to http://www.whoi.edu/siteselect.do Log in using your email username and password Click on your site Site Builder

More information

Aviva. Mobile Style guidelines v1.0

Aviva. Mobile Style guidelines v1.0 Aviva Mobile Style guidelines v1.0 Logo The Aviva logo represents our business to the wider world and is the most recognisable part of our brand identity. 1. Aviva landscape logo The Aviva logo is available

More information

Brand Identity Standards

Brand Identity Standards Brand Identity Standards CONTENTS 1 Our Logo 2 Logo: Clear Space & Minimum Size 3 Logo: Solid 4 Logo: Divisional Lines 5 Background Control 6 Incorrect Use 7 Brand Color Palette 8 Typography 9 Stationery:

More information

LeadSquared landing pages are now responsive

LeadSquared landing pages are now responsive LeadSquared landing pages are now responsive What is a responsive landing page g Technically It is an approach to web design aimed at crafting sites for an optimal viewing experience easy reading and navigation

More information

Citywide User Experience Design Guidelines: NYC.gov Style Guide. Final 1.2 - Public 11/8/2013

Citywide User Experience Design Guidelines: NYC.gov Style Guide. Final 1.2 - Public 11/8/2013 CITYWIDE GUIDELINES Citywide User Experience Design Guidelines: NYC.gov Style Guide 1.0 Overview Final 1.2 - Public 11/8/2013 City of New York Department of Information Technology and Telecommunications

More information

Creating a Website Using Weebly.com (June 2016 Update)

Creating a Website Using Weebly.com (June 2016 Update) Creating a Website Using Weebly.com (June 2016 Update) Weebly.com is a website where anyone with basic word processing skills can create a website at no cost. No special software is required and there

More information

Web Standards. Chapter Organization To better organize this chapter, topics are grouped according to content, design and technical criteria.

Web Standards. Chapter Organization To better organize this chapter, topics are grouped according to content, design and technical criteria. Overview This chapter addresses the University of San Diego s web standards, which are used to create consistency among university web pages and tie the university s website to its printed materials and

More information

Drupal Training Guide

Drupal Training Guide Drupal Training Guide Getting Started Drupal Information page on the IT site: http://it.santarosa.edu/drupal On this page is information about Drupal sign up, what Drupal is, which is a content management

More information

RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide

RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide RADFORD UNIVERSITY Radford.edu Content Administrator s Guide Contents Getting Started... 2 Accessing Content Administration Tools... 2 Logging In... 2... 2 Getting Around... 2 Logging Out... 3 Adding and

More information

CONTENT MANAGEMENT SYSTEM USER GUIDE

CONTENT MANAGEMENT SYSTEM USER GUIDE CONTENT MANAGEMENT SYSTEM USER GUIDE TABLE OF CONTENTS Logging in to the CMS...p. 3 Folders...p. 4 Creating a web page...p. 5 Step one: create your content section...p. 5 Step two: use a smart form to

More information

USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE

USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE 1 TABLE OF CONTENTS Introduction 3 Parts of the Government Web Template (GWT) 4 Logging In and Getting Started 5 GWT Joomla! Module Map 8 Editing the Top Bar

More information

OSCE Website Graphic Charter INSTRUCTIONS FOR PROPER AND EFFECTIVE USE OF THE OSCE WEBSITE

OSCE Website Graphic Charter INSTRUCTIONS FOR PROPER AND EFFECTIVE USE OF THE OSCE WEBSITE OSCE Website Graphic Charter INSTRUCTIONS FOR PROPER AND EFFECTIVE USE OF THE OSCE WEBSITE Table of Contents 01 Foundations Introduction Responsive Design Visual Identity Functional Requirements Logo Usage

More information

Concept. Texting Service

Concept. Texting Service Concept User Profiles Business Advertising Texting Service Users Cellphone User Coupons Texting Service Users create account name or Handle on account creation Can search and contact other users by texting

More information

LOGO, COLOR PALETTE, & TYPEFACES

LOGO, COLOR PALETTE, & TYPEFACES DESIGN GUIDELINES In 2012, The American University of Paris celebrates its 50th anniversary. To commemorate this momentus occasion, we are introducing a new logo which seeks to: Mark 50 years of excellence

More information

ADOBE MUSE. Building your first website

ADOBE MUSE. Building your first website ADOBE MUSE Building your first website Contents Chapter 1... 1 Chapter 2... 11 Chapter 3... 20 Chapter 4... 30 Chapter 5... 38 Chapter 6... 48 Chapter 1 Installing the software and setting up the sample

More information

Awake Theme Documentation

Awake Theme Documentation Table of Contents: 01. Installation 02. Image resizing 03. General Settings 04. Homepage Settings 05. Sociables Settings 06. Slider Settings 07. Blog Settings 08. Add Sidebars 09. Footer Settings 10. Menu

More information

Black-Red XML Template

Black-Red XML Template Black-Red XML Template by artibaj Flash version: CS5 ActionScript version: 3.0 This template site is an Flash (AS3) fully XML driven website template that allows you to modify the whole content without

More information

Brock University Content Management System Training Guide

Brock University Content Management System Training Guide Brock University Content Management System Training Guide Table of Contents Brock University Content Management System Training Guide...1 Logging In...2 User Permissions...3 Content Editors...3 Section

More information

Visual Standards. for the Web

Visual Standards. for the Web Visual Standards for the Web 2 Consistent Elements 8 Common Layouts 10 Optional Elements 14 Typography 18 Co-Brands Visual standards for the Web 1 Consistent Elements Logo The University, college, unit

More information

DMA MARKETING BRIEF B2C DIRECT MARKETING PROFESSIONALS EVERY WEEK MEDIA KIT

DMA MARKETING BRIEF B2C DIRECT MARKETING PROFESSIONALS EVERY WEEK MEDIA KIT REACH62,000 MEDIA KIT B2C DIRECT MARKETING PROFESSIONALS EVERY WEEK DMA MARKETING BRIEF A C B MANY WAYS TO DELIVER YOUR MESSAGE TO THIS MARKET F A ADVERTISING OPTIONS LEADERBOARD This premier position

More information

Joomla! template Blendvision v 1.0 Customization Manual

Joomla! template Blendvision v 1.0 Customization Manual Joomla! template Blendvision v 1.0 Customization Manual Blendvision template requires Helix II system plugin installed and enabled Download from: http://www.joomshaper.com/joomla-templates/helix-ii Don

More information

Saving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4

Saving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4 CMS Editor How-To Saving work in the CMS... 2 Edit an existing page... 2 Create a new page... 4 Create a side bar section... 4 Upload an image and add to your page... 5 Add an existing image to a Page...

More information

VEGA Version /30/2016

VEGA Version /30/2016 Version 2.0 10/30/2016 Vega Pro Check out the pro version at https://www.lyrathemes.com/vega-pro INSTALLING WORDPRESS INSTALLING THE THEME Using the Administration Panel Using cpanel Manually Using FTP

More information

Drupal General Editing Manual

Drupal General Editing Manual Created and Maintained by Web Services For questions contact: nicole_leete@emerson.edu 617-824-8389 http://www.emerson.edu/web-services 2 WHAT IS DRUPAL? Drupal is Emerson College s content management

More information

Interactive Brand Guidelines Brand Standards 2012

Interactive Brand Guidelines Brand Standards 2012 Brand Guidelines for 2012 Production Specifications Web Page Samples Interactive Brand Guidelines Brand Standards 2012 One of the most valuable advantages an organization has is it s brand - an image based

More information

Getting Started. Creating a Site

Getting Started. Creating a Site Barnard Library & Academic Information Services Creating Web Sites with Google Sites Lois Coleman, Research and Instructional Services Librarian April 2012 Getting Started The Help pages for Google Sites

More information

Aspect WordPress Theme

Aspect WordPress Theme by DesignerThemes.com Hi there. Thanks for purchasing this theme, your support is greatly appreciated! This theme documentation file covers installation and all of the main features and, just like the

More information

Desktop Publishing (DTP)

Desktop Publishing (DTP) Desktop Publishing (DTP) ICHS Graphic Communication What is it? Desktop Publishing is what graphic designers would use to produce work which requires organization of text, images and style. Desktop Publishing

More information

CAA NEWS 15,000 VISUAL ART PROFESSIONALS REACH EVERY WEEK MEDIA KIT

CAA NEWS 15,000 VISUAL ART PROFESSIONALS REACH EVERY WEEK MEDIA KIT REACH 15,000 MEDIA KIT VISUAL ART PROFESSIONALS EVERY WEEK CAA NEWS A MANY WAYS TO DELIVER YOUR MESSAGE B TO THIS MARKET C G F ADVERTISING OPTIONS A E LEADERBOARD This premier position provides your company

More information

Law Firm Website On-Page SEO Best Practices Guide

Law Firm Website On-Page SEO Best Practices Guide In Collaboration With Law Firm Website On-Page SEO Best Practices Guide When it comes to on-page content optimization for websites, there are very specific elements you need to review to ensure they re

More information

NDSU Technology Learning & Media Center. Introduction to Google Sites

NDSU Technology Learning & Media Center. Introduction to Google Sites NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants

More information

IMG SPORTS TECHNOLOGY GROUP BOWLS IN AUSTRALIA SITEDESQ MANUAL MAY 2013

IMG SPORTS TECHNOLOGY GROUP BOWLS IN AUSTRALIA SITEDESQ MANUAL MAY 2013 IMG SPORTS TECHNOLOGY GROUP BOWLS IN AUSTRALIA SITEDESQ MANUAL MAY 2013 Ground Floor East, 600 Victoria Street, Richmond, 3121 P 61 3 9426 2625 IMG Sports Technology Group ABN 71 134 641 071 F 61 3 9864

More information

ACCEPTED FILE FORMATS 1. We accept files from the following applications: 1 We do not accept files created from the following applications: 1

ACCEPTED FILE FORMATS 1. We accept files from the following applications: 1 We do not accept files created from the following applications: 1 Before submitting files to Valassis for printing, we suggest that you take a few minutes to review the files and to check to make sure that they meet Valassis requirements for high quality color printing.

More information

Reactive Responsive Design User Guide v1.0

Reactive Responsive Design User Guide v1.0 A Blueball Design Responsive Sandvox Design Reactive Responsive Design User Guide v1.0 Reactive Responsive is a responsive Sandvox design which allows you to quickly make your Sandvox site into a responsive

More information

How to Start a Blog with Blogger

How to Start a Blog with Blogger How to Start a Blog with Blogger 1. Blogger is run by google, so first you will need a google account. You can either use one you already have or create a new one specifically for this. If you already

More information

Computer Training Centre University College Cork. CMS Level One

Computer Training Centre University College Cork. CMS Level One Computer Training Centre University College Cork CMS Level One Table of Contents 1 Logging in... 1 2 Sections and Content... 2 2.1 Sections... 2 2.1.1 Home Page... 3 2.2 Content... 3 3 Adding a Section...

More information

CMS Workbook Rev. 2.7 October 2014

CMS Workbook Rev. 2.7 October 2014 CMS Workbook Rev. 2.7 October 2014 Table of Contents Getting Started 3 Finding Your Website in the Content Explorer... 3 Logging In... 3 Changing Communities... 4 Logging Out... 4 Quick References Learning

More information

Terminal 4 Content Types. Need help? Call the ITD Lab, x7471

Terminal 4 Content Types. Need help? Call the ITD Lab, x7471 Terminal 4 Content Types Need help? Call the ITD Lab, x7471 1 Terminal 4 Content Types Contents Introduction...2 Terminology...2 Content Types...3 Ad Banner...4 Ad Banner Full...5 Alert Text...6 Banner

More information

J Press: A guide to creating your own website

J Press: A guide to creating your own website J Press: A guide to creating your own website At the Ryerson School of Journalism you will be provided with your own website on our own in house multi site WordPress server located at J press.fcad.ryerson.ca.

More information

College of Charleston Website New Features v1.3

College of Charleston Website New Features v1.3 College of Charleston Website New Features v1.3 WEB PAGE BANNER Used to add a photo banner to a web page. The following instructions apply to the main index page and the tertiary pages. The main index

More information

ENGINEERING AT ILLINOIS VISUAL FRAMEWORK

ENGINEERING AT ILLINOIS VISUAL FRAMEWORK ENGINEERING AT ILLINOIS VISUAL FRAMEWORK 2015 CAMPUS LOGO 02 COLLEGE WORDMARK 03 COLOR PALETTE 04 This visual framework is a basic reference for developing materials for Engineering at Illinois three areas

More information

Web Accessibility Guidelines 2014

Web Accessibility Guidelines 2014 1 Web Accessibility Guidelines 2014 2 TABLE OF CONTENTS Alternative Text... 3 Title Attributes... 4 Heading 1... 5 Sub Heading... 6 Text in Images... 7 Iframe Objects... 8 Embed Objects... 9 Use of Lists...

More information

USAGE GUIDE FOR BRAND IDENTITY

USAGE GUIDE FOR BRAND IDENTITY USAGE GUIDE FOR BRAND IDENTITY The electronic version of the Sterling Design brand standards can be accessed at www.preferredhotelgroup.com or your member portal: www.sterlingdesign.net. you re one cool

More information

WEBSITE BRANDING GUIDELINE

WEBSITE BRANDING GUIDELINE WEBSITE BRANDING GUIDELINE Policy Hierarchy link Website Policy Responsible Officer Executive Director, University Services Director of Communications, and Manager Central Web Unit Contact Officer David

More information

NEIGHBORHOOD MARKETING COLLATERAL TEMPLATES USER S GUIDE WEB TEMPLATE

NEIGHBORHOOD MARKETING COLLATERAL TEMPLATES USER S GUIDE WEB TEMPLATE NEIGHBORHOOD MARKETING COLLATERAL TEMPLATES USER S GUIDE WEB TEMPLATE What is Wix? OVERVIEW Wix is an easy to use online website builder with hosting. The site offers both free accounts, which have ads

More information

TopBest Documentation Guide

TopBest Documentation Guide TopBest Documentation Guide Theme Options Theme Options is the core of the theme itself, everything is controlled in the using the theme options. To access the theme options go to your wordpress admin

More information

Duke School of Medicine DRUPAL TUTORIAL

Duke School of Medicine DRUPAL TUTORIAL Duke School of Medicine DRUPAL TUTORIAL 1 TABLE OF CONTENTS About Drupal... 3 Logging In... 4 Adding & Editing Content... 5 Adding New Content... 5 Edit Existing Content... 5 Revisions... 6 Using the Drupal

More information

principles of design

principles of design principles of design 01.28.15 starting off, There are no rules. There are no rules. There are no rules. Well, there are rules, but they were made to be broken. They re more what you d call PRINCIPLES OF

More information

e-learning PORTFOLIO GUIDE COMPLIED STEP BY STEP TUTORIALS & LINKS

e-learning PORTFOLIO GUIDE COMPLIED STEP BY STEP TUTORIALS & LINKS e-learning PORTFOLIO GUIDE COMPLIED STEP BY STEP TUTORIALS & LINKS This set of tutorials takes you through the e-learning Portfolio Site Creation and Content Creation, with additional important links included.

More information

Weebly.com First Steps

Weebly.com First Steps Weebly.com First Steps Weebly is the easiest way to build your own website. The first thing you need to do is go to www.weebly.com to create an account. Then you will begin with the next steps. The Site

More information

Guide to Content Editing

Guide to Content Editing Guide to Content Editing Page 1 of 119 Contents 1 About This Guide... 8 1.1 Users of This Guide... 8 1.2 Topics Covered in the Guide... 8 1.3 Software Requirements... 9 1.4 Conventions Used in the Guide...

More information

Website Editor User Guide

Website Editor User Guide CONTENTS Minimum System Requirements... 3 Design Your Website... 3 Choosing your Theme... 4 Choosing your Header Style... 4-5 Website Content Editor... 6 Text Editor Toolbar features... 6 Main Menu Items...

More information

Google Docs Basics Website: http://etc.usf.edu/te/

Google Docs Basics Website: http://etc.usf.edu/te/ Website: http://etc.usf.edu/te/ Google Docs is a free web-based office suite that allows you to store documents online so you can access them from any computer with an internet connection. With Google

More information

Really simple guide for Teachers to produce a solution using Dreamweaver for the Climate Change task (or any other web task!)

Really simple guide for Teachers to produce a solution using Dreamweaver for the Climate Change task (or any other web task!) Really simple guide for Teachers to produce a solution using Dreamweaver for the Climate Change task (or any other web task!) ISDD H226 76 Info Sys Higher Unit Package 1: Unit-by-Unit approach Starting

More information

Introduction 3. Getting Familiar With Presence Builder... 4. Creating and Editing Websites 6

Introduction 3. Getting Familiar With Presence Builder... 4. Creating and Editing Websites 6 Contents Introduction 3 Getting Familiar With Presence Builder... 4 Creating and Editing Websites 6 Importing Sites from SiteBuilder 4.5... 7 Editing Websites... 9 Structure: Pages and Navigation... 9

More information

CoSN. Drupal User Manual. August 20, Carolyn Pierce Tate, Senior Project Manager

CoSN. Drupal User Manual. August 20, Carolyn Pierce Tate, Senior Project Manager CoSN Drupal User Manual August 20, 2013 Carolyn Pierce Tate, Senior Project Manager carolyn.tate@balanceinteractive.com Table of Contents Introduction... 6 Drupal Defined... 6 Drupal Workspace... 6 Drupal

More information

Terminal Four (T4) Site Manager

Terminal Four (T4) Site Manager Terminal Four (T4) Site Manager Contents Terminal Four (T4) Site Manager... 1 Contents... 1 Login... 2 The Toolbar... 3 An example of a University of Exeter page... 5 Add a section... 6 Add content to

More information

Interreg Alpine Space

Interreg Alpine Space Interreg Alpine Space Website management manual for projects as of 29 February 2016 Table of Contents Note... 3 Basics... 3 Log in... 3 Welcome screen... 4 Navigation... 5 Documents and navigation structure...

More information

Introducing our new Editor: Email Creator

Introducing our new Editor: Email Creator Introducing our new Editor: Email Creator To view a section click on any header below: Creating a Newsletter... 3 Create From Templates... 4 Use Current Templates... 6 Import from File... 7 Import via

More information

Cascade. Website Content Management for the Site Manager University of Missouri St. Louis

Cascade. Website Content Management for the Site Manager University of Missouri St. Louis Cascade Website Content Management for the Site Manager University of Missouri St. Louis Information Technology Services/Administrative Services January 2015 Contents Purpose & How to Use This Guide...

More information

Identity Guidelines. by SMARTBEAR

Identity Guidelines. by SMARTBEAR Identity Guidelines version 1.0 nov 2 2012 Conteents SmartBear Corporate Identity Guide Contents 3...Introduction 4... Brand Architecture 5... The SmartBear Brand 6-7... Sub-Brand Family 8... Why and How

More information

SAHARA DIGITAL8 RESPONSIVE MAGENTO THEME

SAHARA DIGITAL8 RESPONSIVE MAGENTO THEME SAHARA DIGITAL8 RESPONSIVE MAGENTO THEME This document is organized as follows: Chater I. Install ma_sahara_digital8 template Chapter II. Features and elements of the template Chapter III. List of extensions

More information

Value Website Training Guide

Value Website Training Guide Value Website Training Guide Still have questions? Please visit our help center at helpme.haleymarketing.com. Here you can search our knowledgebase, view training videos, and submit support tickets for

More information

WEB STYLE GUIDE. UWE Style Guidelines For Nova Southeastern University. Constructing a University Wide Experience For Nova Southeastern University

WEB STYLE GUIDE. UWE Style Guidelines For Nova Southeastern University. Constructing a University Wide Experience For Nova Southeastern University WEB STYLE GUIDE Constructing a University Wide Experience Version: 1.1 Date: 05/16/2014 Prepered By: Visual Architecture and Interaction Design Dept. Web Style Guide - Nova Southeastern University 1 Table

More information

If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site.

If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site. Updating a Site in Drupal If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site. You should be able to find your site at a URL similar to

More information