Visual Design Template

Owned by Uni (Hwa Young) Oh
Last updated: Aug 30, 2023
5 min read

The Visual Design Template is a powerful storytelling tool that brings the City’s most experiential programs and collections to life through vibrant photography, graphics and multimedia components. The template is designed to be used as part of a proactive and integrated marketing campaign.

Shallow navigation structure is critical for this template because the landing page offers the main navigation for the collection of pages within the template. Space is limited in the design so a shallow structure is key.

Powerful, high-quality photographs are the main criteria for using the visual design template.

A Case for Use

The Digital Team must approve use of the Visual Design Template. When all business and content criteria (outlined below) for use of the Visual Design Template can be met, the divisional Web Lead and/or Publisher can initiate a consultation with the Digital Team via digital@toronto.ca. Divisional Web Leads and/or Publishers requesting the use of the Visual Design Template are required to create and present a case to the Digital Team.

Business Criteria

City-owned properties or City-produced annual programs or events that:

  • Include cross-divisional and external partner/sponsor involvement

  • Implement extensive year-round marketing and promotion including a traditional and digital marketing campaign targeting local and regional audiences that drives to City of Toronto as main communication channel

  • Provide measurable citywide impacts (economic, tourism, media and positive profile for Toronto)

  • Appeal to multiple audience types and demographics

  • Generate revenue and rely on a strong attendance to thrive, and survive

  • Compete with similar programs or sites in Toronto and region

  • Deliver experiences tied to culture, public experiences, community-building and celebrating Toronto

Content Criteria

  • Requires a shallow navigation structure

  • Entails vibrant and large images, unique graphics, multimedia components and powerful storytelling. Photos must be:

    • Creative, unique and custom

    • Original, high-resolution photographs – no graphics, logos, photo composites or text overlay

    • Focal point – the focal point of the photo must be centred in case it is cropped when viewed on smaller screens.

  • Focuses on experiential to stir positive emotions and an immediate reaction

  • Program has multiple web communication phases (a campaign mode / non-campaign mode)

  • Has multiple phases, each with associated call to actions (plan ahead, visit the bricks & mortar location, purchase a ticket, attend an event/program or other transaction)

  • Requires an active online space beyond gathering information

Main Elements of the Visual Design Template

Top Main Navigation

The template is full width. The black band under the Toronto logo houses the navigation in text labels. When a user clicks on the text label, a drop down appears with a thumbnail and a heading for each second-level page. Space is limited in the design so a shallow structure is key. The navigation is reserved to toronto.ca pages and generally not to external sites.

Grey Footer

  • Additional links

  • Social icons

City of Toronto Footer

  • Copyright

  • Privacy

  • Accessibility at the City of Toronto

Landing/Parent Page Elements

The Visual Design template is a full-width template.

Promotional Top Banner

A page banner or a video may appear in the banner position. If both a banner and video are needed, the video should be added to the lower content area below the tiles.

  • Option 1 – One static image

    • One striking image that encapsulates the spirit of the program or event.

  • Option 2 – Photo carousel

    • Three to Five photos.

  • Option 3 – Video

    • Start with a static image that has a video play button.

Banner Specifications

  • A minimum of one banner image and a maximum of five is recommended. Banners are not clickable so if more than one is used, the introductory text below the banner must speak to all banners in the slider.

  • A photo caption for each image is mandatory and should be as brief as possible to convey the information.

  • Banner photo ratio 3:1. WordPress will reduce image quality automatically; therefore, high resolution photo would work better. 3000 x 1000px would be ideal.

  • Overlay text on photo is not permitted due to accessibility issues.

  • A branded graphic with typography that meets standards may be considered. Digital Communications should be consulted on all proposed graphic images.

  • Video banner option is available.

    • Video should be 3:1 aspect ratio and a maximum of 10MB. The visible portion of the video that’s displayed may vary on different devices and screen sizes.

    • An image (SVG or PNG) with a transparent background can be added as an overlay through WordPress. Do not include any images or text directly on the video footage.

Introductory Text Field

  • Intro text, left column.

  • Should contain a concise introduction (one to three sentences) explaining the content. Do not use this as another navigation using multiple hyperlinks.

  • Additional information, right column – may contain a date, note or bullet points.

Upper Black Band

Icon ratio is 1:1, icon display size is 110 x 110px.

Lower Photo Tiles

  • The photos cannot be repeated from or replace the top navigation.

  • Photos must be unique and not be repeated in the banner position(s). Photos should navigate to/showcase child pages within the collection of pages and not to external sites.

  • Only the page title and tile image will appear. There is no tile description option.

  • The tile label must be simple, short, enticing and specific to the content on the next page. Labels must be title case, one to five words maximum.

  • A minimum of three tiles and a maximum of nine is recommended.

  • No graphics, logos, photo composites or text overlay. Only original, high-resolution photos should be used in the tile position.

  • Lower tile photo display size will be changed depend on device screen size. Desktop display view is 480 x 280px. Use 960 x 560px photos.

Lower Black Band (optional)

Used for additional information

Secondary Page Elements

Secondary/Child Pages use the two-column template layout. The Content area follows the standard page layout.

  • The “In This Section” navigation is replaced by a visual top navigation.

  • The right column may only be used for Contact Information and/or Related Information.

 

Version 2.02 . March 2024 . City of Toronto Web Standards