How to Design Kiosk Apps Using Designer

This article demonstrates using our Designer app to create kiosk apps effortlessly. With a few clicks, transform templates into user-friendly interfaces that guide users seamlessly through content and provide easy navigation between pages.

Here's a 3-minute video guide:


Let's jump in and get started:

Log on to our portal: http://app.optisigns.com/

Go to Engage page

chrome_M5sFvlYrU0

Click on "New App"

chrome_Kw8Uh3lQgt

Select 'Touch Screen Kiosks' then click on Select App

chrome_E4E7eHdNGT

Select 'Designer Pro' and then click on Build

chrome_vE3C4H1Gj3

You will be redirected to the Designer app.

For a refresher on how to use the Designer, please click here.

In Designer, you will see a new function in the top menu called Link after clicking on any element.

chrome_kYWeRiv6sa

Link can be used to map to another:

  • Template Design
  • OptiSigns' Assets such as an image, videos, documents, and some apps.
  • A Web URL

Once you click on Link, the link options menu will appear on the right-hand side.

Click on Add Link

chrome_j5Y0Whr5VH

A new window will populate to allow you to choose either:

  1. Input a direct URL, or
  2. Choose an asset

WCWrlnunVi

Selecting Direct URL

If you are using a direct URL,  you will need to input a URL and then click Add.

ShareX_rsBrnXaSD3

Once you have added your direct URL, you will be redirected back to your template or design. 

For direct URL, you will have some link options that you can choose from.

  • Update Link: This option will allow you to update your link to another direct URL or another asset
  • Remove Link: This option will allow you to remove your link
  • Duration (seconds): This option will set the maximum duration of how long your asset will display on the screen before returning to the main page.
  • Preload: Defaults to checked. This option will preload the URL or asset in the background to allow for instant display. This is good for user experience. However, if you have animation or dynamic content on your page, you may want to disable this.
  • Close Icon: This option allows for you to customize where you would like the Close icon to display on your asset
    • None
    • Top Left
    • Top Right
    • Bottom Left
    • Bottom Right

  • Close/Navigation Buttons Style:

    • Icon Position: Fine-tune icon placement within the bar for maximum visibility and accessibility. Options: none, top left, top center, top right, bottom left, bottom center, bottom right.

    • Icon Style: Harmonize your kiosk's look by selecting an icon design that fits your aesthetic. Options include Default, Outline, Solid, or Thin, ensuring alignment with the Close icon's font style.

    • Icon Color: Enhance your brand's identity by customizing icon colors to match your theme.

    • Icon Size: Adjust icon sizing for user-friendly recognition and interaction.

    • Show Navigation Bar: Enable to allow for back and forward navigation for enhanced user navigation. Enabling this also introduces additional options:

      • Navigation Bar Background Color: Personalize the navigation bar's background color to complement your overall design.

      • Navigation Bar Opacity: Modify the navigation bar's opacity for either a subtle or pronounced appearance.

Selecting an Asset

If you are using an asset,  you can choose your asset from your designated folder.

chrome_i3WtAoBlCe

Once you select your asset to be linked, you will be redirected back to your template or design. 

chrome_AGBzY1Skoq

For assets, you will have all the same link options as direct URL with the addition of Scale.

  • Scale: Defaults to Fit. This option will resize your asset per the selected preference
    • None
    • Fit
    • Stretch
    • Zoom

Click Save.

That's all! Congratulations!

You have successfully created your kiosk app using Designer, and it is now ready to be used.

 

If you have any additional questions, concerns, or any feedback about OptiSigns, feel free to reach out to our support team at support@optisigns.com