Tips for Home Page Design

Grandstand gives you the ability to turn your custom design into a beautiful and useful app. Using your own brand assets, style guides, and other elements Grandstand allows you to start with a blank slate to create something amazing. Use the following tips to learn the best way to prepare your design to be successful on the Grandstand platform.

• Create the home page of the app in the design program of your choice at 1180x2556. You can use Photoshop, Illustrator, Figma, or other design software that allows you to create a flat design that you can later cut into individual icons or graphical tiles.
• Apps can either use a Graphical Layout which is able to scroll infinitely or an Icon Layout which will always size for the screen.
• Graphical Layouts will:
• Scroll infinitely vertically. If the content does not fill the screen then the rest of the screen will be filled with background image or background color.
• Put menu titles in fonts, font sizes and font colors of your choice over the top of graphics
• Have a full-size hero image at the top that can scroll with up to 5 different full-size images. This is optional and requires a request to your Grandstand representative to turn on this feature which is included in all packages.
• Display graphics in an invisible grid format with up to 3 columns and unlimited rows. You can also utilize a single column or a double column setup.
• Allow you to have a background behind the graphical images if you want to upload transparent images. This will give apps that have content that goes beyond the visible screen the sensation of having foreground elements move while the background remains locked and stationary.
• Allow you to hide or show the text title for each menu item graphic. If shown you have a choice for what font, font size, font color, and alignment will be used although this is a single font, font size, and font color for all of the menu items on one page. Long text will be sized down fit the space allotted for the text.
• Icon Layouts will:
• Resize for the phone to always fit on one screen
• Allow you to have more icons than will fit on one screen by scrolling horizontally to a second (or more) screens with a new set of icons
• Allow you to have up to 12 icons (4 rows of 3 columns). The best use case is 9 icons (3 rows of 3 columns) to fit the best on most screens
• Have text that will display below the icon in the font, font size, and font color of your choice although this is a single font, font size, and font color for all of the menu items on one page.
• Include a background that is anchored to the top, to the bottom, or stretched to fit the entire screen. If choosing a background that is anchored, the rest of the screen will be filled with a solid background color.
• Feature a logo at the top, ideally uploaded in a transparent .png format.
• Allow you to have a rotating full-width ad at the bottom of the page at whatever height makes sense for your ads.

Turning Design Into Buttons/Graphics

• Once you have a final design you will need to cut up the layout into various pieces depending on the type of layout you are using.
• Graphical Layout Tips:
• Each graphic in a row must be the exact same width and height. If you have one graphic that is 301x300 and one that is 300x300 it will leave a small gap that may be noticeable.
• You are not allowed to mix the number of columns to use. If you use three-columns in one area then all graphics must be loaded in a three-column setup (which can mean that one graphic is just cut into three pieces and all three graphics link to the same place). Whatever the initial choice is for columns must be maintained throughout the design.
• Recommended width for each graphic in a one-column layout is 900 pixels wide. Recommended width for each graphic in a two-column layout is 450 pixels wide. Recommended width for each graphic in a three-column layout is 300 pixels wide.
• Placeholder graphics are always allowed and suggested in places where you need buffer elements that don't link to anything but aid in the overall design.
• Icon Layout Tips:
• Icons can include text with them but it is recommended and easier to maintain long term if you let the app auto-create the text from your menu titles. If you choose to include text, please make sure you hide the titles.
• Icons should be saved as transparent .png images at a recommended size of 400x400. The icon does not have to fill all the available space in the 400x400 image.