Architecture, distribution and integration
UI wireframe
A settings screen as declared regions and controls — layout structure without pixel design.
wireframe.ui@1New DDN source
Why use it?
Screen reviews about structure ("what is on this screen, where does this action go") should not need a design tool.
When it helps
Early UI specification, acceptance-criteria discussions, screen-inventory documentation.
How to read it
- Nested regions are the layout hierarchy; labelled controls are the interactive elements.
- Read tab order off the declaration order, not the visual order.
What you need
- The screen regions
- The controls and their labels
- The navigation actions
Things to check
- Do not specify pixels — the wireframe declares structure, the design system owns geometry.
- A control with no declared action is a dead end.
Scope of this diagram
Declared structure rendered schematically; no accessibility audit or visual-design conformance is claimed.
Work with the converted example
- Open the viewer and select
settings. Inspect the rendered view and its source. - Open the designer. Keep the selected profile and inspect its legal palette and property controls.
- Change one displayed title or an appropriate data value. Apply the edit and check the resulting diagram.
- Run the verifier and review its diagnostics before moving complete content into review.
- Download your edited DDN source to retain the change.
The example uses the indentation-based ddn-next-1 dialect. The language guide explains reusable definitions, dotted data rows and explicit property blocks.