Activate Home Page Guidelines

this document provides guidance for designing and configuring home pages in activate overview activate includes a set of prebuilt home page examples that can be used as a starting point for custom designs these are available on the default home page (typically at the bottom for easy selection) and should be removed before production example configurations can be found in studio / administrator / resources / configuration / web look for parameters such as example homepage1 image example homepage1 quicklink these provide reference implementations for different layout approaches home page design principles tiles use tiles for primary navigation to top level functionality aim for a maximum of around 20 tiles for usability typical layout 5 rows × 4 tiles (medium screen) order tiles based on frequency of use prioritise commonly accessed items such as services distribution lists mailboxes less frequently used items (e g users, roles) should appear later admin access admin focused tiles can be placed at the beginning if heavily used grouped into a dedicated landing page landing pages are recommended to reduce clutter on the main home page favourites users can personalise their experience using favourites a favourites section (top 5 or configurable number) appears on all pages this allows admins and power users to add dashboards pin frequent tasks as a result, not all admin functionality needs to be exposed via standard tiles standard home page the standard home page provides tile based navigation to all core areas a search bar for quick access a favourites section beneath the search bar optional add an admin tile linking to a dedicated admin landing page if required quick links usage guidelines use the sidebar sparingly prefer tiles for primary navigation reserve quick links for secondary actions system specific shortcuts less frequently used items mobile considerations quick links should collapse or hide on smaller screens be accessible via alternative navigation the example implementation includes sidebar (desktop) ribbon style layout (mobile) drawer integration quick links can also be added to the user drawer resources / users / web user drawer this ensures access across all devices and contexts layout notes left aligned tiles are preferred over centred layouts favourites can optionally be displayed within the quick links area tile variations small tiles set size = 'small' to reduce tile size no custom css required optional add descriptions to tiles removing descriptions results in more compact tiles use with caution smaller tiles can make the interface feel crowded search bar placement the search bar can be positioned below the header (standard) embedded within the top info bar (alternative layout) background images best practices ensure sufficient contrast between text and image dark image + light text, or light image + dark text layout configuration set page size to full removes default padding requires manual spacing for tiles and components use object fit cover centred alignment future improvement a backgroundimage panel is being introduced this will remove the need for custom css in most cases custom styling avoid using custom less wherever possible only use it for edge cases scenarios not supported by built in components do not use it to override standard component behaviour summary use tiles for primary navigation keep layouts simple and prioritised by usage leverage landing pages and favourites to reduce clutter design with mobile behaviour in mind avoid unnecessary customisation and css overrides