Activate Home Page Guidelines
13 min
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