Design Patterns

In addition to standard HTML markup, found on the Base HTML Elements page, there are a number of custom modules and elements designed specifically for the UAH website. This page will illustrate those elements and provide guidelines for their use.

News Tile Module

The news tile module is great for colleges or centers that generate a lot of news they want to feature on their front pages. It displays the page title, two featured news stories, and two statistics or brag facts. Remember to use news and stats that are relevant to prospective students.

Usage

The news tile module is limited to usage on major section of the UAH website such as college front pages. To request to use this module, contact webmaster@uah.edu.

How often should news be updated?

News articles displayed here should be marketing-focused. Generally they can be displayed for up to 6 months before being replaced. To display articles that rotate more frequently, consider using the recent news module.

Diagram

news tile module example

Example

The example below is just a screenshot. Click the image to see a live example.

news tile module example
 

The nav tile module is better suited for colleges and centers that don't want to especially feature news on their front pages. Instead, the tiles display one large image and feature important links. Each link tile flips to display a relevant photo when visitors hover over it (on mobile the tiles are flipped by default with a blue overlay for legibility). The nav tile module is only available for use on college or department front pages. Remember to choose links that are important to prospective students.

Usage

The news tile module is limited to usage on major section of the UAH website such as college front pages. To request to use this module, contact webmaster@uah.edu.

Photo Selection

Choosing the right photo for the nav tile module can be tricky. Photos that work best have the subject in the middle or middle-left. For legibility of the links it's important that the right side of the photo isn't too bright or busy. The original background photo used to build your module should be at least 1738 x 688.

Diagram

nav tile module example

Example

The example below is just a screenshot. Click the image to see a live example.

nav tile module example

Two-Block Spotlight Module

The two-block spotlight is used within the body of a web page to feature an event or a person, usually a current student or an alumni.

Automatic Image Cropping

Images are cropped automatically based on the height of the text. Notice in this diagram how the image is cropped when the length of the text is increased.

two-block spotlight module diagram

 

Alternate Image Cropping

Photos are cropped at the top-center by default. You can force different crops by adding specific classes to div.block-left.

  • middle-center crop - .pos-center
  • bottom-center crop - .pos-bottom
  • middle-left crop - .pos-left
  • middle-right crop - .pos-right
  • top-left crop - .pos-topleft
  • top-right crop - .pos-topright
Diagram

two-block spotlight module example

Example
Open House - Apr 11
 
APR 11

Open House

The open house program at UAH is a great way to discover what matters most to you.


Open House - Apr 11
 
APR 11

Open House

The open house program at UAH is a great way to discover what matters most to you.

60/40 Two-Block Spotlight

While most two-block spotlights are split 50/50 photo-to-content, 60/40 two-block spotlights, which feature a wider image, are reserved for modules that feature interactive content, such as a video or interactive map.

Example

Rachel Bray '15

Accounting, College of Business Administration

"Being involved has really developed me as a leader and helped me grow as a person."


Rachel Bray '15

Accounting, College of Business Administration

"Being involved has really developed me as a leader and helped me grow as a person."


Small Spotlight Module

The small spotlight module is primarily used to feature recent news stories, people (faculty, students, etc.), and contact information. They can be used individually in the right sidebar or three-to-a-row at the bottom of a page, such as on college/department pages.

Diagram

small spotlight module diagram

Example


Recent News

Recent news modules display the most recent featured news article categorized under a specific department.

How often should news be updated?

Recent news articles should be changed at least once every few weeks. For news that should display for a longer time, consider the news tile module.

Note

Featured articles written by the Office of Marketing and Communications will automatically be pushed to the recent news module as well as the News page for the applicable college/department.

There are three options to display news on a page: (Choose only one type per page)

  1. 1 article spotlight - 1 spotlight article with linked photo, linked title, date, and teaser text (see the previous section: Small Spotlight Module)
  2. Multiple articles w/o photos - 3-5 articles, each with linked title
  3. Multiple articles w/ photos - 3-5 articles, each with linked photo and linked title
Diagram

recent news diagram


Carousels are useful for showcasing a sequence of photos or graphics.

  • Carousels should be block-level items (full width on page, not inline)
  • Carousels should be limited to one per page
  • Carousels should contain a maximum of 5 images
  • Carousels are automatically cropped to a 16x9 ratio
  • Carousel images should be 1440x810
  • Carousels should include jump (dot) navigation in the top left corner or below the carousel
  • Carousels should include previous/next arrow navigation
  • Carousels may display captions for each image
Example
Greenway-sunset
Hockey2
6K7A0385
MA4A0845greenway
SWIRLL-4

Galleries are used to display a large number of photos

  • Galleries should be block-level items (full width on page, not inline)
  • Galleries need context - at minimum a sentence introducing the gallery
  • Galleries should be limited to one per page
  • Galleries should contain a minimum of 5 images
  • Thumbnails are cropped square and available in 3 sizes:
    • small - 9/row (desktop), 5/row (mobile)
    • normal - 7/row (desktop), 4/row (mobile)
    • large - 5/row (desktop), 3/row (mobile)
  • When clicked, images open in a lightbox or modal
  • Each full-size image should display an appropriate caption
  • Each full-size image should be at least 1440 x 810 pixels
Example
6K7A0385
6K7A3884
6K7A4768
6K7A8886-1
Greenway-sunset
Hockey2
IMG0113
KO7Z4359
MA4A0845greenway
MA4A5967
MA4A8951
MA4A4418
MA4A9757
MBB2
Propulsion0043
SWIRLL-4

Link Arrow

The link arrow is used on a tile or image to indicate that visitors may click it to visit a page with more information.

Example
test image

The link grid is designed to present a list of links of the same type of content, such as a list of programs offered by a college or a list of menu items within a section.

Remaining empty spaces are filled with the blue stripe pattern. The link grid should have a heading where applicable. The .narrow class is used to reduce the links' text size.

 Left MenuNo Left Menu
Right Sidebar 3 columns
.narrow
3 columns
No Right Sidebar 3 columns 4 columns

The link list, similar to the link grid, is used to display a number of related links. Link lists are most often shown in the right sidebar.


Section Menu (Left Menu)

The section menu allows visitors to navigate to other pages within a particular section of the website.

  • On smaller screens, the section menu is off-screen until the user taps on the yellow tab.
  • The heading is linked to the front page of the current section.
  • Visitors may click on a link to go to that page, or they can click the + to see and navigate to that page's subpages.
  • The current page is highlighted

Important

  • Menu items must be linked to a page.
  • The section menu is the only module or content that may be displayed in the left column of the website.
  • Avoid adding links to outside websites or other sections on the UAH website. Instead, these links can be displayed within the web page.
Example

The example below is just a screenshot. Refer to the section menu on this page to see a live example.

section-menu example


For pages that are unavoidably very long, a Jump-to-Section menu in the right sidebar can help users quickly find the section they need.


Faculty/Staff Listing

Example

First Last, Ph.D.

Title, Department

Building Name 101
256.824.5555
email@uah.edu

First Last, Ph.D.

Title, Department

Building Name 101
256.824.5555
email@uah.edu

First Last, Ph.D.

Title, Department

Building Name 101
256.824.5555
email@uah.edu


First Last, Ph.D.

Title, Department

 Building Name 101
 256.824.5555
email@uah.edu

First Last, Ph.D.

Title, Department

 Building Name 101
 256.824.5555
email@uah.edu

First Last, Ph.D.

Title, Department

 Building Name 101
 256.824.5555
email@uah.edu


Alerts

Alerts are displayed at the top of a page to present important information regarding a user's current activity or regarding the university itself.

Example