Changes

no edit summary
Line 127: Line 127:  
==== General layout ====
 
==== General layout ====
 
<p>A balanced composition normally is achieved by using 3 panels to showcase your content, accompanied with a separator panel that usually displays a title.  
 
<p>A balanced composition normally is achieved by using 3 panels to showcase your content, accompanied with a separator panel that usually displays a title.  
[[File:Kiosk 3 panel.png|center|250px]]
+
[[File:Kiosk 3 panel.png|center|350px]]
 
<div style="text-align: center;">''Example of a virtual kiosk with 3 panels''</div>
 
<div style="text-align: center;">''Example of a virtual kiosk with 3 panels''</div>
 
</p>
 
</p>
 +
<br>
 
<p>:''Note: It can sometimes be tempting to want to add as much information as possible on the kiosk and use as much real-estate as possible. However, this is not recommended as it can become overwhelming for the viewers and fail to achieve the main objective - to encourage viewers to click on the kiosk links and learn more about what you have to offer.''</p>
 
<p>:''Note: It can sometimes be tempting to want to add as much information as possible on the kiosk and use as much real-estate as possible. However, this is not recommended as it can become overwhelming for the viewers and fail to achieve the main objective - to encourage viewers to click on the kiosk links and learn more about what you have to offer.''</p>
   Line 137: Line 138:  
<div style="text-align: center;">''Example of a kiosk title panel using a logo and a name.''</div>
 
<div style="text-align: center;">''Example of a kiosk title panel using a logo and a name.''</div>
 
</p>
 
</p>
 
+
<br>
 
<p>'''Content elements:''' This includes the different pieces of content that are displayed on the kiosk. They are the key elements that attracts the viewers’ attention, on which they can click to navigate to more detailed information (i.e. Website, video, etc.). This usually includes a combination of icons or images (ex: screens-shots of a web page or video, stock images, etc) with some short decorative text that helps to give some quick and short context to what the idea or project is about.
 
<p>'''Content elements:''' This includes the different pieces of content that are displayed on the kiosk. They are the key elements that attracts the viewers’ attention, on which they can click to navigate to more detailed information (i.e. Website, video, etc.). This usually includes a combination of icons or images (ex: screens-shots of a web page or video, stock images, etc) with some short decorative text that helps to give some quick and short context to what the idea or project is about.
 
[[File:Kiosk decorative text.png |center|350px]]
 
[[File:Kiosk decorative text.png |center|350px]]
 
<div style="text-align: center;">''Example of a piece of content represented by a screenshot and short decorative text.''</div>
 
<div style="text-align: center;">''Example of a piece of content represented by a screenshot and short decorative text.''</div>
 
</p>
 
</p>
 
+
<br>
 
<p>'''Contact information:''' This will be the points of contact that can be used by viewers to reach out to you, follow you on social media, etc., usually making use of social media icons.
 
<p>'''Contact information:''' This will be the points of contact that can be used by viewers to reach out to you, follow you on social media, etc., usually making use of social media icons.
[[File:SM icons.png |center|350px]]
+
[[File:SM icons.png |center|200px]]
 
<div style="text-align: center;">''Example of a contact information section.''</div>
 
<div style="text-align: center;">''Example of a contact information section.''</div>
 
</p>
 
</p>
 
+
<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. 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.
 
[[File:Kiosk hotspot desc cards.png|center|350px]]
 
[[File:Kiosk hotspot desc cards.png|center|350px]]
Line 157: Line 158:  
[[File:Kiosk content do & donts.png‎|center|450px]]
 
[[File:Kiosk content do & donts.png‎|center|450px]]
 
</p>
 
</p>
 
+
<br>
 
<p>'''Keep decorative text short and simple.''' The text used directly in the kiosk background acts as a decorative visual element and should only be used to provide additional context to the hotspot (often represented by an image or icon). As a result, the decorative text needs to be very short and simple, creating curiosity. This text is only decorative, and does not appear on the mobile and accessible version of the kiosk. As a result, do not include any important information in the decorative text that is not available elsewhere. Keep it short and sweet… using a long paragraph tends to discourage users and will lose their attention.
 
<p>'''Keep decorative text short and simple.''' The text used directly in the kiosk background acts as a decorative visual element and should only be used to provide additional context to the hotspot (often represented by an image or icon). As a result, the decorative text needs to be very short and simple, creating curiosity. This text is only decorative, and does not appear on the mobile and accessible version of the kiosk. As a result, do not include any important information in the decorative text that is not available elsewhere. Keep it short and sweet… using a long paragraph tends to discourage users and will lose their attention.
[[File:Kiosk decoractive text do & donts.png|center|450px]]
+
[[File:Kiosk decoractive text do & donts.png|center|650px]]
 
</p>
 
</p>
 
+
<br>
 
<p>'''Consider the overall look when selecting images.''' The proper selection of images is key. Each image must be coherent with the context in which they are used while also considering the overall design composition of the kiosk. The images should share the same style and tone to ensure a professional look. Combining images with different styles and colors schemes could lead to the impression of disorganization and lack of structure, affecting the effectiveness of the kiosk.
 
<p>'''Consider the overall look when selecting images.''' The proper selection of images is key. Each image must be coherent with the context in which they are used while also considering the overall design composition of the kiosk. The images should share the same style and tone to ensure a professional look. Combining images with different styles and colors schemes could lead to the impression of disorganization and lack of structure, affecting the effectiveness of the kiosk.
 
:''Note: If you are uncertain about what images to include, you can suggest images and icons, which we will use as guides to create the final designs, ensuring a coherent look and feel.''
 
:''Note: If you are uncertain about what images to include, you can suggest images and icons, which we will use as guides to create the final designs, ensuring a coherent look and feel.''