Difference between revisions of "About vExpo/vExpo Knowledge Base/Kiosk/Create"
Monika.fahim (talk | contribs) |
|||
(18 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{#css: | ||
+ | |||
+ | .btn { | ||
+ | border: none; | ||
+ | background-color: #FFFFFF; | ||
+ | padding: 14px 28px; | ||
+ | font-size: 12px; | ||
+ | cursor: pointer; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .btn:hover {background: #ff9800;} | ||
+ | |||
+ | .cta {color: #eee;} | ||
+ | |||
+ | |||
+ | p{ | ||
+ | font-family: "Noto sans", sans-serif !important; | ||
+ | font-size: 1.0em; | ||
+ | } | ||
+ | |||
+ | li{ | ||
+ | font-family: "Noto sans", sans-serif !important; | ||
+ | font-size: 1.0em; | ||
+ | } | ||
+ | |||
+ | .wrap { | ||
+ | height: 100%; | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | |||
+ | .button { | ||
+ | width: 270px; | ||
+ | height: 30px; | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | font-size: 13px; | ||
+ | letter-spacing: 2.5px; | ||
+ | font-weight: 500; | ||
+ | color: #FFFFFF; | ||
+ | background-color: #FFFFFF; | ||
+ | border: none; | ||
+ | border-radius: 45px; | ||
+ | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); | ||
+ | transition: all 0.3s ease 0s; | ||
+ | cursor: pointer; | ||
+ | outline: none; | ||
+ | padding-top: 15px; | ||
+ | padding-left: 15px; | ||
+ | margin-right: 100px; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | .button:hover { | ||
+ | background-color: #adadad; | ||
+ | box-shadow: 0px 15px 20px rgba(4, 97, 123, 0.4); | ||
+ | color: #FFFFFF; | ||
+ | transform: translateY(-7px); | ||
+ | } | ||
+ | |||
+ | .checkbox { | ||
+ | list-style: none; | ||
+ | } | ||
+ | }} | ||
+ | <p class="button"><strong>[[About_vExpo/vExpo_Knowledge_Base|<span>'''< Back to Knowledge Base'''</span>]]</strong></p> | ||
+ | |||
{| | {| | ||
[[File:Kiosk_Owner_Creating.png|1200px|]]</center> | [[File:Kiosk_Owner_Creating.png|1200px|]]</center> | ||
|} | |} | ||
{{StepbyStepMenuKiosk}} | {{StepbyStepMenuKiosk}} | ||
+ | [[FR:À_propos_de_vExpo/Base_de_connaissances_sur_vExpo/Kiosque/Créer]] | ||
+ | ='''Planning and Creating a New Kiosk'''= | ||
− | + | Kiosk owners, as outlined in the [https://wiki.gccollab.ca/About_vExpo/Roles_and_Responsibilities Roles and Responsibilities] for the vExpo, are responsible for planning and creating the final designs of their kiosks. Guidance material has been developed to support you throughout this process. | |
+ | Follow these 5 steps to plan and create your new virtual kiosk, utilizing our three-part video tutorial for assistance: | ||
+ | |||
+ | <ul> | ||
+ | #Plan your kiosk (Step 1) | ||
+ | #Design and export your kiosk panels (Steps 2 and 3) | ||
+ | #Build and publish your kiosk (Steps 4 and 5) | ||
+ | </ul> | ||
− | + | Refer to our [https://wiki.gccollab.ca/About_vExpo/FAQ%27s FAQ] for any questions. | |
+ | ==1. Plan your kiosk== | ||
− | + | Begin by using the [https://drive.google.com/uc?id=1cXUL1z9594wC5g2IZaDmMSJHbpFQmZNE&export=download Kiosk Mock-up Creation Guide] to formulate a rough idea of your kiosk content, including visuals, interactivity, and navigation. This document covers essential topics such as recommended applications for content creation, the structure of a virtual kiosk, and steps for creating your mockup. | |
− | + | Once you've familiarized yourself with the guide and envisioned your content, utilize the [https://drive.google.com/uc?id=1IROZ4zfw5bAjZbvD8_xhFD5qmyULIwWw&export=download Kiosk Mockup Template] to organize your kiosk content and layout. This is an opportunity to sketch and experiment before finalizing your panel design. | |
− | + | Once your kiosk mockup is completed, transfer the corresponding content to the [https://drive.google.com/uc?id=1eNyLniPjhdAfIh6OwtUfDNyn1vjJuX8U&export=download Kiosk Content Planning Template]. This tool will assist you later in the process. Ensure all planned content for your kiosk is available in both official languages, including decorative text, description card text, thumbnail images, and hotspot links. | |
− | *Guide: Kiosk Mock-up Creation Guide | + | Resources: |
+ | *Guide: [https://drive.google.com/uc?id=1cXUL1z9594wC5g2IZaDmMSJHbpFQmZNE&export=download Kiosk Mock-up Creation Guide] – to help you plan your kiosk content and layout. | ||
− | *Template: [https://drive.google.com/uc?id=1IROZ4zfw5bAjZbvD8_xhFD5qmyULIwWw&export=download Kiosk Mockup Template | + | *Template: [https://drive.google.com/uc?id=1IROZ4zfw5bAjZbvD8_xhFD5qmyULIwWw&export=download Kiosk Mockup Template] – to help you create a mockup. |
+ | *Template: [https://drive.google.com/uc?id=1eNyLniPjhdAfIh6OwtUfDNyn1vjJuX8U&export=download Kiosk Content Planning Template] - to record your content to use later in vBuilder. | ||
− | + | ==2. Design your kiosk panels== | |
− | + | Refer to the instructions in the [https://drive.google.com/uc?id=1beYSAGT1PWPrr7cLon3bG-pdrVaWNIBI&export=download Creating Your Final Kiosk Design Guide] to transform your mockup into high-resolution panel images with consistent layout, good design, and overall balance. Utilize one of our [https://drive.google.com/drive/u/0/folders/1iXE-u7eOCoO0gbb-jygIXNgIkvhbJ24F blank canvas templates] to capture your designs in the required layout and format before exporting them as .png files. In total, you should have 8 image panels: left, central, right, and title in both official languages. | |
− | + | While you can create the required panel images using the provided guides and tutorials, you may also seek support from your department’s communications, marketing, or multimedia team. | |
− | + | Common applications for this purpose include Adobe Illustrator, Adobe Photoshop, Adobe XD, Sketch, Figma, Canva, and PowerPoint. | |
− | |||
− | |||
− | |||
+ | Resources: | ||
+ | *Guide: [https://drive.google.com/uc?id=1beYSAGT1PWPrr7cLon3bG-pdrVaWNIBI&export=download Creating Your Final Kiosk Design Guide] to help you create the final high resolution panel images for your 3D kiosk. | ||
+ | *Templates: [https://drive.google.com/drive/u/0/folders/1iXE-u7eOCoO0gbb-jygIXNgIkvhbJ24F Blank canvas templates] for capturing final kiosk design (PPT, SVG, Figma, Adobe XD, Illustrator). | ||
− | + | ==3. Export your kiosk panel image files== | |
− | Once your kiosk designs are finalized in both official languages, export each individual kiosk panel as .png files. These will be used to create the 3D version of the kiosk | + | Once your kiosk designs are finalized in both official languages, export each individual kiosk panel as .png files. These files will be used to create the 3D version of the kiosk. |
− | Name each image file | + | For a 3-panel kiosk, you should have a total of 8 image panels (4 panels per official language): left, central, right, and title. Name each image file according to the following convention: |
<ul> | <ul> | ||
Line 49: | Line 128: | ||
</ul> | </ul> | ||
+ | Resource: | ||
+ | *Guide: [https://drive.google.com/uc?id=1ieXwYzqKXwr6RfpDuuqOU-9xNs6fQBUj&export=download Kiosk image specifications guide] to provide the exact requirements for each panel. | ||
+ | |||
+ | ==4. Build your kiosk using the vBuilder self-serve tool== | ||
+ | The Tech Lab has developed the Kiosk vBuilder self-serve tool to assist you in creating your virtual kiosk. Follow the instructions in the [https://drive.google.com/file/d/1mqH393Cj_ihjVqlvYLMvUZYftJA3QM2J/view?usp=sharing Kiosk vBuilder Creation Guide] to upload your panels and construct your kiosk. | ||
+ | |||
+ | Ensure you have all the required content ready, including the unique vBuilder link provided by the Tech Lab, the panel image files, and the content planning template with description card text and hotspot URLs. | ||
+ | |||
+ | If you haven't received the link to access the vBuilder, contact the Tech Lab at [mailto:techlab-labtech@csps-efpc.gc.ca techlab-labtech@csps-efpc.gc.ca] to request a new kiosk and a vBuilder link, providing details such as the event for which your kiosk will be used, the event host name, and your kiosk/organization name. | ||
− | + | Resource: | |
+ | *Guide: [https://drive.google.com/file/d/1mqH393Cj_ihjVqlvYLMvUZYftJA3QM2J/view?usp=sharing Kiosk vBuilder Creation Guide] to show you step by step how to build your kiosk. | ||
− | + | ==5. Publish your kiosk== | |
+ | Once you've uploaded your panels, built your kiosk, and previewed your final product using the Kiosk vBuilder tool, contact the Tech Lab team at [mailto:techlab-labtech@csps-efpc.gc.ca techlab-labtech@csps-efpc.gc.ca] to notify them that your kiosk is ready to be published on a public-facing site. Please allow up to 2 working days for your kiosk to be published for quality assurance purposes. |
Revision as of 10:08, 13 May 2024
Step by Step Process | Roles and Responsibilities |
Planning and Creating a New Kiosk
Kiosk owners, as outlined in the Roles and Responsibilities for the vExpo, are responsible for planning and creating the final designs of their kiosks. Guidance material has been developed to support you throughout this process. Follow these 5 steps to plan and create your new virtual kiosk, utilizing our three-part video tutorial for assistance:
- Plan your kiosk (Step 1)
- Design and export your kiosk panels (Steps 2 and 3)
- Build and publish your kiosk (Steps 4 and 5)
Refer to our FAQ for any questions.
1. Plan your kiosk
Begin by using the Kiosk Mock-up Creation Guide to formulate a rough idea of your kiosk content, including visuals, interactivity, and navigation. This document covers essential topics such as recommended applications for content creation, the structure of a virtual kiosk, and steps for creating your mockup.
Once you've familiarized yourself with the guide and envisioned your content, utilize the Kiosk Mockup Template to organize your kiosk content and layout. This is an opportunity to sketch and experiment before finalizing your panel design.
Once your kiosk mockup is completed, transfer the corresponding content to the Kiosk Content Planning Template. This tool will assist you later in the process. Ensure all planned content for your kiosk is available in both official languages, including decorative text, description card text, thumbnail images, and hotspot links.
Resources:
- Guide: Kiosk Mock-up Creation Guide – to help you plan your kiosk content and layout.
- Template: Kiosk Mockup Template – to help you create a mockup.
- Template: Kiosk Content Planning Template - to record your content to use later in vBuilder.
2. Design your kiosk panels
Refer to the instructions in the Creating Your Final Kiosk Design Guide to transform your mockup into high-resolution panel images with consistent layout, good design, and overall balance. Utilize one of our blank canvas templates to capture your designs in the required layout and format before exporting them as .png files. In total, you should have 8 image panels: left, central, right, and title in both official languages.
While you can create the required panel images using the provided guides and tutorials, you may also seek support from your department’s communications, marketing, or multimedia team.
Common applications for this purpose include Adobe Illustrator, Adobe Photoshop, Adobe XD, Sketch, Figma, Canva, and PowerPoint.
Resources:
- Guide: Creating Your Final Kiosk Design Guide to help you create the final high resolution panel images for your 3D kiosk.
- Templates: Blank canvas templates for capturing final kiosk design (PPT, SVG, Figma, Adobe XD, Illustrator).
3. Export your kiosk panel image files
Once your kiosk designs are finalized in both official languages, export each individual kiosk panel as .png files. These files will be used to create the 3D version of the kiosk.
For a 3-panel kiosk, you should have a total of 8 image panels (4 panels per official language): left, central, right, and title. Name each image file according to the following convention:
- English right panel: Kxxxxxx_EnCA_Right
- French right panel: Kxxxxxx_FrCA_Right
- English centre panel: Kxxxxxx_EnCA_Centre
- French centre panel: Kxxxxxx_FrCA_Centre
- English centre title panel: Kxxxxxx_EnCA_CentreTitle
- French centre title panel: Kxxxxxx_FrCA_CentreTitle
- English left panel: Kxxxxxx_EnCA_Left
- French left panel: Kxxxxxx_FrCA_Left
Resource:
- Guide: Kiosk image specifications guide to provide the exact requirements for each panel.
4. Build your kiosk using the vBuilder self-serve tool
The Tech Lab has developed the Kiosk vBuilder self-serve tool to assist you in creating your virtual kiosk. Follow the instructions in the Kiosk vBuilder Creation Guide to upload your panels and construct your kiosk.
Ensure you have all the required content ready, including the unique vBuilder link provided by the Tech Lab, the panel image files, and the content planning template with description card text and hotspot URLs.
If you haven't received the link to access the vBuilder, contact the Tech Lab at techlab-labtech@csps-efpc.gc.ca to request a new kiosk and a vBuilder link, providing details such as the event for which your kiosk will be used, the event host name, and your kiosk/organization name.
Resource:
- Guide: Kiosk vBuilder Creation Guide to show you step by step how to build your kiosk.
5. Publish your kiosk
Once you've uploaded your panels, built your kiosk, and previewed your final product using the Kiosk vBuilder tool, contact the Tech Lab team at techlab-labtech@csps-efpc.gc.ca to notify them that your kiosk is ready to be published on a public-facing site. Please allow up to 2 working days for your kiosk to be published for quality assurance purposes.