Enact Design Guidelines

Overview to successful framework design

The Enact team works with UI designs on the framework level — designs that focus on components as building blocks and on how components integrate with each other. The framework provides consistency across different apps. We continually strive to improve Enact. This post is an overview of our experience working with UI designs, what we have learned, and what we hope to see from designers.

Component Design before App Design

Component design informs app design.

We emphasize component design before app design, because we notice designs that jump into app design often miss consistency and completeness. As shown above, reusable components are used to inform app design.

Interoperability

The breakdown of how components can be used differently in more complex components.

Another part to component design that is often overlooked is interoperability, where components are designed so that they can be reused in different ways. In the example above, Button and Icon appear in both IncrementSlider and Dropdown, and they used differently in both cases as part of more complex components.

Configurability

Illustration of how certain properties can be fixed and others can be configurable throughout different themes.

The properties in the illustration above are just examples of ones designers can decide to keep fixed or allow to be configurable across different themes. Fixed properties allow for consistencies so users can understand right away what kind of component are presented to them; while configurable properties allow for a unique feel and allow designs to shine.

Theming

Since there aren’t unlimited time and resources to fully flesh out every detail and every edge case, successful designs have consistency that helps developers fill in the gaps across different themes. In the following sections we break down a bit more what that means.

Completeness and Consistency

In this example, there are eight possible permutations of Button in Enact Moonstone, which also has two focus states, resulting in a total of 16 different Button designs needed to be defined. Missing designs are inevitable but even if there are missing designs, the framework still provides components with those permutations and states. Successful designs have systems and rules to follow which will make it easier for the framework implement even if there are missing designs.

Consistency sets the rules for things like space, margins, sizes, and colors.

Successful designs have consistent rules and systems.

Some things to consider for component designs are edge cases and restricted options.

This is not a comprehensive design guide by any means, but we hope this guide helps you understand the different parts of Enact and bridging the gap between UI framework and UI design.