If you would like to upgrade to a newer long-term support version of Studio Pro, see Moving from Mendix Studio Pro 8 to 9.

Atlas UI

Last modified: November 11, 2024

Introduction

Mendix Atlas UI is the design framework that makes building elegant user experiences a rapid process. It was built upon three design principles: simplicity, harmony, and flexibility. Simplicity helps you focus on what is important. We’ve simplified the design process with readymade page templates, building blocks, and widgets that can be arranged and customized to suit your app. Our design elements are harmonious, bringing a unified aesthetic to your app landscape. Atlas UI is built to be fully responsive, ensuring quality across scale without losing functionality.

Visit the Atlas UI site for detailed previews and descriptions of all Atlas UI elements, or see the Atlas UI Framework GitHub repository. If you wish to customize your Mendix apps’ styling, see How to Customize Your Styling Using Calypso.

Design Principles

Atlas UI has a philosophy based on the core principles described below. These principles guide all our design decisions at Mendix, and we encourage every Mendix user to adopt them when building their own apps.

Simplicity

Freedom from complexity: we strive for simplicity to help you focus on what is important.

Harmony

Create familiarity and consistency throughout your apps landscape, regardless of the device you use.

Flexibility

Design apps that look good and scale in all situations without losing an intuitive and consistent experience.

Design Elements

Our UI library is fully integrated. After choosing a navigation layout, you can find page templates, building blocks, and widgets directly in your Toolbox. These UI elements form the foundation of your app.

1 Navigation Layouts

When building a Mendix app, the first thing you do is choose a navigation layout. These layouts are the frame within which your dynamic pages are housed, and they provide consistent structure throughout your app.

2 Page Templates

Page templates are predesigned collections of building blocks that can be used as-is, or you can enhance them with custom building blocks and widgets.

3 Building Blocks

Building blocks are single-purpose user interface elements and are comprised of multiple widgets. Multiple building blocks are usually used together on one page.

4 Widgets

Widgets are small user interface elements (alerts, buttons, charts, etc.) used to enhance existing building blocks.

5 Design Properties

You can further customize widgets by changing their design properties. Colors, text, and many other variables can be altered to make the widget what you need it to be.

Read More