| Line 1: |
Line 1: |
| − | {{VExpo_nav}} [[FR:Académie du numérique de l’ÉFPC/Expo virtuelle/Lignes directrices sur la conception et le contenu]] | + | {{VExpo_nav}} [[FR:Lab tech de l'ÉFPC/vExpo/Lignes directrices sur la conception et le contenu]] |
| | <br> | | <br> |
| | <div style="float:right">__TOC__</div> | | <div style="float:right">__TOC__</div> |
| Line 55: |
Line 55: |
| | = Content and Design Guidelines = | | = Content and Design Guidelines = |
| | | | |
| − | The guidelines below provide information on the content and design requirements for the development of a virtual lobby and kiosk. If you have requested a lobby or kiosk, please pay close attention to the sections entitled "'''What we need from you'''", as this outlines the content and material you will need to provide prior to the agreed-upon deadline. | + | The guidelines below provide information on the content requirements and design guidelines for the development of a vExpo lobby and kiosk. |
| | <br> | | <br> |
| | <br> | | <br> |
| − | <span style="font-size: 1.5em;">What product guidelines are you looking for? </span>
| |
| | | | |
| − | {| style="width: 45%;"
| + | == vExpo Content Requirements == |
| − | |-
| |
| − | | style="width: 50%" | <div style="text-align: center;">'''[https://wiki.gccollab.ca/CSPS_Digital_Academy/Virtual_Expo/Content_%26_Design_Guidelines#vExpo_Lobby Virtual lobby]'''</div>[[File:Cyber Event Lobby Oct EN.jpg|center|250px|border|link=https://wiki.gccollab.ca/CSPS_Digital_Academy/Virtual_Expo/Content_%26_Design_Guidelines#vExpo_Lobby]] || style="width: 50%" | <div style="text-align: center;">'''[https://wiki.gccollab.ca/CSPS_Digital_Academy/Virtual_Expo/Content_%26_Design_Guidelines#Virtual_Kiosks Virtual kiosk]'''</div>[[File:3D kiosk EN.png|center|325px|border|link=https://wiki.gccollab.ca/CSPS_Digital_Academy/Virtual_Expo/Content_%26_Design_Guidelines#Virtual_Kiosks]]
| |
| − | |}
| |
| − | <br>
| |
| − | <br>
| |
| − | == vExpo Lobby == | |
| − | <div style="float:right">[[file:Lobby elements.png|link=https://wiki.gccollab.ca/images/e/ec/Lobby_elements.png|750px]]</div>
| |
| − | <p>The vExpo lobby is designed to provide participants with easy access to the event’s content and activities, such as links to:
| |
| − | *Event Agenda
| |
| − | *Speaker biographies
| |
| − | *Main presentation (e.g. webcast)
| |
| − | *Breakout sessions
| |
| − | *Kiosks
| |
| − | </p>
| |
| | | | |
| − | <p>All content accessible through the lobby must comply with the requirements outlined below.</p>
| + | '''CSPS is committed to offer content and products that are fully accessible and inclusive. Event hosts and kiosk owners are responsible for the hosting and management of the content and third party tools accessible through the vExpo platform and ensuring it meets the requirements under the [http://laws-lois.justice.gc.ca/eng/acts/O-3.01/ Official Languages Act], [http://laws-lois.justice.gc.ca/eng/acts/C-42/index.html Copyright Act] and the [http://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601 Standard on Web Accessibility].''' |
| | | | |
| − | === Content requirements ===
| + | <p>All content to be included in a vExpo lobby and kiosks must: |
| − | <p>All content to be included in a vExpo lobby must: | |
| | *Be '''available on the web''' (e.g. department site, GCwiki, GCpedia, Youtube, etc.) so that we can link to it directly. | | *Be '''available on the web''' (e.g. department site, GCwiki, GCpedia, Youtube, etc.) so that we can link to it directly. |
| − | :''Note: the Digital Academy will not host any content for the lobby. However, the team can provide support to help you find the best options to make your content available on the Web. '' | + | :''Note: CSPS will not host any content for the lobby. However, the team can provide support to help you find the best options to make your content available on the Web. '' |
| | *Be available in '''both official languages''' | | *Be available in '''both official languages''' |
| | *Be '''accessible''' (i.e readable using assistive technology, alt text, transcripts, closed captions, etc.) | | *Be '''accessible''' (i.e readable using assistive technology, alt text, transcripts, closed captions, etc.) |
| − | :''Note: The CSPS Digital Academy is committed to offer content and products that are fully accessible and inclusive. Content that does not meet accessible requirements will not be included in the lobby (e.g. no PDFs will be accepted).''
| |
| | </p> | | </p> |
| − | ==== Public Access ====
| + | |
| | <p>The vExpo is available publicly on the Web for anyone to see and access. By default, all content available from the lobby and kiosks should: | | <p>The vExpo is available publicly on the Web for anyone to see and access. By default, all content available from the lobby and kiosks should: |
| | *have open access to be viewed publicly, without login or restricted permissions. | | *have open access to be viewed publicly, without login or restricted permissions. |
| | *have the appropriate copy rights to be shared publicly. | | *have the appropriate copy rights to be shared publicly. |
| − | :''Note: Although we do not recommend it, it is possible to restrict access to GC employees by hosting your content on a GCpedia page, which can only be accessed when on the GC network.''</p> | + | :''Note: Although we do not recommend it, it is possible to restrict access to GC employees by hosting your content on a GCpedia page, which can only be accessed when on the GC network.''</p> |
| | | | |
| − | {| width="100%" cellpadding="10" cellspacing=15px | + | {| style="border: 1px solid black; background: white" |
| − | | + | |- |
| − | |-valign="top" | + | ! style="border: 1px; solid black; width: 40%" | <big>'''vExpo Lobby'''</big> |
| − | |style="border-left: 10px solid #3f2a56; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); color: black; background-color: white; font-size:1em;" |
| + | ! style="border: 1px; solid black; width: 40%" | <big>'''vExpo Kiosk'''</big> |
| − | | + | |- |
| − | === <big>What we need from you</big> ===
| + | | <br> |
| − | <p>To help us develop the virtual lobby within the required timeframe, we will need you to provide the following items:</p>
| + | The vExpo lobby is designed to provide participants with easy access to the event’s content and activities, such as links to: |
| − | ❏ Event title (both official languages)<br>
| + | *Event Agenda |
| − | ❏ Event date and time<br>
| + | *Speaker biographies |
| − | ❏ Departmental branding book, guidelines, etc. available, if required to be used in the lobby.<br>
| + | *Main presentation (e.g. webcast) |
| − | ❏ Source files in '''vector''' format (.ai, .eps, .svg, etc.) for event visuals, imagery, branding, if required to be used on the lobby.<br>
| + | *Breakout sessions |
| − | :*'''''If''''' a vector file is not possible, provide a high resolution .png with transparent background. | + | *Kiosks |
| − | :*This is to ensure a consistent look and feel across the event promotion (e.g. using the same visuals for social media cards and on the vExpo lobby’s presentation screen.)<br>
| + | [[File:Lobby_Elements.png|700px]] |
| − | :*If not provided, our designer will provide the visuals<br>
| + | | The virtual kiosks are designed to provide participants with easy access information about partners and their initiatives. Kiosks usually include: |
| − | ❏ Links to your content (i.e. Agenda, bios)<br>
| |
| − | ❏ Links to the event presentation(s)<br>
| |
| − | <p>Note: You may need or want the lobby to reflect the look and feel of the event's visual branding (ex: promotional material). If there are additional visuals, logos, etc. that should be included in the event's visual design, make sure to let us know and send us the source files along with the content submission template (optional). </p>
| |
| − | | |
| − | <div class="btn">[[Media:VExpo_Content_Submission_Template_Lobby.docx|vExpo Lobby Content Submission Template (download Word file)]]</div>
| |
| − | |}
| |
| − | | |
| − | ==== Hotspots ====
| |
| − | <p>All the content to be included in the vExpo lobby and kiosks will be converted into a hotspot (or link). The hotspots allow the participants to navigate to the target destination where they can view the content (web page, youtube, presentation, etc.). Each hotspot has a descriptive text and icon that are displayed in a card that appears when the user moves their mouse over it. This same card is also re-used in the mobile and accessible version of the lobby. </p>
| |
| − | | |
| − | [[File:Hotspot lobby.png|center|350px]] | |
| − | <div style="text-align: center;">''Example of a vExpo lobby with description card (left: desktop view, right: mobile view).''</div>
| |
| − | | |
| − | == Virtual Kiosks ==
| |
| − | <div style="float:right">[[file:VKiosk elements.png|link=https://wiki.gccollab.ca/images/7/77/VKiosk_elements.png|750px]]</div>
| |
| − | <p>The virtual kiosks are designed to provide participants with easy access information about partners and their initiatives. Kiosks usually include:
| |
| | *Kiosks name | | *Kiosks name |
| | *Contact information | | *Contact information |
| | *Links to websites, videos and podcasts, etc. | | *Links to websites, videos and podcasts, etc. |
| − | </p> | + | <br> |
| − | | + | <br> |
| − | <p>All content accessible through the kiosks must comply with the requirements outlined below.</p>
| + | [[file:VKiosk elements.png|link=https://wiki.gccollab.ca/images/7/77/VKiosk_elements.png|700px]] |
| − | === Content requirements ===
| |
| − | <p>All content to be included in a kiosk must:
| |
| − | *Be '''available on the web''' (e.g. department site, GCwiki, GCpedia, Youtube, etc.) so that we can link to it directly.
| |
| − | :''Note: the Digital Academy will not host any content for the kiosk. However, the team can provide guidance to help you find the best options to make your content available on the Web.'' | |
| − | *Be available in '''both official languages'''.
| |
| − | *Be '''accessible''' (i.e readable using assistive technology, alt text, transcripts, closed captions, etc.)
| |
| − | :''Note: The CSPS Digital Academy is committed to offer content and products that are fully accessible and inclusive. Content that does not meet accessible requirements will not be included in the kiosk (e.g. no PDFs will be accepted).'' </p>
| |
| − | ==== Public Access ====
| |
| − | <p>The vExpo is available publicly on the Web for anyone to see and access. By default, all content available from the lobby and in the kiosk should:
| |
| − | *have open access to be viewed publicly, without login or restricted permissions.
| |
| − | *have the appropriate copy rights to be shared publicly.
| |
| − | :''Note: Although we do not recommend it, it is possible to restrict access to GC employees by hosting your content on a GCpedia page, which can only be accessed when on the GC network.''</p>
| |
| − | | |
| − | {| width="100%" cellpadding="10" cellspacing=15px
| |
| − | | |
| − | |-valign="top"
| |
| − | |style="border-left: 10px solid #3f2a56; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); color: black; background-color: white; font-size:1em;" |
| |
| | | | |
| − | === <big>What we need from you</big> ===
| |
| − | ❏ Kiosk title (in both official languages)
| |
| − | ❏ ''Optional'' - logo/image to accompany kiosk title, if required<br>
| |
| − | ❏ ''Optional'' - Departmental branding book, guidelines, etc. available, if required to be used on the kiosk.<br>
| |
| − | ❏ Source files in '''vector''' format (.ai, .eps, .svg, etc.) or kiosk visuals, imagery, branding, if required.<br>
| |
| − | :*'''''If''''' a vector file is not possible, provide a high resolution .png with transparent background.
| |
| − |
| |
| − | <p>'''For each individual piece of content becoming a hotspot on the kiosk (see [[CSPS_Digital_Academy/Virtual_Expo/Content_%26_Design_Guidelines#Hotspots|note on Hotspots]] above):''' <br>
| |
| − | ❏ '''Links''' to the content (English and French links)<br>
| |
| − | ❏ '''Short descriptive text''' for each hotspot card (in both official languages)<br>
| |
| − | :*This should be a call to action, enticing participants to click on the link<br>
| |
| − | :*Character limit: 100 (including spaces)<br>
| |
| − | ❏ ''Optional'' - '''Icon''' to be used on the hotspot card (in both official languages, if it includes text)<br>
| |
| − | :*These icons are used to accompany the hotspot’s descriptive text, therefore should correspond with the text <br>
| |
| − | :*If not provided, our designer will use standard icons from our library <br>
| |
| − | ❏ ''Optional'' - An '''image''' to be used on the kiosk panel as the hotspot (in both official languages, if it includes text)<br>
| |
| − | :* this should be provided '''''if''''' you know what image/icon should be used for the hotspot to represent the content. If you are unsure, leave it blank in the template and the Designer with find an appropriate image.
| |
| − | ❏ ''Optional'' - '''Facultative, decorative text''' to accompany the hotspot image.
| |
| − | :* this should be short and simple (max 100 characters with spaces) and should not contain important information.
| |
| − | :* the designer will determine if the decorative text will be included, or not, in the kiosk visuals, based on the overall design and space available.<br>
| |
| − | ❏ ''Optional'' - Description of '''preferred general location''' where you would like the various pieces of content to appear on the kiosk (i.e. left, central or right panel)<br>
| |
| − | <br>
| |
| − | '''''General note:''' items marked as optional above are to be submitted at your discretion. These are only meant to offer you the ability to have additional control over the design of your kiosk, if needed.''
| |
| − | </p>
| |
| − | <div class="btn">[[Media:VExpo Content Submission Template Kiosk.docx |vExpo Kiosk Content Submission Template (download Word file)]]</div>
| |
| | |} | | |} |
| | | | |
| − | == Additional information == | + | == Kiosk Design Guidelines == |
| | | | |
| − | <p>The virtual kiosks are used to provide users with an overview of a department’s or group’s mandate, projects and/or initiatives. To have a successful product, here are some key considerations when gathering and submitting content to be included in your kiosk.</p> | + | <p>The virtual kiosks are used to provide users with an overview of a department’s or group’s mandate, projects and/or initiatives. To have a successful product, here are some key considerations when planning the content and design of your kiosk.</p> |
| | | | |
| | === General layout === | | === General layout === |
| Line 202: |
Line 127: |
| | </p> | | </p> |
| | <br> | | <br> |
| − | <p>'''Hotspots:''' Any of these elements mentioned above will be converted into a hotspot ( link) that viewers can click on to navigate to the target destination (i.e. Website), which is the actual content we want people to see. Each hotspot is accompanied by an information card that appears at the bottom of the screen on mouse-over (when the viewer’s cursor hovers over the hotspot). This information card includes a descriptive text and icon, and is used as a call to action, explaining why they should click on the link (e.g. Learn about the Discover Series. Visit the Website,). The text and icon used within the information card is also re-used for the mobile and accessible version of kiosk. | + | <p>'''Hotspots:''' Any of these elements mentioned above will be converted into a hotspot ( link) that viewers can click on to navigate to the target destination (i.e. web page, youtube, presentation, etc.), which is the actual content we want people to see. Each hotspot is accompanied by an information card that appears at the bottom of the screen on mouse-over (when the viewer’s cursor hovers over the hotspot). This information card includes a descriptive text and icon, and is used as a call to action, explaining why they should click on the link (e.g. Learn about the Discover Series. Visit the Website,). The text and icon used within the information card is also re-used for the mobile and accessible version of kiosk. |
| − | [[File:Kiosk hotspot desc cards.png|center|350px]] | + | [[File:Hotspot lobby.png|center|350px]] |
| − | <div style="text-align: center;">''Example of a hotspot and its description card.''</div> | + | <div style="text-align: center;">''Example of a hotspot, its description card and how it translates to the mobile view.''</div> |
| | </p> | | </p> |
| | | | |