Graphics style guide
What information is included in this section?
This section defines recommendations and best practices to follow when creating Metasys UI graphics in the Metasys UI.
- provides a mechanism to ensure that graphics are consistent within a site and with other Johnson Controls® graphics
- defines usage recommendations and best practices for creating graphics
- strives to reduce the amount of time required to build graphics by eliminating the need to experiment with different fonts, colors, and styles
- provides a professional, neat, and distinctive design for graphics
- provides a standard navigation model that is easy to follow
What are the recommendations for the maximum number of items or elements within a Metasys UI graphic?
To ensure optimal performance of the graphics created in the Metasys UI, follow the recommendations in the table below.
| Item or element | Recommendations | Notes |
|---|---|---|
| Number of elements (shapes, symbols, or images) | 0–125 | An element is any shape, symbol, or image that is added to the graphic. |
| Number of bound Metasys points | 0–200 | We recommend that you have no more than 200 bound Metasys points on a single graphic unless you are using a Status Summary element. |
| Number of status summaries | 0–6 | This limit allows for 50 bound Metasys points per Status Summary with a recommended maximum of six Status Summaries on a graphic. The limit results in 300 points whose statuses are summarized using only five elements (not 300 elements). This Status Summary exception contrasts the bound Metasys point recommendation of 200 maximum, because not all bound values appear in the graphic. |
| Number of images | 0–5 | An image is any image
file that is added to the Graphic Canvas. Note: We recommend that
images have a maximum size of 1,600 pixels (height) by 1,200
pixels (width) and 1 MB in file size. Exceeding the recommended
dimension size may cause significant delays in load times.
|
| Number of animations | 0–50 | This number applies to animations that are actively running at the same time (for example, a supply fan and a return fan). |
What are the recommendations for graphic size, margins and white space, and effective layout?
The following are recommendations when creating graphics from blank templates or custom templates, but are also applicable to creating graphics from existing system templates.
Size
The Graphic Canvas is 1920 (height) by 1080 (width) pixels. The Graphics Editor supports a minimum resolution of 1600 pixels by 900 pixels. The size of the graphic is important to how it appears in the Metasys UI. We recommend enforcing a margin and using white space to ensure graphics appear appropriately, including allowing space for data values to appear without being cut off by bounding edges of the Graphic Canvas.
Margins and White Space
Some of the most successful graphics, both visually and functionally, are the least complex. Do not allow the graphic to touch the bounding edges of the margin. If the margins are too large, you need to take the extra step of zooming in when you view the graphic. Use more white space around an element you want to emphasize. Otherwise, position the elements close together so you can recognize the element that are associated with each other. If a symbol or other element displaying text is too close to the bounding edge of the graphic, portions of the symbol or element, including status values may be cut off when viewing the graphic in the Graphics widget.
Effective Layout
The most effective method of organizing elements is to use a design grid to set apart logically related sets of components. A grid divides the available space into areas that can help you to arrange and align components. Grids make it easy for users to seethe logical sequence of tasks and to understand the relationships between sets of components. The Graphics Editor does not have a grid to apply to the Graphic Canvas; however, you can visually section the graphic into a 2-column or 3-column layout.
You can use the number and width of components and their associated labels to determine the number of columns in a grid. At the beginning of the design process, vertical divisions are more difficult to set because they depend on the depth of components and sets of components, which are not yet placed.
Developing a grid is an ongoing process. If you know how much space is available, you can start working with the components to determine the most effective use of space. A grid can also help you to determine how much space to allocate to a given set of components. When you can define a grid that works for a number of layouts, your graphics have a more consistent appearance.