UI Design

How Can I Design Rich User Interfaces?

User interfaces are built via the combination of a drag-and-drop interface with a WYSIWYG page editor. Our Mendix Studio Pro environment can be used with the Atlas UI framework, which is a fully responsive, open-source, and extensible design language that facilitates a design-thinking approach to building user interfaces.

Common page patterns such as searchable lists, data views, dashboards, and wizards are made available as starter templates that help accelerate development and ensure a consistent, standard user interface across multiple devices.

What UI Elements Does Mendix Provide Out of the Box?

Mendix provides a growing list of out-of-the-box widgets. This is a selection of the most common ones:

  • Menu widgets – allows the end-user to navigate through the application (for example, menu bar, navigation tree)
  • Data widgets – central to building forms in Mendix so that the end-user can view and edit data in the application (for example, data view, data grid, also common input widgets like text box and radio button)
  • Layout widgets – form the backbone of the interface and are typically used on layouts (for example, layout container, title)
  • Common widgets – commonly found on any page, layout, and snippet (for example, label, image)
  • Container widgets – can contain other widgets (for example, table,
    group box)
  • Input widgets – make it possible to show and edit the values of attributes and associations (for example, text box, date picker)
  • File widgets – allow you to work with files, including images stored in files
  • Button widgets – these buttons trigger actions (for example, save button, close page button, microflow button)
  • Visualization widgets – more graphical widgets (for example, chart, map)

New widgets are built all the time by both the core Mendix development team and our community of developers using the standard available tooling. You can find available widgets in the Mendix Marketplace and download them to use in your application.

How Can I Customize the Look & Feel of My Apps?

The Mendix front-end uses the Atlas UI framework to render responsive pages or native mobile pages. The framework is based on a default theme that be fully customized. With the Theme Customizer tool, you can easily upload a logo that is used to determine your brand’s colors. The various colors, fonts, and size settings can be quickly configured and previewed.

Next to this, Mendix uses Sass to define the styling. The platform contains a configuration file with many variables that can be used to configure and tweak the theme. The configuration is set up so that it can be easily changed and extended by providing custom Sass files. It is also possible to directly extend the styling with custom CSS. The styling can also be shared, as discussed in the next section about creating consistent user experiences.

For more information, see the collection of Atlas UI how-to’s in the Mendix Documentation.

For native mobile apps, the styling is based on JavaScript. For more information, see Native Styling.

How Does Mendix Support Reuse of Design Patterns & Elements?

Atlas UI promotes the reuse of elements and layouts by facilitating a layered and componentized approach to application design. What is more, Atlas UI enables your UX designers to extend out-of-the-box components, assemble their own building blocks, create custom widgets, and override default design properties.

New and enhanced design elements are automatically propagated throughout all the applications in which each element is used.

The three main types of reuse are described below.