Web Design Guidelines

Overview

In an effort to maintain Kentucky State University’s brand identity and to provide consistency across the website, a set of style guidelines has been developed.

The university provides support for those who need to develop and maintain their own websites. The university utilizes OU Campus, a content management system, that helps ensure consistency in design, navigation and content across the university websites. By using OU Campus, all fonts, colors and styling have already been applied and do not require modification.

Branding

Use of official KSU logos and graphics requires written approval from the Brand Identity and University Relations.

The logo:

  • Must maintain the proportions of the logotype. The size and position of the logo should never be changed, although the logo may be sized to any percentage.
  • Must not be obscured.
  • Must not be modified with special effects (e.g. drop shadow).
  • For detailed information on KSU logo use, refer to the Graphics Standards Manual.

Navigation

The website navigation includes three primary elements:

  • Audience Menu: The audience is the first-tier of menu items and is geared towards specific audiences (e.g. future students, alumni).
  • Topical Menu: The topical menu is the second-tier of menu items and is designed to represent topical interests (e.g. admissions, athletics).
  • Sidebar: The sidebar is a left-side navigational resource that is specific to a school, department or site.

Wordmark

The wordmark should appear in a prominent and consistent position on every webpage. By default, it is located above the main body of the content in a bold header text. In this example, it reads “Information Technology.”

Wordmark

“Information Technology” is an example of a wordmark. The wordmark should only be the name of a school, department or page title, and should not include abbreviations.

Images & Videos

Images

Brand Identity approved images can be added by navigating to the department folder in the Brand Identity Approved Images folder.

upload images

Upload Files:

  • Upload images: If an image not in the department folder within Brand Identity Approved Images, click the upload button to add the image.
  • Resolution: All photographs should be in the JPEG/JPG format. Graphics, such as maps, sketches, logos, etc., should be in PNG or GIF. Graphics need to have a resolution of at least 72 DPI and in the RGB color format, and should be smaller than 1,200 pixels wide and/or long.

Adding an image to a web page:

  1. Click on the insert/edit image icon in the editors toolbar.
  2. Click the folder icon in the Source field to designate the image to be added to the page.
  3. Enter a description of the image.
  4. Specify the dimensions (leave the constrain proportions box checked).

insert image

For adding a gallery with multiple images, create an image gallery asset, then select click the add asset icon in the page editor to select the gallery.

Videos

Videos are best uploaded to the university YouTube channel and then embedded into a web page.

Once a video has been uploaded, an embed code can be generated and inserted onto any page through the source code button.

Typography

The primary sans-serif typeface for the website is “Open Sans.” It is an open source font used for headers and paragraph text. Headers use a combination of color, size, emphasis and drop caps to form a heirarchy of headings. In order to maintain consistency throughout the website, individual web pages will only use default font, color and size for paragraph text and headings.

Headings

Headings may be one of the most important aspects of a page. This is because headings are not only visual elements, but they also defined the type of content for a page and are an element search engines use to determine page ranking.

A heading describes what kind of content it contains and should be a word or a short phrase. A paragraph should never be made as a heading, nor should an image.

In short, headings should be used in your pages, but should be used wisely. Using too many, or too little, headings in your pages will result in a page that is not optimized for search engines.

  • Headings should define topics or sizable sections of a page.
  • Headings should be organized in a tree-like fashion.
  • Never use headers inline with paragraph text.
  • There are four headings that can be selected, ranging from Heading 3 to Heading 6.
  • Heading 1 and Heading 2 are skipped as both are used for the home page and page titles.

Lists

Lists are a great way to summarize important or verbose content, or they can also be used to specify a series or process. Using lists can also ensure that site visitors are reading the important content; many visitors are looking to find what they want quickly, so giving them a short and sweet list will do just that.

Lists come ordered (numbered) and unordered (bulleted). Ordered lists should be used to present a series, list of steps, or other content where the ordering is critical to its understanding. Unordered lists should be used to present summaries of information or a grouping of small pieces of information.

Hyperlinks

Hyperlinks are important components to the web, and there will most likely be many pages in your site that utilize them.

  • Link to URLs: A URL link is a hyperlink that points to some kind of web content, whether it is a PDF document, an image, or another web page.
  • Link to Email Addresses: Email links can be inserted into pages and used to automatically open and compose a message in your email client.

To add a link, select the text that you want to make a link, then click the insert/edit link icon in the editors toolbar. Select the page or type in the URL the link should go to, then click OK.

To add a link to an email address, select the text you want to make a link, then click the insert/edit mailto link in the editors toolbar. Enter the email address and subject (optional), then click OK.

Files and Documents

When uploading files and documents, be sure that the article to be uploaded does not contain sensitive information.
To add a file:

  1. Navigate to the department within the documents folder.
  2. Click Upload.

Linking to a document on a web page:

  1. Highlight the text in which you want the document to be linked.
  2. Click on the insert/edit link icon in the editors toolbar.
  3. Click the folder icon in the URL field to designate the document link to be added to the page.
  4. Select New Window in the Target field.
  5. Click OK.

In order to provide timely and reliable service, the first point of contact for all technical assistance must be made to the IT Help Desk. To contact the IT Help Desk, submit a service request (on-campus), call the Help Desk at (502) 597-7000 or send an email to helpdesk@kysu.edu.