---
title: Activate Home Page Guidelines
slug: activate-home-page-guidelines
docTags: 
createdAt: 2025-06-11T20:26:19.223Z
---

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:

:::BlockQuote
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:

:::BlockQuote
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