Branded App Home Screen - Additional App Design Settings

Above your app home screen layout you will see a few additional settings to edit your app tiles and app background.

• Tile Padding - This drop-down field will control the padding space between your app’s tiles.
• Background Color - This color picker field will control the background color for your app that appears behind the app’s tiles and other areas.
• Background Image - This option allows you to upload an image to appear as your apps background instead of a single color. You can use the trash icon to delete this image if required.

The MiGym platform can custom design home screens. You can work with our designer to create a fully custom home screen for your app, export your design assets and manage your tile design and content yourself independently.

The tile designs use 3 columns of square or rectangular tiles. Square tiles are usually 1:1 ratio (or optionally 2:2 or 3:3), and rectangle tiles spanning two or three columns are usually 1:2 and 1:3 ratio (especially those tiles with dynamic content), with additional allowance for the padding between tiles. As a general rule, we suggest you design the tiles using the standard 375pt mobile device width at @1x for vector tools like Sketch or Illustrator, with each tile 120pt x 120pt and 5pt gutter padding (2.5pt on the edges). Alternatively, 125pt tiles with 0pt gutter are a common starting point for MiGym custom tile designs. A custom background color behind the tiles is also available.

Tile padding is a screen-wide setting from 0 to 25pts @2x pixels per point. 1:2 tiles should add enough width to cover padding once, while 1:3 tiles should include the width of twice the padding.

Example A) 1:2 tile with 5pt of tile padding would be 300px tall by 610px wide.

Example B) 1:3 tile with 0px of tile padding would be 300px tall by 900px wide.

Tile background images will be centered and resized to fill the tile but maintain their aspect ratio. You can achieve a background image that spans multiple tiles by carefully slicing to the above noted pixel specs and gutter padding.

Custom designed Home Screens often incorporate centered captions, which can be achieved with a combination of the alignment setting along with the right amount of caption padding and margin. Note that the margin will increase the space around the entire caption and caption background color, while the padding will increase the space between the caption and the edge of the caption background color.

In order to accommodate dynamic middle captions into your design (schedules, announcements, notifications), the width of the middle caption is set to 1 column width less than the width of the tile, so a 3 column wide tile will have a 2 column wide middle caption, and a 2 column wide tile will have a 1 column wide middle caption. Single column width tiles cannot accommodate dynamic text in middle captions.