Visual Design and Data Presentation
Visual design in an ADITO application combines centrally managed themes with the customizer's choice of standard components, data fields, order, and layout. The purpose is not decoration. A clear visual hierarchy helps users distinguish the main information from supporting detail and recognise what they can do next.
Work with the central theme system
Themes define colors for visual elements throughout the ADITO client. Theme creation and modification are handled centrally by the ADITO UX team. An available theme provides a consistent basis; projects needing a different color system can request a central change.
Color alone cannot reliably communicate a status, priority, or action. A label, icon, or other visible distinction makes the meaning available to more users. For readable custom text, normal-size text needs a contrast ratio of at least 4.5:1 against its background.
See Themes and Theme Design Guidelines.
This guideline does not define a project-specific color palette for tables, states, or actions. The colors and configuration options documented for the selected component or provided by the active theme offer the safe choices.
Display type before field configuration
Selecting a viewtemplate based on the information users need to work with, rather than only on the available data source, helps keep the result focused:
| User need | Appropriate starting point | Reference |
|---|---|---|
| Show one selected record. | A focused single-record viewtemplate is a useful starting point. | Card, Generic, or Picture |
| Edit fields of one selected record. | Consider a viewtemplate with documented edit behavior. | Generic |
| Browse or compare multiple records. | A multi-record viewtemplate can support this task. | Table, CardTable, Tiles, or Tree and TreeTable |
| Edit multiple records. | Consider a viewtemplate with documented multi-record edit behavior. | GenericMultiple or MultiEditTable |
| Show aggregate or time-based information. | A chart, timeline, Gantt, or other specialised viewtemplate may help. | viewtemplates overview |
| Provide button actions or action entries. | An action-oriented viewtemplate is a useful fit. | actions or ActionList |
The support matrix and individual reference help confirm the fit of a selected component.
Tables for clear comparison
Tables are easier to compare when they focus on the fields users need to identify, compare, or act on records. An order that puts identifying information before comparison values often supports the task. Table properties, cell colors, and status representations vary between table-type viewtemplates.
Charts for clear comparison
A chart is useful when it makes a comparison, trend, or relationship easier to understand than the primary record or table view. When users need exact values or record-level work, an accompanying view provides that detail. Meaningful labels for the chart and its important visual elements make it easier to interpret.
Charts are easier to read when their title, axes, legend, units, and important data points explain what is being compared. Equivalent values benefit from the same formats and visual cues across charts and other views. Color alone is not enough to distinguish a series, status, or value.