Home Page Designs

Components of Homepage Design

The homepage of each Ektron V3 website is constructed using various components. The available components are listed below and can be combined in different ways to create a variety of designs and layouts.

Responsive Slide Smart form

This smartform includes a rotating image carousel. To make the images larger and the main focus, use images with a taller height. For less emphasis on the images and to display more content within the device viewport, particularly on mobile devices, use images with a shorter height.

Responsive Slide Example 1 - in this example the image carousel is used full size and rotates.
Nevada Physical Therapy Board - in this example the image carousel is used as a text scroller with a shorter image.

Responsive Splash

This smart form provides links on the left hand side of the page with an image placeholder on the right. It can be used with no image on the right.

Responsive Splash Example 1 - this example explains how the smartform is inteneded to be used. However, it displays text on an image, which is discouraged.
Nevada State Controller's Office - this example uses the Splash page, but displays only the links on the left without an image.

Resposive Body

The purpose of the Responsive Body is to be a flexible use page to display text, images, or twitter feeds. It can be used as a Home Page feature or a stand alone page.

Responsive Body Example 1 - this example displays the various column options available.
Public Employees' Benefits Program - this example uses the responsive body in a two column format.
Nevada Department of Indigent Defense Services (DIDS) - this example uses the responsive body in a three column format.
Nevada State Board of Osteopathic Medicine - uses the responsibe body in full width as well as two column format.

Responsive Buttons

This smartform provides buttons with color and image options.

Responsive Button Example 1 - in this example all color options are explored.
State of Nevada Digital Accessibility Website - in this example 9 image buttons (3 rows) have been used to create a clean and minimalistic design.
Digital Accessibility Training - in this example 3 image buttons have been used to create a section landing page, again keeping the design simple, clean and minimalistic.
Nevada Office of the Chief Information Officer (OCIO) - this example uses icons instead of images to create a clean, simple and minimalistic design.

Three-Image Banner

The purpose of the three image banner is break up content with relevant images and links. Images should be the exact same size (width & height) or they will display incorrectly. Each image provides a link to relevant information.

Responsive 3 Image Banner Example 1 - in this example one row of three image banner is used.
Nevada Board of Veterinary Medical Examiners - In this example four rows of the three image banner are used
Public Employees' Benefits Program - in this example multiple rows of the three image banner are used in multiple locations on the page.

Responsive Border

How components are separated is up to the designer. In some cases, it may be preferable to have no break, space or border between components and in others, it may enhance the design to add a break, space or border between components. This component provides color and width options.