Hero Graphics

• Introduction
• Dimensions
• Text
• Colors
• Photographs
• Where to Place the File(s)
• Hero Graphic Rotation

Introduction

Any page can display a hero graphic, which represents the uniqueness of your organization.  It can contain a photograph, as well as text. The following guidelines are important--not only for accessibility (see Dimensions), but for stylistic cohesiveness between School of Medicine sites.  The Office of Information Systems' Web Design/Development team is available to create custom hero graphics for you, but if you have access to Adobe Photoshop (or a comparable program) and would enjoy designing your own, this page shares what you need to know assuming basic web design knowledge.

[top]

Dimensions

One Size Fits All

The dimensions of a hero graphic must be 1500 pixels wide by 176 pixels high. The system was designed so that users with high-resolution displays can expand the browser to fill most of their screen and not run out of image. Try resizing your browser window now and watch how the upper portion of this page changes.  Do you see how the hero image disappears under the right-hand part of the window?  You'll notice that the "frame" surrounding the hero graphic will only get so small, before it won't come in any furthur.  This is because the system was designed to be viewed on screens as small as 800x600 pixels. 

(Click to enlarge)

Supporting the Smallest Screens

You should design your hero so that the focal part of the graphic can be seen on the smallest supported screen (800x600 pixels). You must also keep in mind that any page which shows a hero graphic will be either a three or two-column layout:

• Three-Column Layout

  You have the first 425 pixels from the left to work with, regarding what you want all users to see.  Anything to the right of this 425 pixel line will be cut off in a smallest-screen scenario. 

• Two-Column Layout

  If you're certain that all pages using a hero are two-column layouts, you have the first 605 pixels from the left to work with, regarding what you want all users to see. 

Considering 1024x768 Screens

Though the entire hero graphic won't be seen by all users, you can tailor decorative elements to be seen by the next screen size up: 1024x768, possibly the most common screen resolution today:

• Three-Column Layout

  The cut-off point for graphic elements to be seen by 1024x768 users is 650 pixels.  

• Two-Column Layout

  The cut-off point for graphic elements to be seen by 1024x768 users is 830 pixels.  

Tip: The aforementioned rule for the first 425 pixels still applies.  Remember, some users will have smaller screens. This is very important in text positioning.

Text should be contained within the first 405 pixels from the left of your hero graphic, to be visible to all users and have sufficient breathing room.  (425 simply denotes the point at which the third column (containing portlets) starts on 800x600 screens.)

Fonts

These are accceptable typefaces, in order of preference. Don't mix within a graphic:

1. Gills Sans
2. Lucida Grande
3. Verdana
4. Trebuchet

Sizes

Characters within the range of 11pts-28pts are acceptable. You can use varying character sizes as you see fit.

Styling

• Regular, normal weight text is preferred. Bolding, italics, and caps should be used sparingly.
• Do not increase letterspacing so that large gaps appear between the characters, or alternatively decrease letterspacing so that characters overlap.
• Do not skew, stretch, or distort the text.
• Taglines, slogans, and quotes should end with a period.
• Quotes should be contained within quotation marks.
• Keep styling such as dropshadows to a minimum. If a drop shadow is desired, it must be set to an opacity of 35% or less.

[top] 

Colors

Custom Colors

When choosing color for backgrounds, text, and other elements, use the eyedropper tool to pick color from the photo in your hero graphic.  Colors that are already part of an image won't clash with the image itself. 

(Click to see all of this example.)

Be mindful of saturation; you don't want colors so strong that they overpower your site (hot pink, neon green, etc).

"Site Blue"

While you don't have to use it, the hex value for the predominant blue used in the web standard is #336699.

[top]

Photographs

Guidelines

• Be sure to have appropriate permissions for the use of photos, particularly the permission of individuals who are easily recognizable in the images.
• Don't skew, stretch, or otherwise distort proportions in images.

Where to Find Photos

• Hero Graphic Image Library
  A variety of medical school and health affairs photos.
• Images of Carolina
  Main campus photo site.

[top]

Where to Place the File(s)

To make hero graphics available to any page on your site:

1. Go the the root (home) directory of your site and add a folder named "banners" (excluding quotes), if one doesn't already exist.
2. While viewing the contents of the banners folder, use the Add Item > Image command to upload a finished hero graphic.

The hero will now appear on any page you select to display it, because the folders in your site inherit hero graphics from parent folders.

To override your universal banners folder and publish folder-specific hero graphics:

1. Go to the folder containing page(s) you want a custom hero for, and add a folder named "banners" (excluding quotes), if one doesn't already exist.
2. While viewing the contents of the banners folder, use the Add Item > Image command to upload a finished hero graphic.

The resultant hero graphic will only be available to that folder and any folders it contains.

[top]

Hero Graphic Rotation

By placing multiple heroes within a folder, you utilize an automatic function of your site, which is to randomize, or "rotate" the actual hero displayed.  This rotation is hourly and based on the reloading of the browser cache and server cache.

[top]