The most important benefits from your app are a) member experience continuity, and b) contextualized communication. To maximize your ability to build on these benefits, MiGym has introduced fully configurable Home Screens. You can now customize the graphics and appearance of your app's home screen in order to achieve a unique customer touch point that is entirely on-brand and in sync with your club's member experience! Colors, backgrounds, icons, tile sizes, captions and dynamic text... it's all configurable from the new Home Screen tab in your MiGym Admin portal.
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.
- Log into the Admin Portal at https://admin.migym.com with your MiGym Admin account.
- Go to the Home Screen tab
- 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
- Import tiles to "Draft"
- 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.
Icons and Backgrounds
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:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
Design Your Tiles From Scratch
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 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.
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 firstname.lastname@example.org