DesignOps - Best practices for designers

Official Content
This documentation is valid for:

This article intends to be a guideline of best practices when designing apps for the GeneXus ecosystem. Developers will appreciate this!


Best practices

Name layers

Avoid default layer naming. Instead, describe what it is representing.

Do Naming - Do
Don't Naming - Dont

Also, avoid extremely large names or names with non-alphanumeric characters (always start with alphabetical characters).

Related elements

Group everything that should be together. A group will represent a table container for the controls you have defined.

Do Groupping - Do
Don't Groupping - Dont

Static vs. dynamic content

If the content you place in your design does not change, use Static convention.

Do Static - Do
Don't Static - Dont

Reuse styles

Avoid defining the appearance of each element in your design. Instead, try to define Layers or Text Styles for reusing them on multiple elements. Also, define Color Variables when you use the same color multiple times.

Do Styles - Do
Don't Styles - Dont

Reuse components

Avoid making multiple copies of a group of elements in different artboards. Instead, conceptualize your groups and define symbols for them which should be overridden when necessary.

Do Symbol - Do
Where the symbol defined by Button Confirm is as follows:
Symbol - Def
Don't Symbol - Dont

User input and labels

Labels for user input should be defined by the Static convention. If you have a complex control (e.g. radio-button), the label must be defined outside the group that contains the control drawing itself.

Do Labels-Do_png
Don't Labels-Dont_png

Define backgrounds

A background layer must be defined by using colored Rectangles (Shape) or Images (exportable in case you want multiple resolutions). In both cases, the background item name must be suffixed with a "Background" substring.

Do Symbol - Def
Don't Symbol - Def Background Dont

Text layer with multiple formats

Every formatted text-layer must have a single format (e.g. a single color) because GeneXus will set a single theme-class for it. In case you start formatting substring, a single format will be taken into account. You should consider splitting a text-layer in case you require different formats.

Do TextFormatting-Do_png
Don't TextFormatting-Dont_png

Font formats

GeneXus support these font file formats: .ttf, .otf, .eot, .woff. Avoid using other formats in order to achieve a good-looking app at runtime.
In case your design has .ttc or .otc font files, refer to DesignOps - FAQ and Troubleshooting.


These sections apply as of GeneXus 17.


Generators .NET, .NET Core, Java, Android, Apple , Angular

See also