1

2

Today, more than ever before, the focus is on the user: this is why the aspects related to the User Interface (commonly referred to as UI) and the User Experience (known as UX) become so relevant.In this module, we will study these aspects, starting with Design Systems and then we will see the specific Design Guides for each platform.

3

A Design System consists of achieving through the use of a set of principles,

patterns and organized practices, the design of applications so that they maintain

a uniform style and look, thus achieving the purpose of the digital product.

4

The Design System will then establish: • how our software should interact with users and how it should behave, • what the controls are supposed to look like, • which Fonts, Colors and Icons to use in each case, • which design patterns we will use and which will be reusable; but in addition, it will establish • what the workflow for the development and design of all these components will be like, and • how they will be shared within the development team and the rest of the organization.

5

Similarly to a software development process, we can see the development of the

Design System as an evolutionary process.

• This process begins with the definition of the Purpose, which is ultimately the

Digital Product for which we need it,

• It continues with the definition of the Audience, the goals and design values we

want to achieve.

• We will continue with the definition of the patterns; this will be one of the central

tasks of the process, in it we will define the semantics of the design, which

components our design will contain and how they will be reused.

• Next, we will define the Theme, the images and icons, the fonts and the

components that we have detected.

• Finally, we will establish how to share the design and documentation with the

team, so that everyone can implement the design system in the application

development.

The process will be repeated throughout the life cycle of the product, just like it

happens with the systems’ functionality because they continuously evolve.

6

Just like the concept of DevOps (Developer Operations), when talking about a Design System we talk about * Design Ops, which means integrating designers within the DevOpschain so that they are part of it and work side by side with the developers so that the results are really what they propose.

What we see here are tools, the main ones, that designers use just to do their work and to carry out all the design and on which we are working to have them integrated into GeneXus.

7

In GeneXus for Smart Devices, the Design System is made up by a series of elements such as:• the Design Guides for each Platform, • the Theme and images • and the Stencils,

All of these are an important part of that UI and UX modeling that we must have in our applications. Next, we'll talk about the specific design guides for each platform; we'll leave themes and stencils for later.

8

We have already mentioned that one of the reasons why we need applications to be native is for

them to keep the look & feel of all the other apps on the user's device.

Each platform will define design guidelines for its applications, both UI and UX.

Android 5 provides the guides known as Material Design, and for iOS we have those published on the

Apple site (which do not receive a special name).

IOS: https://developer.apple.com/design/Android: https://material.io/

The different design guides for the different versions of iOS can be found on the Apple site. The

fundamental change came with the release of iOS 7.

One of the particularities of their design guides has to do with the minimalist use of colors and screen

information.

Therefore, we will find for example that an application on an iPad is going to be much more

minimalist in the use of colors than an Android application, because the iOS guides recommend that

we use neutral tones for backgrounds, and bright colors for actions, for buttons and actions.

For example, one of the proposals in the guide is that only 10% or 20% of our designs should have

colors so that they don't compete with the colors of the content we want to show; it is also

recommended, for example, that we use colors that go well against white or black backgrounds.

On the other hand, it is recommended to always use a single color (preferably that of the brand) for

all actions that are offered to the user; for example, here we can see that orange is the color of the

brand, and that the same color should not be used for other things, to avoid confusing the user.

Whenever that color appears, they know it will be an element on which you can execute an action.

We’ll see that this color can be defined in GeneXus as Action Tint color in the Theme in the

properties of the Application class.

We will also find the recommendation to use the general icons shown here only (and always) for

those actions, so as not to confuse the user. For example, we know that the Action icon in any iOS

application will correspond to opening an action menu. And whenever it appears, the user will expect

to display actions by Tapping on it.

In the Bar Tab, which is used to provide the main navigation between screens, it is recommended to

use few icons and add text to the icons discreetly when they are not universal, otherwise the user has

no way of knowing what they are about.

On the other hand, if there are icons that are not active, it is suggested that they are more discreet

with an outline and without filling, so that they just receive less attention (therefore, two versions of

each item should be provided: for when it is active and when it is not).

We can also see that even the sizes of the controls are established in the guidelines. All app icons

should be the same in terms of size, level of detail, and border.

On the other hand, iOS uses a coordinate system to place content on the screen. This system is

measured in points that are equivalent to a certain number of pixels; in a standard resolution

screen, one point (1/72 inch) is equivalent to one pixel.

High resolution displays have a higher pixel density. Since there are more pixels in the same

physical space, there are more pixels per point. As a result, these screens require images with

more pixels.

For example, if we start from an image in standard resolution (@1x) of 10×10 px, the @2x version

of this image should be 20×20 px, and for the @3x version it should be 30×30 px.

For this reason, when developing our app we must provide images in all resolutions, because the

images to be used depend on the device in which the application is installed.

In the guides you will also find the scale factor used by each device, for example iPhone 4 to 6

use a @2x factor and iPhone 7 Plus uses a @3x factor.

The app icon is used for application branding. For example, it appears in the App Store, in the Home

screen of the device, in Spotlight (i.e., the search results screen) and in the Settings screen as well. It

is therefore vital to include these icons in the different resolutions so that, depending on the device,

the one corresponding to its resolution and type of device is used (for example if it is a phone or

tablet it will be different). Note that the sizes are predetermined. The icon is designed with a square

shape, and rounded edges will automatically appear on the device.

Here we see, for example, for an iPad the image that will be used as the Event Day App icon in the

Store and on the home page of the device (76 pt), we see the image as it will appear in the search

window, Spotlight, (40 pt) and the image that will be used in the settings window (29 pt). When we

design the application, we have to provide the same image, but with different sizes and resolutions,

and all this must be entered into the application to use the corresponding one. We will need the same

thing for the start images of the application; in this case, we will also need Landscape and Portrait

versions in all resolutions.

The guides also include screen design according to the device orientation. Here we have in the

Portrait orientation an application that is a calendar and we also have the same screen shown in

Landscape mode, and we see that they are different just to adapt to the size we have.

This was a brief review of the iOS guides and then we'll look at the Material Design guides.

Version 5 of the Android platform incorporated the design guides known as Material Design, to create

a particular ecosystem. This will allow developers to customize the look & feel of their applications,

making them more user-friendly with an optimized user experience.

As we will see, these functionalities will be offered by GeneXus in two ways: through customizable

properties, and also some that will be provided by default.

Here we show a sales application developed with GeneXus, which follows the guidelines of Material

Design, where uniformity in the use of colors for certain common elements becomes fundamental.

For example when editing fields, we see that all fields that are not being edited at that time are

underlined with a uniform color, that color will be known as the regular color, then when the field is

being edited it will appear in another color, that color is the activated color.

On the other hand, when the user taps on a button or an action, it will appear highlighted with a

specific color that we will indicate in due course.

The Action Bar is one of the most important elements of any application. Its color becomes the

"Primary Color" of the application, which distinguishes the brand. The Material Design guides indicate

the color that the Status Bar must take; that is to say, the bar at the top (the one that contains the

time, battery indicators, wifi, notifications, etc.) must have a darker color than the primary color and it

will be known as "Primary Color Dark.”

In addition, the color of the icons embedded in the Application Bar must also match the color of the

Application Bar to be coherent throughout the application; this will be known as "Action Tint Color.”

Also, throughout the application one color is used for the controls activated by the user (e.g.: tap on a

button or a text to confirm in a modal screen, radio buttons, etc.); this color is known as "Accent

Color.”

All these colors are set in the Application class of the Theme.

On the other hand, we see that the Status Bar could be hidden under certain conditions, for example,

when the user slides up the screen to see what is below; then we can, for example, make it

disappear.

We can also configure a shadow under the control to highlight it, indicating the user that the control

can be selected. The property that allows setting this elevation effect is called “Elevation.”

Strip Tab: tabs are shown with an image and background color, an indicator of the active tab with a

color indicator and some elevation.

Touch ripples: it is used to visually notify the user that the tap he has made has had an effect. When

the end user taps on a control that has an associated event, a highlighted circle expands from the

point where the tap was made to the edges of the control, filling it in completely, showing that the

event is being triggered.

This is automatically solved by GeneXus, we don’t have to do anything.

Task color: Android devices provide three physical/"capacitive" buttons, each one for a particular

action. In addition to the back and home buttons, we have the button that shows with a tab switcher a

cascade of thumbnail images with the apps recently closed by the user, in order to return to them.

These thumbnails show their application bar, icons and label.

Slide menu: when the navigation style is Slide, that is, when the main menu is displayed as a window

from the left, its size has to follow the guidelines, and leave a shadow on the right section when it is

displayed. Also, if it has Hero image (i.e., the image that appears at the top taking the entire width),

note that the menu window must reach the status bar, keeping its opacity.

Some of these properties will also be automatically provided by GeneXus.

As we saw for iOS, for Android it is also necessary to provide different options for the same image

according to the density.

Here we see for example the images for the Event Day application icon.

We will have the same image in low density (ldpi), medium density (mdpi), high density (hdpi), extra

high density (xhdpi), etc.

Our applications must follow these guidelines.

Android apps must follow the Material Design guides and iOS apps must follow the guides we

mentioned at the beginning.

How do we configure all these general properties, that is, those that apply to the entire app? And how

do we configure the general design sent to us by the graphic designer?

In Smart Device applications, the Theme object will be essential, and we will talk about it in the next

video.

24