Home Screen Configuration

MiGym apps use a tile-based home screen to provide contextual information and navigation to your users. The tile designs use 3 columns of square or rectangular tiles and an unlimited number of rows such that your users can scroll down to see rows content flowing beyond the height of the screen. Each tile has a specific function or purpose which may require further input from you to work correctly. A tile's default appearance will reflect the classic MiGym tile design, but can be customized extensively. 

1. Log into the Admin Portal at https://admin.migym.com with your MiGym Admin account.
2. Go to the Home Screen tab
3. Your app's existing tiles and design appear on the left side, and the details for each tile you click on appear on the right side
4. Import tiles to "Draft"
   1. Before you make any changes, set the Active Home Screen to "Draft Home Screen" setting, which will allow you to make edits to the appearance of your home tiles without affecting your members' live app experience. 

Optionally you can import your tiles. This will populate your tile configuration with the original MiGym settings (if you never used the old Home Tiles feature).

If you ever need to reset your tile design, use the Import Tiles feature to restore the default MiGym tile set for your app.

Tip: Most features have an information icon next to them. Hover your mouse over the little "i" circle to view more information and tips.

 * Does not support a custom tile design

You can move and resize tiles within the 3 column grid system.

To move a tile, simply drag and drop it to where you want it. It will push overlapping tiles down to make room for your moved tile. 

To resize a tile, hover your mouse near the bottom right of the tile until you see an anchor point and the cursor changes to a down-right arrow. 

Default Icons & Backgrounds

MiGym has provided a set of default icons that appear for each type of tile (except Logo and Gallery tiles). These default icons are set to the predetermined color for your MiGym color scheme and based on our previous configuration settings. The background color of your tiles is also predetermined by the MiGym app color scheme set up during the initial app configuration. 

Customizing Icons & Backgrounds

Click a tile to review its properties, and you can click the icon itself to move and resize the icon:

Once you have selected a tile, you can  adjust its design properties:

1. Tile Icon - click Choose File to upload a new icon file. It should have a transparent background (use PNG files only), and be approximately 100px-200px in width and height although you can always resize it separately. Click the trash icon to remove the tile icon from your tile. 

1. Note: Dynamic content tiles' default icons anchor to the bottom right of the tile and are slightly cropped to match the original MiGym tile designs. 
2. Note: If you want to keep the default icons, but require a color change to all of your icons, MiGym support can help you with that once you chosen a hexidecimal color value. 

1. Background Color - set a background color for that specific tile. The color picker includes a transparency slider to set the opacity of the background color.

1. Background Image - set an image as the background of the tile. This will be resized without affecting the aspect ratio, in order to cover the entire background of the tile. Click the trash icon to remove a custom background image.

1. Border - by default the tiles have no borders, but you can click the checkbox to enable them. Set a border color, width, or even set up rounded corners so that your tiles look more like app icons.

Default

Each tile has a default set of labels and captions. Most tiles are simple links to a feature or a social media site, such as the Facebook tile. These often have a top caption and the default icon is shrunk by 10% to accommodate the caption. Some tiles have no captions.

Dynamic Content Tiles - "{dynamic_text}"

The Announcements, Schedule, Schedule +, Favorites, and Notifications tiles all have dynamic captions (shown as "{dynamic_text}" in the preview) where the content changes depending on context and usage of the app. 

For example, the My Schedule + tile will default to show the top caption as "Schedule" and will navigate to the currently selected location's Schedule listings; but once the user has setup their Favorites settings, the top caption will say "Favorites" and take the user to their Favorites schedule listings instead. 

The dynamic changes for each of these dynamic tiles are described in the tile descriptions above, as well as in the Admin portal itself. 

Note that dynamic content is only supported by tiles larger than 2 columns wide.

Customizing Captions

The default captions, like the default icons, can be customized to better fit your brand and experience. Click on a tile, then review the Tile Caption properties on the right:

Tile Captions can be edited in most of the usual ways you would edit text  alignment, color, size, text weight.

In addition, you can add a translucent background color to the caption in order to improve legibility. This is especially useful when you want to add a background image to the tile that doesn't have good contrast with your tile caption colors. For example:

The MiGym platform can accommodate totally custom tile designs as well. Utilizing the following guidelines, you can work with a designer to generate a custom design, export the correct assets, and manage the tile design and content independently.

Tile Sizes and Setup

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

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

Tile background images will be centered, 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.

Captions

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. 

If you have any questions, please contact us at support@migym.com