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
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
|
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 |
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
|
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
|
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
|
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
└─ ...
|
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. |
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 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. |
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
|
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
|
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
| Generators |
.NET, .NET Core, Java, Android, Apple, Angular |