July 3, 2014 Web Platform Design Comps. Confidential and Proprietary - Not for Public Distribution -...

July 3, 2014

Web Platform Design Comps

2Confidential and Proprietary - Not for Public Distribution - Do Not Copy

The new Web Platform is a dynamic, flexible tool for displaying council web content.

In this presentation you’ll find an overview of some of its most popular features, including:

• A choice of header styles.• A choice of homepage hero image styles.• Homepage components.• Three color schemes for the left navigation.• Components for

• Events• Forms and Documents• News• Search• Staff Directory

• Responsive design

Headers


Councils have the choice of three header options:

• Green header with white text.• White header with green text.• An image header— featuring a photograph of your choice — with white

text.

Examples of all three follow.


Option 1: Green Header With White Text

Green header with white text.


Option 2: White Header with Green Text

White header with green text.


Option 3: Image Header With White Text

Image header with white text.

Homepage Hero Images


Councils have three options for the homepage hero image.

• A large image (without springboards).• A large image with two “springboards,” which expand upward to deliver

messaging.• A smaller image, with two side panels that deliver messaging.

In all cases, optional carousel functionality can accommodate multiple images, allowing users to click or swipe through the different messages.

Examples follow.


Option 1: Large Hero Image Without Springboards


Option 2: Large Hero Image With Springboards (closed)

Closed springboards.


Option 2: Large Hero Image With Springboards (open)

Open springboard.


Option 3: Side Panels

Side panels.

Scrolling Homepage


Users can scroll below the homepage hero image to reveal content modules.

These modules can feature curated information about the council and display feeds from components such as Events and News.


Web Platform Homepage – Scrolling

Custom Modules.

Events Module.

News Module.

Left Navigation


The left navigation expands and collapses accordion-style to hide and reveal subsections of the site.

Though they all work the same, councils have a choice of three color schemes:

• Grey with green arrows.• Green with orange arrows.• Orange with grey highlights.

Examples follow.


Option 1: Grey with Green Arrows.

Grey navigation.


Option 2: Green With Orange Arrows

Green navigation.


Option 3: Orange With Grey Highlights.

Orange navigation.

Components


The site has numerous components.

Events, the first, has three views:• A Calendar View, showing all the events and activities on a classic grid

calendar.• A List View with a powerful advanced search.• Event Detail Pages that show all of the details for each event and activity.

It also has• Six to eight categories, chosen by the council, each with its own color and

icon. (Each event can only be assigned one category.)• Optional use of photos to accompany events.• Events can auto-populate the homepage.

Examples of all follow.


Events: Calendar View


Events: List View


Events: Detail Page


The News module provides a dynamic list of all your news stories, displaying the title, date, and the beginning of the article. A user clicks on an article to view a page with the entire story.

Like the Events module, news stories can auto-populate the homepage.


Web Platform News


Forms and Documents is a tool providing users with quick access to the most frequently used forms and downloads, and Advanced Search functionality to help them find exactly what they’re looking for – whether it’s posted on one of the site’s pages or simply available for download from this section.

Users can search by Keywords, Categories, and Document Type. The search is customizable, allowing councils to add their own Categories. (Note: The Document Type search is still tentative.)


Forms and Documents Search


The new Web Platform also has a powerful site search that displays results for pages and downloadable documents such as PDFs.


Web Platform Search Results


The Staff Directory dynamically organizes your staff by department (or service unit), listing each staff member’s name, title, and phone number, along with a link to their email address.


Web Platform Staff Directory

Responsive Design


The new Web Platform uses responsive design, an approach that ensures pages render properly on computers, tablets, and laptops.

Examples follow.


Web Platform Responsive Design

July 3, 2014 Web Platform Design Comps. Confidential and Proprietary - Not for Public Distribution -...

Documents

Transcript of July 3, 2014 Web Platform Design Comps. Confidential and Proprietary - Not for Public Distribution -...