Homepage Only Components

Homepage Header Call to Action Area

A homepage implementing all 4 new components

Within the Homepage, there is a “Header Call to Action” content area that will allow you to include a list of Call To Action icons just beneath the Homepage header image.  These icons will appear above the Home Body text area and within the color backdrop assigned to the particular site (Navy, Blue, Red, Green).  The Header Call to Action works just like any other Call to Action component, allowing you to link to internal or external pages with icons and a snippet of text.

Components Only for Use on Homepage

There are four components available for use – strictly on the homepage.  They are as follows:

  1. Advanced Component Wrapper
  2. Advanced Tab Group
  3. Highlight Link List
  4. Weighted Calls to Action

The reason these 4 components are only available on the homepage of your site is that they work with the color and image design of your large homepage header space. These 4 components, through utilization of background colors and design, create visual segmentation within the homepage and allow for a visitor to recognize defined sections on the homepage. This, in turn, provides a well organized “information scent trail” as the visitor scrolls down the homepage. As an added benefit, they look amazing in action and all of these components support varying browser width, which is essential with the implementation of background color changes and larger image sizes within the components.

Below you will find screenshots broken down with each component in action, as well as some descriptions of their capabilities.

You may notice that the top of the header images almost appear “cut-out,” in that they look to be peeking over the top of the header area. This is a technique now available in RED, via utilizing Photoshop. If you have a UIC NetID and Password, you can access the different .psd templates and instructions available on UIC Digital Communication’s Box folder by going to the link below.

Advanced Content Wrapper

Advanced Component Wrapper in RED

The Advanced Content Wrapper component creates a visual separation of the white background with the new content.  It is an excellent way to call the visitors attention to a section of content – by mimicking the header imagery already in play on the homepage.  The image, as well as color background, expands the horizontal width of the page (again, just like the header section).

Within the Advanced Content Wrapper, you can implement 3 different content components: Highlight Call to Action, Link Tiles, and Testimonials.

By implementing the three different components within the Advanced Content Wrapper, you can create a visually pleasing “subset” of content.  In the example to the right, you will see the Testimonials component being used at the top (the section titled “Students”) and the Highlight Call to Action component beneath it (the section showing the “Head of Student Affairs”).

Advanced Tab Group

Advanced Tab Group Component in RED

The Advanced Tab Group component (again, only for the homepage) can be implemented to highlight different groupings of link tiles or bits of information on the homepage; within each specific tab group, you are able to implement designated Link Tiles Components.

Similar to the Advanced Content Wrapper, the Advanced Tab Group creates a visual break from the white background of the homepage and segments the tabs (as well as link tile groupings within) from the regular content found on a homepage.  The background color change expands the horizontal space within the page (or browser view) and allows for a crafty way to include different sets of interactive links on the homepage.

In the example on the right, you will notice that when a tab is selected in the tab area, only the proper link tiles (with or without images) will be displayed – all without forcing the user to leave the homepage!


Highlight Link List Component in RED

The Highlight Link List component is a wonderful way to provide your visitor a brief snippet of written content, a large visual aide, and several options to link content to engage the visitor.

In the example on the right, you will notice that there is a large image, as well as several links underneath a brief written content area.

The Highlight Link List component provides the visitor with an opportunity to associate imagery with written content and then delve deeper into the “information scent trail” by clicking on the different links.  By using this component, you will entice the visitor to head deeper into the sub-content of your site.

Weighted Calls To Action

Weighted Call to Action Component in RED

The Weighted Calls to Action component is useful for creating a specific “heavy” weighted link alongside other “lesser” weighted links.  Again, this is a homepage specific component that utilizes (just like the other components above) a color scheme breakout.

Within the Weighted Calls to Action component, you can implement a large “header type” image, a title, as well as a grouping of links (one of which is weighted “heavier” than the others).  There is no extensive “written copy” content area within this component.

If you check out the example to the right, you will notice that the “Ride the bus” link is weighted heavier (and is in larger font) than the “Bike it” and “Walk it” links.  This component is excellent for driving the eyeballs of the visitor to a specific link, while still providing them with other internal links to maximize user interaction.

homepage only carousel component

The Carousel Component can include anywhere between 4 (minimum) and 30 (maximum) images to rotate each time a visitor clicks on the “next” arrow. Please make sure that each of the images has similar vertical pixel sizes otherwise there will be a large blank space between the “next” arrows and some of the “shorter” images you include.

There is an optional text description that will be visible to visitors, as well as a required text area for screen readers.  The required text area will not be visible to visitors, but you must include descriptions of each image for accessibility standards.

Timeline Component

homepage timeline component

The Timeline Component is meant to display a very wide (300px to 10,000px) image that can be utilized to display a progression in time. The Component allows for a visitor to “scroll” (via the clickable arrows) as if viewing a timeline. The wider the better, when it comes to the image, as you can simulate a dynamic progression in time.