2022-05-11 Festivals & Events Design

Photo Gallery

• Looked at options

Open

Option 1: Overlay

Open

Option 2: Inline

• Preference for Option 2, with the image in-line on page

  • Reduce opacity of thumbnails

  • Selected thumbnail should have focus and be 100% opacity

• Photo sizes needed:

  • Thumbnails

  • Display size

  • Original

• Open image in modal / new tab - need alternative to + symbol

  • Use text

• Photo description mandatory

• Mobile

  • Photo description

    • shows max 2 line with dots to expand - same as banners

  • Thumbnails

    • responsive - 2 or 3 column

Actions

Header and Footer

• There is a need to standardize the header and footer when not using the standard http://toronto.ca c-frame

• Comes from a request from TPH to use their own logo when building a reservation site using FrontDesk

  • TPH has their own approved branding

  • Separate instance of FD due to data privacy requirements

  • Current TPH booking site

• Other sites using different header/footers

  • City of Toronto Jobs - built using Salesforce and less customization options exist

  • Toronto Election jobs

  • My Child Care Account

• Other sites discussed

  • MyToronto Pay - differentiated from http://toronto.ca but retains some branding to ensure trust

  • Candidate Booking - example of a FrontDesk site embedded in our c-frame

Things to consider

• Blue bar

  • Height of bar

  • Height and position of logo

  • Where logo links to

• Breadcrumb standards

• Alternative navigations (e.g. Elections, other logged in sites)

• Footer

  • Location of information (left aligned vs centered)

  • Standard for what needs to be included: copyright, privacy, accessibility

Actions