Overview/ Landing Page Template(v1.6) Overview Pages: offer a consolidated and organized listing of landing pages associated to the high-level topic or subject. Landing Pages: offer a listing of links to content pages; this page is the most critical “link in the chain” of pages
Three Column Design:
Current | Mockup A | B
Page title, Overview, Imagery, and Body Content
3C-A
3C-B
Page Title, Overview & Imagery
3C-A
Overview Layout A: • • •
Page Title Overview: The description should be kept as short as possible in order to maximize value (3 line limit) Small Image positioned to the left (optional)
Overview Layout A Example:
Overview Layout B Example:
Overview Layout B: • • • •
Page Title Overview: The description should be kept as short as possible in order to maximize value (3 line limit) Full image Positioned on top (optional) “Read More” link for additional supporting information Overview Layout C Example:
Overview Layout C: • •
Page Title Overview: The description should be kept as short as possible in order to maximize value (3 line limit)
Body Content
3C-B
The body content is made up of contextual modules that can be in various layouts. For consistency, it’s recommended that you represent the left-side navigation hierarchy
Body Layout A Example:
The body modules can be made up of the following formats: Body Layout A: • • •
•
Landing page title Contextual links: Links should be to subset target pages, frequently accessed documents or applications that are related to that particular section 6 links max Example Mockup
Body Layout B: • • • •
• • •
•
Landing page title Brief description (optional) Image (optional) Descriptive links: Keep the descriptions brief. Links should be to subset target pages, frequently accessed documents or applications related to that particular section that otherwise could not be reached in one or two clicks using the navigation structure Image: (optional) 3 links max. “More” link (optional) Example Mockup
Body Layout B Example:
Body Layout C: • • •
•
Body Layout C Example:
An accordion layout is an easy way to present blocks of information in a list structure that is expandable/collapsible Used in cases where content can be presented in a list format with a block of supporting information. An easy way to break up a blocks of information Example Mockup
Right Side Modules “Find Court Locations”, “Contact Info” “Quick Links”,” What’s New”, “News” & “Video”
R1
A
R2 R3
A
R4
Fun R5
Fun R6
Fun
Find Court Locations •
• •
•
R3
A
Function: A list of frequently used shortcuts that provide access to other web pages, documents and applications that otherwise could not be reached in one or two clicks using the navigation structure They can change at each page level, as long as they are in context to the subject and/or topic. List should be kept as short as possible in order to maximize function value (5 link limit)
What’s New •
R2
Function: Provides users with contact information such as physical address, phone numbers and e-mail.
Quick Links •
Fun
Function: Allows a user to perform a search functionality specific to court locations
Contact Info •
R1
R4
A
Function: A spotlight module that allows you to feature new items such as content pages, documents or applications that have recently been introduced. Provide descriptive links
News •
Video •
R5
Func Function: Provides a brief description with imagery to a “Featured” story or news item. The block can also contain a series of shortcuts to other “Featured” story or news items.
R6
Func Function: Provides a brief caption, imagery and link to a “Featured” video.
Left Side Modules
“Releated Links” and “How Do I’s” and “Special Notices”
L1
A
L2 L3
Related Links • • •
Function: Provides a list of frequently used shortcuts to resource pages/content that may be related to the topic and/or subject. List should be kept as short as possible in order to maximize function value (5 link limit) Related links can point to web pages that are in different sections of the web site.
“How Do I” Links • •
L1
L2
Function: Provides a list of frequently asked questions related to the topic and/or subject. Similar to FAQ links, HDI's will direct users to a FAQ like page with anchored links to Q&A’s
Special Notices • •
L3
Function: Emphasizes a particular event or message that needs high visibility. Can link to another resource page
Target Page Template A: Content Pages (Target Pages), are the most important page on your site, assuming it contains the content the user seeks at that moment. Content pages are also known to contain lateral navigation, allowing users to jump from content page to content page to gather more information to support their activity. Content templates come in three different formats as described below
Two Column Design A: Full Width
Current | A B | C
Page title, Overview, Imagery, and Body Content
2C-A
2C-B
2C-A
Page Title, Overview & Imagery
Layout A Example:
Overview Layout A: • • •
Page Title Small Image positioned to the left (optional) Overview: The description should be kept as short as possible in order to maximize value (3 line limit)
Layout B Example: Overview Layout B: • • • •
Page Title Full image positioned on top (optional) Overview: The description should be kept as short as possible in order to maximize value (3 line limit) “Read More” link for additional supporting information
Layout C Example: Overview Layout C: • • •
•
Page Title Overview: The description should be kept as short as possible in order to maximize value (3 line limit) Single module positioned to the left of the overview Example Mockup
Overview Layout D: • •
•
Page Title Overview: The description should be kept as short as possible in order to maximize value (3 line limit) Example Mockup
Layout D Example:
Body Content: Full Layout
2C-B
Body Layout A Example:
The body content can be presented in the following formats: Body Layout A: • • •
Structural markup broken out for easy scanning Good use of bulleted list Content spans across the full width of the page to the right
Body Layout B: • • •
•
Free flowing content with inline application modules Content is labeled and chunked for easy scanning Content spans across the full width of the page to the right Example Mockup
Body Layout C: • •
•
Body Layout C Example:
Dynamic container: An easy way to break up a content-heavy page by displaying it in a dynamic container, where the content is labeled and broken up into sub-elements. Content spans across the full width of the page to the right Example Mock Up
Body Layout D: • • •
Body Layout B Example:
Free form content with inline images Content is labeled and chunked for easy scanning Content spans across the full width of the page to the right
Body Layout D Example:
Layout E “Tab” Layout Example: Body Layout E: Tabs • •
•
A tabbed layout is an easy way to break up a content-heavy page A tabular design can be used when there are large chunks of information that can be broken up into categories/topics and labeled. Example Mockup
Body Layout F: Accordions • • •
An accordion layout is an easy way to present blocks of information in a list structure that is expandable/collapsible Used in cases where content can be presented in a list format with a block of supporting information. An easy way to break up a blocks of information
Layout F “Accordions” Layout Example:
Two Column Design A: Left Side Modules “Releated Links” and “How Do I’s” and “Special Notices”
L1
A
L2 L3
Related Links • • •
Function: Provides a list of frequently used shortcuts to resource pages/content that may be related to the topic and/or subject. List should be kept as short as possible in order to maximize function value (5 link limit) Related links can point to web pages that are in different sections of the web site.
“How Do I” Links • •
L1
L2
Function: Provides a list of frequently asked questions related to the topic and/or subject. Similar to FAQ links, HDI's will direct users to a FAQ like page with anchored links to Q&A’s
Special Notices • •
L3
Function: Emphasizes a particular event or message that needs high visibility. Can link to another resource page
Target Page Template B: Three Column Design + Left and Right Side Modules:
Current | Mockup
Page title, Overview, Imagery, and Body Content
R1
A
2C-A R2 R3
2C-B
A
R4
Fun R5
L1
Fun
A
R6
Fun
L2 L3
Writing for the Web:
•
•
•
Use the inverted pyramid method. • Important information comes first, where it’s more likely to be seen and remembered • Conclusions at the top, details at the end • Use language that anyone can understand • Segment text with introductory summaries and “chunk” content for easy scanning • Use descriptive headings and links • Use bulleted lists for easy scanning • Avoid excessive links Your message should convey: • Program/topic overview • Benefits • Features /How it works • Next steps • Contact information Break up blocks of information into logical chunks and connect related pages & documents using: • Quicklinks • Related links • What’s new links