Skip navigation

How to Create Your Company-Specific Enterprise Design Language using Atlas UI

/ December 14, 2017

Atlas UI Blog Background

As you may have seen in our release blog, Atlas UI allows individuals, including those with little or no UI design skills, to quickly create beautiful, rich user interfaces. Atlas UI and the new Web Modeler embody capabilities and principles that allow you and your organization to create great, highly usable apps based on UI and UX best practices.

By best practices, we mean not only the professionally designed UI resources that come out of the box with Atlas UI but your organization’s own UI best practices. To that end, Atlas UI enables your UX team to define a company-specific enterprise design language for your Mendix teams to leverage within their apps, promoting consistency and reuse across your app portfolio.

In this post, I will show you how to create and distribute your enterprise design language based on Atlas UI.

Atlas UI Diagram

Out of the box, Mendix Atlas provides a great set of resources to start building beautiful apps:

  1. Atlas-based starter app
  2. Atlas UI theme & SASS framework
  3. Navigation layouts
  4. Page templates
  5. Building blocks
  6. Design properties of widgets

This is a very powerful toolkit with which to build your first project. You can fully focus on the added value of your app without the need for additional UX knowledge. This is important because the time to value matters.

But what about consistency, reuse of UI design patterns and visual branding when you are scaling to enable multiple, autonomous teams to build a portfolio of Mendix apps? In the Structure phase of digital transformation, these items become very important.

This is where Atlas UI kicks in. Atlas UI allows you to fully customize or replace the Atlas UI resource elements with your own company-specific set. In addition, you can make it available to all your Mendix developers via the Mendix private App Store.

How to create page templates and building blocks?

Step 1: Identification of reusable resources during your first project.

During the development of apps, teams will build pages and UI patterns that can be shared across multiple future apps. These UI elements reflect best practices for how to design apps according to company design patterns and guidelines.

These patterns can be extracted from the project, or designed from scratch and delivered as page templates or building blocks. Creating a page template or building block is easy in the Mendix Desktop Modeler. Just select the page in the Project Explorer and right click the option ‘Add as page template’. The same can be applied to elements in pages. Select a group of widgets and right click the option ‘Add as Building block’.

Add page as template

In both cases, a new Document is created in the project itself. Change the properties of the document to your liking and you’re good to go. For instance, you can add a display image for the Create Page dialog or Building block toolbox.

All custom page templates and building blocks will be directly available for use in your project and will be shown in the ‘Local’ category in the Create Page Dialog and toolbox. This is great for initial use and sharing within a particular project.

Because all the UI Resources (e.g. page templates and building blocks) are available in both the Web Modeler and Desktop Modeler, they’re readily accessible to all team members.

We believe that agility is a key principle that helps our customers to quickly design and develop innovative app ideas. The agility principle can also be applied to the development of your own Enterprise Design Language.

When developing your first app or two, you’ll be able to use the default Atlas UI resources, without needing to build custom resources. Along the way, you’ll create some great pages or reusable page patterns that you would like to distill into page templates or building blocks, so all team members can reuse them in the project itself.

Step 2: Collect, tune and release your company specific resources.

The next step is the creation of a company-specific set of resources as part of the Enterprise Design Language. This is where the UI Resources module becomes relevant. This is the green App Store module in every project that contains all the Atlas UI resources.

File Structure

The team responsible for the creation and maintenance of the Enterprise Design Language should create a new Mendix app based on Atlas UI. This can be done by downloading the Atlas UI reference app from the Mendix App Store. From there, the team can add their customizations to the UI Resources module: remove items, add company-specific ones and test them.

When the UI Resources module contains the right set of resources and the theme has been tuned, you can create a first full version of the Mendix Atlas UI Resources package and ship it in your private App Store (in the category ‘UI Resources’).  This package can be distributed to all your company projects.

Step 3: Ship the resources as a company-specific starter app

Having a consistent set of company-specific UI Resources is only useful when it is also used for the creation of new apps. To make this happen, you can make your own Starter Apps available in the Create New App dialog.

Start the development of the new Starter app by downloading the Mendix Atlas starter app from the Mendix App Store. You can replace the Mendix Atlas version of the UI Resources package with the company-specific UI Resource package that has been uploaded to the private Mendix App Store.

You can preconfigure the starter app with generic modules and configurations like single sign-on (SSO). This will give the development team a great kick-start when starting new app development.UI Resources

By uploading this company-specific starter app to your private App Store, you’ll make it available to all your employees only—while ensuring it’s fully integrated into the normal Create New App flow.

Create a New Application Screen

Development teams can now use this Starter App as the starting point for all new apps, guaranteeing that they have the same unified branding and styling while leveraging your organization’s design patterns and best practices.

For companies that are building both internal and external-facing apps, and require different branding for each category, multiple Starter Apps for different audiences can be provided. From now on, every new project will contain your company design and will be able to use the company standard page templates and building blocks.

Step 4: Next iterations of your Company branded design language

An Enterprise Design Language is, of course, a living definition, organically growing and evolving over time. There will be updates to the enterprise design language, including smaller updates with additional resources and bigger updates with a brand-new theme. That’s why we made it possible to group all these UI Resources as a distinct module that can be placed in the Mendix private App Store. All your projects can update to the latest version of the UI Resources package when required.

Conclusion

From leveraging out-of-the-box resources for your first app to defining a full enterprise design language that adheres to your company’s design guidelines and UI best practices, Atlas UI empowers developers to create rich interfaces without the need for UI design skills, while promoting consistency and reuse across a portfolio of apps. All of this fully is integrated into the Mendix Web Modeler and Desktop Modeler.

Next steps

 

Deliver Engaging Highly Usable Apps Leveraging Atlas UI's Powerful Features