Portal design - code entry

Launch multiple apps from one store app using the event code.

What is a Portal with code entry?

  • Has only one button which opens an ‘enter code’ input
  • Option to define a ‘view all’ code which will show a list of all projects/apps set to visible along with those recently viewed by the user
  • Used in situations where you have:
    –    Large numbers of projects/apps
    –    New projects/apps are being added continuously
  • Requires less maintenance than other portals.

code-portal.jpgPhone Background & Loading Screen

  • 1242 x 2208px PNG
  • No transparency
  • 170px clear space top & bottom (for smaller screens)

portal-code-background.png

Tablet Background & Loading Screen

  • 2048 x 1536 px PNG
  • No transparency
  • 200px clear space top & bottom (for smaller screens)

Note your button will sit in the centre of the space over the background.
 The keyboard and enter code area will appear when the enter event code button is tapped – the bottom 2/3 of the background needs to be kept free of important information to allow for this.
  One background gets used for all devices. This means it gets cropped for smaller screens. Allow for 170px (phone) & 200px (tablet) of clear space top and bottom in your designs.

 

Enter Code Button

  • 640w x any height px PNG
  • Transparency

Note in this example, the button is transparent and sits over the top of the background image.

portal-enter-code.png