Annotated Drawings

An annotated drawing transfers detailed attributes of each element on the UI to developers so that they can implement UX design via coding. The attributes of UI elements include the color, size, font, rounded corner, spacing, shadow, blur, scaling, components used, adaptive layout, and responsive layout. Generally, annotated drawings are in JPG or PNG format.

In excellent deliverables, annotations for different types of attributes have the same font size and different colors. They do not overlap each other and are visually separated from the effect drawings. Generally, the number of annotated drawings is the same as that of effect drawings for key UIs. In the case of a complex UI, multiple annotated drawings can be provided for one effect drawing to clearly describe the specifications.

With the evolution of design and development tools, some tools in the industry can automatically identify UI element attributes, create annotations, and export effect drawings (generally in HTML format) that can dynamically display annotations. You can use these tools to output annotated drawings during the design of OpenHarmony applications. However, you must confirm mandatory layered parameters and create annotations for them.

In addition to parameters that strongly depend on service design, such as size and spacing, you are advised to use layered parameters to implement other attributes such as color, font, rounded corner, shadow, and blur.

Annotated drawing example