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