Common Look and Feel
Search Information Management and Technology Policy Manual
1 . Standard
Every GNWT website will use a common look and feel designed to provide a consistent user experience across government sites.
2 . Guidelines
Page Width
The “page,” meaning the wrapper of the main site content, will be fixed-width and centered, and conform to a 960 pixel grid system, but be adaptable following responsive design methods, in order to adjust to varying screen sizes, both in portrait and landscape view.
Wireframe
Pages must use one of the following layouts:
Colours
Website colours are meant to carry forward consistency with the VIP, though the individual colours may vary slightly to accommodate the different needs of onscreen presentation. Hex RGB colour code values are show below.
The primary web-safe colours for the GNWT website are:
| Colour | RGB | Name | Usage |
|---|---|---|---|
| #0F599A | Blue | Menu, links | |
| #0A4273 | Dark Blue | Menu, hover state | |
| #0190D2 | Light Blue | Menu, active state. Side navigation hover state | |
| #FFFFFF | White | Background | |
| #DBDBDB | Light Grey | Alternate background | |
| #BBBBBB | Mid Grey | Lines, boxes | |
| #3E3E3E | Dark Grey | Text, headers |
Typography
- Arial will be the primary font family for all GNWT sites, and will be used for headings and body copy.
- A large font is used to establish a clear information hierarchy.
- Most text is Dark Grey (on White).
- Link text is Dark Blue.
- Background is usually White, but alternately where needed, Light Grey.
- Light Blue is used as highlight, but never as regular background or regular text (too light).
Header Elements
The header is the horizontal band across the top of each page. The header is mandatory on all pages and should not be customized.
Top Bar Links
The top bar is a thin, full-screen bar that contains hyperlinks connecting the site to the broader GNWT network of sites. The following links are default:
- www.gov.nt.ca (https://www.gov.nt.ca)
- Departments (https://www.gov.nt.ca/departments)
- Services (https://www.gov.nt.ca/services)
- Contact (depends on site)
- Language Toggle (depends on site)
Breadcrumbs
All websites must include breadcrumbs on all pages, other than the flagship site landing page. Breadcrumbs are a website navigation technique used to give the user a way to keep track of their location within each government website. While menus are used where necessary, breadcrumbs are the preferred navigation tool for GNWT websites, as they allow users to “back out” with minimal complexity.
The standard breadcrumb trail is:
www.gov.nt.ca \ Website Name \ Page Name \ Sub-Page Name
Footer Elements
The footer element is mandatory on all types of pages. The footer includes:
- Phone Directory (http://rdirectory.gov.nt.ca/rDirectory.aspx)
- Contact (https://www.gov.nt.ca/contact or site-specific page)
- Terms of Use (https://www.gov.nt.ca/terms)
- Accessibility (https://www.gov.nt.ca/accessibility)
Mobile
GNWT websites must use responsive web design techniques to be usable on a wide variety of devices, including smartphones and tablets. While the Common Look and Feel is designed to be easily adaptable to a mobile style, some guidelines are given to ensure greater consistency:
- At the top, a single drop-down menu should be provided, containing menu and search.
- Logo should be centered.
- Site Title (White on Dark Blue) should be centered below the logo.
- A single column layout should be used throughout.
Examples
Departmental Site Landing Page
Departmental Site Landing Page - Mobile View
Flagship Site Landing Page
Web Application Landing Page
