UI DESIGN

Material producido por la Universidad Peruana de Ciencias Aplicadas

UPC, 2021.
 UI DESIGN

CONTENIDO
Objetivo de aprendizaje 3

Introducción 3

UI design elements 4

Conclusiones 13

Referencias 13

Material producido por la Universidad Peruana de Ciencias Aplicadas. UPC, 2021. 2

 UI DESIGN

1. Objetivo de aprendizaje
Al finalizar la unidad de aprendizaje, el estudiante identifica con propiedad las necesidades de los
usuarios evidenciando sensibilidad y empatía.

2. Introducción
Recuerda qué se debe tomar en Como has visto anteriormente, UX es un concepto más
cuenta al momento de elaborar amplio que UI. UI se enfoca en aspectos como la estructura,
propuestas de UX. el diseño y los prototipos de interfaz de usuario.

Understand the product

BUSINESS TECHNOLOGY
Marketing needs Available technology Understand the user
Financial needs
Research

UI/ UX Structure

UX Design UI

Prototype
USERS
User needs
User behaviors Testing and feedback

Recuerda que, se nutre de los resultados obtenidos de Information Architecture.

UX
Information architecture

Content inventory Content audit Navigation and mapping

UI
Wireframes

Low fidelity (sketches) High fidelity

Material producido por la Universidad Peruana de Ciencias Aplicadas. UPC, 2021. 3

 UI DESIGN

3. UI design elements
El diseño está constituido por dos tipos de conceptos: design elements (elementos de diseño) y design
principles (principios de diseño).

The things that make up a design.

• Line • Size
Elements
• Shape • Texture
• Direction • Colour

Design

What we do to those elements.

Principles • Balance • Repetition

• Proximity • Contrast
• Alignment • Space

3.1. Elements of design

L o s e l e m e nto s d e l a
interfaz de usuario son
los componentes básicos
de todas las aplicaciones.
Son responsables de las
interacciones entre el usuario
y la aplicación. Son lo que
permiten una navegación de
usuario efectiva y datos de
entrada / salida, entre otras
funcionalidades.

Material producido por la Universidad Peruana de Ciencias Aplicadas. UPC, 2021. 4

 UI DESIGN

ELEMENTS OF DESIGN
Quick reference sheet

LINE
A line is a mark between two pints. There are various types of lines, from straight to squiggly to curve
and more. Lines can be used for a wide range of purposes: stressing a word or phrase, connecting
content to one another, creating patterns and much more.

COLOR
Color is used to generate emotions, define importance, create visual interest and more. CMYK (cyan/
magenta/yellow/black) is subtractive; RBG (red/green/blue) is additive.
Some colors are warm and active (orange, red); some are cool and passive (blue, purple).
There are various color types (primary to analogous) and relationships (monochromatic to triad)
worth learning more about as well.

SIZE
Size is how small or large something is; is a small shirt vs. an extra large shirt, for example. Use size to
define importance, create visual interest in a design (via contrasting size), attract attention and more.

TEXTURE
Texture relates the to surface of an object; the look or feel of it. Concrete has a rough texture; drywall
has a smooth and subtle texture. Using texture in design is a great way to add depth and visual interest.
Printed material has actual, textile texture while screen material has implied texture.

SPACE
Space is the area around or between elements in a design. It can be used to separate or group
information. Use it effectively to: give the eye a rest; define importance; lead the eye through a
design and more.

VALUE
Value is how light or how dark an area looks. A gradient, shown above, is a great way to visualize value
– everything from dark to white, all the shades in-between, has a value. Use value to create depth
and light; to create a pattern; to lead the eye; or to emphasize.

SHAPE
Height + width = shape. We all learned basic shapes in grade school – triangles, squares, circles and
rectangles. Odd or lesser seen shapes can be used to attract attention.

There are three basic types of shape: geometric (triangles, squares, circles, etc.), natural (leaves,
animals, trees, peoples), and abstracted (icon, stylizations, graphic representations, etc.).

Material producido por la Universidad Peruana de Ciencias Aplicadas. UPC, 2021. 5

 UI DESIGN

3.2. Principles of design

A menudo, puede
C.R.A.P. es un principio de
resultarte difícil idear
diseño desarrollado por
diseños que atraigan
Resulta de mucha Robin Patricia Williams,
de manera efectiva a tu
utilidad el conocer que significa contraste,
público objetivo y los
en detalle C.R.A.P. repetición, alineación y
impulsen a realizar la
proximidad.
acción deseada.

PRINCIPLES OF DESIGN
Quick reference poster
Constrast

Color Unique elements in a design should stand apart from one another. One way
to do this is to use contrast. Good contrast in a design – which can be achieved
Tone/Value using elements like color, tone, size, and more – allows the viewer’s eye to
Size/Shape flow naturally.
Direction To the left, you can see 4 ways to create contrast in your design.

Alignment

Proper alignment in a design means that every element in it is visually

connected to another element. Alignment allows for cohesiveness; nothing
feels out of place or disconnected when alignment has been handled well.

Repetition

Repetition breeds cohesiveness in a design. Once a design pattern has been

established- for example, a dotted border or a specific typographic styling
- repeat this pattern to establish consistency.
The short version?
Establish a style for each element in a design and use it on similar elements.

Proximity

Proximity allows for visual unity in a design. If two elements are related to
each other, they should be placed in close proximity to one another. Doing
so minimizes visual clutter, emphasizes organization, and increases viewer
comprehension.
Imagine how ridiculous it would be if the proximity icons on this graphic were
located on the other side of this document.

Material producido por la Universidad Peruana de Ciencias Aplicadas. UPC, 2021. 6

 UI DESIGN

3.3. UI DESIGN ELEMENTS

Language (lenguaje)

Un conjunto de palabras puede

El nombre del product tiene
El lenguaje utilizado el poder de establecer el
como herramienta estado anímico (mood) desde
de diseño. el primer contacto en la
experiencia.
aplicarse para establecer la
dirección del diseño. Los tonos
pueden variar según la intención
y decisiones de la marca (estricto,
científico, entretenido, divertido,
entre otros).

Clear Jargon-free, offers context

Concise Economical, frontloaded

Useful Direct next action

El ejemplo permite apreciar cómo las diferencias, en apariencia

sutiles, permiten lograr un efecto muy diferente.

Failure
“Wrong password.
Original An authentication error has ocurred. Try again. Recover
Ok password”.
OK

Sign-in error
Clear You entered an incorrect password.
Ok

C l e a r, Wrong password
concise Ok Decisiones adecuadas
sobre el lenguaje,
pensando en la claridad
C l e a r, y utilidad producen una
Wrong password experiencia mucho más
concise,
useful Try again Recover password satisfactoria.

Material producido por la Universidad Peruana de Ciencias Aplicadas. UPC, 2021. 7

 UI DESIGN

Colour (color)

El color es un elemento El color puede ayudar a

El color también establece
de diseño poderoso, más mostrar estados como
el mood, dado que los
aún cuando se combina pasivo (inactive), activo
humanos responden de
con principios como el (touch / hover) o activado
forma emotiva y subjetiva.
contraste. (press / click).

Este gráfico resume los conceptos principales que constituyen la teoría del color.

COLOUR THEORY Analogous

CMYK Quick reference sheet Colours that are adjacent to each
other on the colour wheel.
Subtractive
Created with ink Red Red orange Yellow orange

Yellow Yellow green Green

When mix colours using
paint, or through the printing
process, we are using Complementary
subtractive colour method.
Colours opposite to each other
Subtractive colour mixing
on the colour wheel.
means that one begins with
white and ends with black; Blue green Red orange Yellow Violet
as one adds colour, the result Yellow
Blue Orange Red violet
gets darker and tends to black. green

Blue violet Yellow Green Red

orange

Triadic
Three colours spaced equally
apart on the colour wheel.

RGB Red Yellow Blue

Additive Blue violet Red orange Yellow green

Created with light Orange Green Violet

If we are working on a Yellow orange Blue green Red violet

computer, the colours we see
on the screen are created with
light using the additive colour Split complement
method. Additive colour
A colour and the two colours
mixing begins with black and next to its complement on the
ends with white; as more colour wheel.
colour is added, the result is
lighter and tends to white. Yellow Blue violet Red violet

Yellow green Violet Red

Green Red violet Red orange

Blue green Red Orange

Blue Red orange Yellow orange

Greyscale
Colour meanings Blue violet Orange Yellow
Intesity of black
Violet Yellow orange Yellow green
Red Intense, fire, blood, energy, love, passionate, strong.
Black Black Black
Red violet Royality, power, nobility, wealth, ambition, dignified, mysterious. Red violet Yellow Green

Blue Sky, sea, depth, stability, trust, masculine, tranquil. Monochromatic Red Yellow green Blue green

Green Nature, growth, fertility, freshness, healing, safety, money. Colours of a single hue Red orange Green Blue

Yellow Sunshine, joy, cheerfulness, intellect, energy, attention. Blue Blue Blue Orange Blue green Blue violet

Orange
Warm, stimulating, enthusiasm, happiness, success, creative,
Red Red Red Yellow orange Blue Violet
autumn.

Material producido por la Universidad Peruana de Ciencias Aplicadas. UPC, 2021. 8

 UI DESIGN

El color puede producir emociones o establecer el mood o estado anímico que puede servir de
base al resto de componentes de la experiencia.

VISUAL IDENTITY
Deciding on key colors

Red
Visceral, bold, courageous, energetic.
Stimulates apetite and the pituitary gland.
Increases heart rate, creates urgency
often seen in clearance, used for impulsive
shoppers.
Orange
Friendly, cheerful, confident, fun, vitality,
lighter, shades appeal to upscale market.
Signifies aggression. Creates call to action:
buy, sells, subscribe. Found in impulsive
shoppers.

Yellow Black
Represents optimism, clarity, warmth, Prestige, serious, bold, classic, powerful.
positivity. Eyes see yellow first, great for Works well for expensive products.
POS display.

Green
Balance, harmony, health, growth,
freshness, deep greens are associated with
prestige. Used to relax in stores, associated
with wealthy, has long been a symbol of
fertility.
Blue
Trustworthy, strong, dependable, secure,
preferred by men, popular in corporate
because its productive and non-invasive.

Purple
Wise, creative, imaginative, royalty,
lavender evoques nostalgia, sentimentality.
Used often in beauty, or anti-aging
products, used to soothe or calm.
White
Suggets cleanliness and sterility, gives
a sense of refinement, indicates space
and openness, encourages the clearing
of clutter, clarity, purity, simplicity,
sophistication, freshness.

Material producido por la Universidad Peruana de Ciencias Aplicadas. UPC, 2021. 9

 UI DESIGN

Imagery (imágenes)

Las imágenes y el estilo

Pueden servir como Abarca formas,
de las mismas puede
contenido, mood y ilustraciones, fotografías,
colaborar en establecer
navegación en el contexto rendering en 3D, etc.
una línea de diseño o un
de UI design.
estilo.

Content marketing Marketing software

Advanced training in executing Marketing software training and
an effective inbound marketing certification for HupSpot Marketing
strategy. Platform users.

Buy for $15 Buy for $15

Sales software HubSpot design

HubSpot CRM and HubSpot Technical product training for
Sales software training and web designers using HubSpot
certification for HubSpot Sales COS, templates, and website
Platform users. pages.

Buy for $15 Buy for $15

Material producido por la Universidad Peruana de Ciencias Aplicadas. UPC, 2021. 10

 UI DESIGN

Icons (íconos)

Icon vs Symbol:

Representación visual de algo Actúan como elementos de interfaz

relativamente realista (pictorial). representando ciertas acciones.
ICON

Pueden actuar como representación

No luce necesariamente como lo
instantánea de un producto, marca
que representa (non-pictorial).
SYMBOL o compañía.

Typography (tipografía)

La tipografía es un área que abarca varios conceptos y características que definen a la misma,
como baseline, x-height, etc.

La tipografía puede funcionar en muchas formas en el contexto de una app o website.

Parte del sistema

Contenido que Parte de la interfaz en de branding para
consumes. términos de botones o dar al producto una
etiquetas. identidad.

Material producido por la Universidad Peruana de Ciencias Aplicadas. UPC, 2021. 11

 UI DESIGN

Recuerda que cada elemento tiene diversas características que pueden aportar
mucho para definir el diseño.

Los principios aplicados adecuadamente sobre los elementos, pueden producir diseños que
resulten en experiencias de usuario satisfactorias, útiles, fáciles para interactuar. Es importante
entender estos elementos y principios.

Material producido por la Universidad Peruana de Ciencias Aplicadas. UPC, 2021. 12

 UI DESIGN

4. conclusiones
• En el UI design, los elementos y principios de
diseño son conceptos que aportan a definir
el diseño (los elementos) y pueden producir
experiencias satisfactorias, útiles y fáciles al
usuario en la interacción con la aplicación (los
principios).

Referencias
Para profundizar

• https://www.interaction-design.org/literature/topics/color-theory

Material producido por la Universidad Peruana de Ciencias Aplicadas. UPC, 2021. 13

©️ UPC. Todos los derechos reservados

Autor: Ángel Velásquez Núñez