Official Content

This article intends to be a guideline of best practices when designing apps for the GeneXus ecosystem. Following these design practices from the beginning increases the chance of achieving a good-looking result on the first try and promotes a smooth collaboration between designers and developers.

Content

Best practices

Semantic naming

Avoid default layer naming. Instead, describe what it is representing and collaborate with the developer to establish a naming convention (e.g. for naming attributes that come from the database). Additionally, avoid using long names or names containing non-alphanumeric characters. Always begin with alphabetical characters and remove any leading or trailing empty spaces.

DON'T DO
Frame 1
├─ Text 1
└─ Rectangle 1
Home Panel
├─ Title Text
└─ Panel Background

Semantic grouping

Group everything that should be together. By default, a group or frame layer will represent a canvas or a table control, depending on whether there is overlapping or not. However, you can define a different control for a group by specifying a Control convention.

DON'T DO
User Panel
├─ Title Text
├─ User Name Label
├─ User Name Value
├─ Confirm Caption
├─ Confirm Background
└─ Panel Background
User Panel
├─ Title Text
├─ User Name Box
│  ├─ User Name Label
│  └─ User Name Value
├─ Button Confirm (*)
│  ├─ Confirm Caption
│  └─ Confirm Background
└─ Panel Background
(*) Defined by convention

Static content

If you place a text or a bitmap layer whose content does not change (e.g. app title, banners, icons), use the Static convention.

DON'T DO
Login Panel
├─ Title Text
├─ User Name Box
│  ├─ User Name Label
│  └─ User Name Value
├─ Button Confirm
│  ├─ Confirm Caption
│  └─ Confirm Background
└─ Panel Background
Login Panel
├─ Static Title Text
├─ User Name Box
│  ├─ Static User Name Label
│  └─ User Name Value
├─ Button Confirm
│  ├─ Confirm Caption
│  └─ Confirm Background
└─ Panel Background

Input content

If you place a text layer with the purpose of being editable by the end user, use the Input convention.

DON'T DO
Login Panel
├─ Static Title Text
├─ User Name Box
│  ├─ User Name Label
│  └─ User Name Value
├─ Button Confirm
│  ├─ Confirm Caption
│  └─ Confirm Background
└─ Panel Background
Login Panel
├─ Static Title Text
├─ User Name Box
│  ├─ Static User Name Label
│  └─ Input User Name Value
├─ Button Confirm
│  ├─ Confirm Caption
│  └─ Confirm Background
└─ Panel Background

Reuse components

Avoid making multiple copies of a group of elements in different Artboards / Top-Level Frames. Instead, conceptualize your groups and define Symbols / Components for them which should be overridden when necessary.

DON'T DO
Login Panel
├─ Static Title Text
├─ User Name Box
│  ├─ Static User Name Label
│  └─ Input User Name Value
├─ User Password Box
│  ├─ Static Password Label
│  └─ Input Password Value
├─ Button Confirm
│  ├─ Confirm Caption
│  └─ Confirm Background
└─ Panel Background
Login panel
├─ Static Title Text
├◇ User Name Field        {1}
├◇ Password Field         {1}
├◇ Button Confirm         {2}
└─ Panel Background
Field Symbol/Component  {1}
├─ Label Text
└─ Input Field

❖ Button Symbol/Component {2}
├─ Caption Text
└─ Background Shape

Reuse styles

Avoid defining the appearance of each element in your design. Instead, try to define Styles and Colors for reusing them on multiple elements.

DON'T DO
Home Panel
├─ Static Title Text
│  • font: Roboto
│  • size: 18
│  • color: #D6DCD6
│
└─ Panel Background
   • color: #24695C

Home Panel
├─ Static Title Text
│  • text-style: H1
│
└─ Panel Background
   • color: Primary
○ Text-Styles
├─ H1
│  • font: Roboto
│  • size: 18
│  • color: Neutral
└─ ...

○ Colors
├─ Neutral: #D6DCD6
├─ Primary: #24695C
└─ ...

Export shapes

Ensure that you export as an image any shapes that GeneXus cannot handle (e.g., stars, polygons, vectors, lines, etc.).

These shapes are often used as individual elements within an icon. In such cases, it is sufficient to export the entire group for the icon instead of exporting each element separately. Additionally, make sure to include margins between the group and the icon itself (usually that group will be a square box).

DON'T DO
User Panel
├─ User Name
├─ User Icon
│  │ • width: 20
│  │ • height: 25
│  │
│  ├─ Oval 1
│  └─ Path 1
└─ Panel Background
User Panel
├─ User Name
├─ User Icon
│  │ • width: 25
│  │ • height: 25
│  │ • export: 
│  │   - png @1x
│  │   - png @2x
│  │   - png @3x
│  │
│  ├─ Oval 1
│  └─ Path 1
└─ Panel Background

Notes:

1) Since GeneXus cannot interpret Line shapes, it is recommended to use Rectangle shapes with a height of 1 instead in order to avoid exporting them as images.

Optimize images

Ensure you optimize the size and resolution of the images before incorporating them into the design.

Unoptimized images can impact the performance of the application. Additionally, fill images (those added by the "Choose Image" option) should not be marked for export as images as they are images themselves. Doing so would result in duplicate images in the Knowledge Base.

DON'T DO
Home Panel
├─ Header Row
│  ├─ Header Row Title
│  └─ Header Row Background
│     • fill: image.png 
│             (2000x3500)
│     • export:
│       - png @1x
│       - png @2x
│       - png @3x
│
├─ ...
└─ Panel Background
Home Panel
├─ Header Row
│ ├─ Header Row Title
│ └─ Header Row Background
│    • fill: image.png(500x875)
│
├─ ...
└─ Panel Background

Avoid overlaps

Avoid layer overlapping layers when you can. When designing, imagine your design layers arranged as if they were placed in the cells of a table. When overlap cannot be avoided, consider the best way to group the layers.

For instance, if you have a floating button, group the scrollable area first and place the button outside of that group. Similarly, when dealing with two or more elements that unavoidably overlap, it is recommended to group them together as a single unit

DON'T DO
Home Panel
├◇ Header Row
│  • x: 0
│  • y: 0
│  • width: 1440
│  • height: 695 <╌╌╌┐
│                    ┆
├◇ Button Chat       ┆(*)
│  • x: 1280         ┆
│  • y: 660 ╌╌╌╌╌╌┐  ┆
│  • width: 120   ├╌╌┘
│  • height: 120 ╌┘
│
├─ ...
└─ Panel Background
❖ Header Row Symbol/Component
├─ Header Row Title
└─ Header Row Background

❖ Button Symbol/Component
├─ Chat Icon
└─ Chat Rounded Background

(*) Overlap required. The Button Chat layer starts above and extends below the bottom edge of the Header Row layer.

Home Panel
├─ Header Row Group
│  │ • x: 0
│  │ • y: 0
│  │ • width: 1440
│  │ • height: 780
│  │ 
│  ├◇ Header Row
│  │  • x: 0
│  │  • y: 0
│  │  • width: 1440
│  │  • height: 695
│  │  • z-index: 0
│  │
│  └◇ Button Chat
│     • x: 1280
│     • y: 660
│     • width: 120
│     • height: 120
│     • z-index: 1
│
├─ ...
└─ Panel Background
❖ Header Row Symbol/Component
├─ Header Row Title
└─ Header Row Background

❖ Button Symbol/Component
├─ Chat Icon
└─ Chat Rounded Background

Notes:

1) Rectangles and images acting as the frame's background are excluded from the required overlapping concept because GeneXus will interpret them in terms of background-color, background-image, border-radius, etc.

Text box spacing

Ensuring enough space in text boxes prevents line breaks or clipped elements.

Remember, text boxes should never be smaller than the font size or line height to prevent text truncation or illegible content. Additionally, text boxes should be wider than the text inside them to avoid undesired newlines; especially when the text is defined in a component and then overridden by other values during instantiation.

DON'T DO
User Panel
├─ User Name
│  • caption: Jhon
│  • font-size: 20
│  • line-height: 25
│  • width: 80
│  • height: 18
│
├─ ...
└─ Panel Background
User Panel
├─ User Name
│  • caption: Jhon
│  • font-size: 20
│  • line-height: 25
│  • width: 100
│  • height: 30
│
├─ ...
└─ Panel Background

Touch targets

For mobile designs, every layer that can be touched by the end-user (e.g. buttons, edits, icons, etc.) must have at least 48x48 dp of tappable area.

Check Android Material Design and Apple Human Interface Guidelines.

DON'T DO
Update User Panel
├─ Input User Name (*)
│  • font-size: 20
│  • line-height: 25
│  • width: 100
│  • height: 18
│
├─ ...
└─ Panel Background

(*) Tappable area

Update User Panel
├─ Input User Name
│  • font-size: 20
│  • line-height: 25
│  • width: 100
│  • height: 48
│
├─ ...
└─ Panel Background

Availability

These sections apply as of GeneXus 17.

  • As of GeneXus 17 upgrade 1:
    - Color Variables are supported.
  • As of GeneXus 18:
    - Scalable Vector Graphics (SVG) images are supported.
    - Static definition for bitmap and layers exported as images are supported

Scope

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

See also


 

Last update: April 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant