Design

• Concept
• 1 minute

Take advantage of Dynatrace app UI and design guidelines to learn how to create exceptional apps that look great and provide an excellent user experience. These guidelines will help you craft your app's user interface quickly and efficiently, allowing you to focus on delivering the best possible product to your users.

Foundations

App icons

Guidelines and patterns to efficiently create icons for Dynatrace Apps

App naming

Guidelines and patterns to efficiently name Dynatrace Apps

App structure

Guidelines for a consistent base structure for Dynatrace Apps

Support dark and light themes

Guide to support dark and light themes in your Dynatrace App

Data visualization

Information about the data formats and data types supported in the Strato design system

Design tokens in use

Guidelines for the use and benefits of design tokens when creating Dynatrace Apps

Filtering

An overview of Strato design system filter components, filter patterns, and best practices to create effective filtering experiences for datasets of all sizes and complexities.

Forms and validation

Guidelines to create forms in Dynatrace Apps

Functional icons

Guidelines for icon usage in Dynatrace Apps

Guided interaction

Introduction to guided interaction, which helps you onboard users and provide a better user experience with in-product help

Interaction states

Information about exclusive and additive interaction states

Layout

Guidelines to establish consistent and user-friendly layouts for Dynatrace Apps

Loading and saving

Guidelines for displaying a system's status such as loading and saving

Navigation

Guidelines for establishing consistent navigation patterns in Dynatrace Apps

Status and health

Guidelines to visually represent a status or condition in Dynatrace Apps

Strato design system

About Strato

Introduction to the Strato design system

Components

The Strato design system offers a collection of reusable React components. Each

Components preview

The Strato design system offers a collection of reusable React components. Each

Design tokens

Tokens reference tables can be used to look up Strato's default values of our

Geo

The Strato Geo Package provides a main component that renders a map with various

Icons

The Strato Design System is also providing an Icon library, which can be used