CURSO: Diseño de Interfaces y

Multimedia I

Unidad 3
Tema 7: Propiedades de diseño
y composición en Adobe XD
 LOGRO DE LA SESIÓN

Al término de la sesión, el alumno conocerá las características

principales de diseño y composición en Adobe XD, funciones básicas
que nos permitirán crear el diseño de interfaces digitales.

2
3
TEMAS:
• Herramienta texto en Adobe XD
• Imagines y máscaras
• Alineación de objetos y capas
• combinación y agrupación de formas

4
Herramienta Texto

5
 Interfaz de Adobe XD

Exploraremos la herramienta texto (t) que nos ofrece adobe XD con

sus principales configuraciones orientadas al diseño de una interfaz.

6
Crearemos un nuevo documento con dimensiones de interfaz web y la nombraremos
Herramienta texto en Adobe XD

7
Daremos clic en la herramienta texto (t) y daremos un primer clic en nuestro
artboard para poder escribir un texto (línea de texto). De esta forma podremos crear
textos en estilo de titulares.

8
Daremos clic en la herramienta texto (t) y daremos un primer clic sostenido y
trazaremos un recuadro en nuestro artboard para poder escribir un texto (párrafo de
texto). De esta forma podremos crear textos en estilo de párrafos

9
Podemos modificar también el aspecto del texto desde la barra de propiedades
(Fuente, tamaña, estilo, espaciado entre caracteres, opacidad, color).

10
Podemos modificar también el aspecto de la caja de texto desde la barra de
propiedades (Fuente, tamaña, estilo, espaciado entre caracteres, interlineado,
opacidad, color).

11
Imágenes y máscaras

12
 Interfaz de Adobe XD

Exploraremos la importación de imágenes que nos ofrece adobe XD

y su aplicación en máscaras de forma con sus principales
configuraciones orientadas al diseño de una interfaz.

13
Crearemos un nuevo documento con dimensiones de interfaz web y la nombraremos
imágenes y máscaras.

14
Daremos clic en el botón de navegación del programa (recuadro de borde rojo),
buscaremos la opción importar (recuadro de relleno rojo) y daremos clic para
posteriormente buscar la imagen entre los archivos de nuestra web.

15
También es posible importar una imagen arrastrándola desde el explorador de
documentos de nuestro pc a la mesa de trabajo.

16
Podemos modificar las dimensiones de nuestras imágenes dando clic sobre alguna
esquina superior o inferior, presionando shift y arrastrando el curso.

17
Dando clic en los puntos que se generan en el cuadrado de la imagen y
arrastrándolos adentro podemos generar esquinas bordeadas de forma rápida.

18
Podremos modificar también el aspecto de imagen creada desde la barra de
propiedades.

19
 Interfaz de Adobe XD

Ahora trabajaremos la herramienta máscara para contener nuestras

imágenes

20
Podemos crear una máscara para imágenes creando en nuestra mesa de trabajo un
rectángulo (r) posteriormente buscamos nuestra imagen deseada desde nuestro
explorador de archivos locales y arrastramos con un clic sostenido la imagen al
recuadro creado hasta que la área del recuadro se pinte de color azul.

21
Podemos mejorar la colocación de nuestra imagen en la máscara seleccionado el
contenedor y presionado la tecla ENTER para tener la opción de mejorar la
colocación de las imagen en la máscara.

22
Alineación de objetos

23
Exploraremos la opción de alineación de objetos con adobe XD orientado al diseño
de interfaces. Crearemos un nuevo documento con dimensiones de interfaz web y la
nombraremos alineación de objetos y capas.

24
Crearemos con la herramienta elipse 6 círculos, los ubicaremos de forma aleatoria en
nuestra mesa de trabajo, con la herramienta selección (V) tomaremos todo el
conjunto de círculos y en la barra de propiedades ubicaremos las opciones de
alineación.

25
Distribución horizontal

26
Distribución vertical

27
Distribución a la mitad

28
Distribución a la mitad

29
Distribución de capas

30
Exploraremos la opción de alineación de capas con adobe XD orientado al diseño de
interfaces. Al dar clic sobre nuestra mesa de trabajo podemos visualizar las capas
creadas las cuales podemos organizar, ocultar, cambiar nombre bloquear.

31
Podemos organizar nuestras capas dando seleccionándola y con un clic sostenido
arriba o abajo según se requiera organizar.

32
Al dar doble clic sobre una capa podemos tener la opción de cambiar el nombre de la
capa.

33
Podemos marcar para exportación, bloquear y ocultar una capa simplemente
seleccionado la capa y dando clic en las opciones rápidas.

34
Combinación de objetos

35
Exploraremos la opción de combinación y agrupación de objetos con adobe XD
orientado al diseño de interfaces. Crearemos con la herramienta elipse 8 círculos. De
los cuales seleccionaremos 2 de ellos.

36
Teniendo seleccionado dos círculos nos ubicaremos en la barra de propiedades y
daremos clic en la primera opción de combinación (añadir).

37
Teniendo seleccionado dos círculos nos ubicaremos en la barra de propiedades y
daremos clic en la primera opción de combinación (restar).

38
Teniendo seleccionado dos círculos nos ubicaremos en la barra de propiedades y
daremos clic en la primera opción de combinación (Intersectar).

39
Teniendo seleccionado dos círculos nos ubicaremos en la barra de propiedades y
daremos clic en la primera opción de combinación (Excluir superposición).

40
Diseña el logotipo de mastercard - pagina 92 del manual

41
TEMAS:
• Creación de paleta de colores
• Símbolos
• Diseño de botones
• Componiendo con Grip Design
• Diseño de un UI Kit

42
Creación de paleta
de colores

43
 Crearemos una paleta de colores personalizada para nuestros
proyectos en adobe XD. El beneficio de tener una paleta integrada
en nuestro proyecto nos ayudará a personalizar nuestra interfaz y
mantener integrado nuestro diseño a nivel de color en cada interfaz
que diseñemos

44
En nuestro mesa de trabajo crearemos un circulo con la herramienta elipse (E) al cual
le daremos un color de relleno y deshabilitaremos el color de borde desde la ventana
de propiedades.

45
Teniendo seleccionado nuestra forma con el color deseado nos ubicaremos en la
parte inferior del programa (opción activos) y se nos mostrará una ventana en la cual
ingresaremos nuestro color dando clic en +. Es así que se guardara nuestro color en
la paleta de colores.

46
Podemos repetir las acciones detalladas en el paso anterior y agregar todos los
colores que nuestro proyecto requiera

47
Aplicaremos los colores de nuestra paleta simplemente dibujado una forma
geométrica, línea, texto o una forma trazada con la herramienta pluma,
seleccionándola dando clic en nuestra ventana de activos y eligiendo el color de
nuestra preferencia

48
Símbolos

49
Para convertir un objeto enInterfaz
un símbolo, realice
de Adobe XDuna de las siguientes
acciones:
• Haga clic con el botón derecho en el objeto y seleccione Hacer símbolo.
• Seleccione el objeto y presione Comando + K (en Mac), o Ctrl + K (en
Windows).
• En un Mac, seleccione el objeto y luego elija Objeto > Crear símbolo.
• Seleccione el objeto y haga clic en +, en la biblioteca Símbolos del
panel Activos.

50
Todos los símbolos que se creen en el proyecto se muestran automáticamente en la
biblioteca Símbolos del panel Activos.

51
Para eliminar un símbolo de la biblioteca Símbolos, haga clic con el botón derecho en
el símbolo y seleccione Eliminar símbolo.

52
 Para reutilizar un símbolo, arrástrelo desde la biblioteca Símbolos a la
mesa de trabajo. Alternativamente, copie y pegue un símbolo en una
mesa de trabajo, o desde una mesa de trabajo a otra. Todas las instancias
vinculadas de un símbolo se indican con un borde verde. También puede
copiar y pegar símbolos desde un documento de XD a otro.

53
Para reutilizar un símbolo, arrástrelo desde la biblioteca Símbolos a la mesa de
trabajo. Alternativamente, copie y pegue un símbolo en una mesa de trabajo, o
desde una mesa de trabajo a otra. .

54
Al tener nuestros símbolos distribuidos en todo nuestro proyecto y deseando
cambiar por ejemplo el color de todos ellos solos debeos hacer el cambio de color a
uno de ellos y la acción se generará a todos nuestros símbolos.

55
Diseño de botones

56
 Interfaz de Adobe XD

Los botones son los elementos más significativos dentro de las interfaces y
que hay que tener muy en cuenta a la hora del diseño web. Casi todas las
comunicaciones importantes entre el ser humano y el ordenador se
inician, verifican o ejecutan a través de un botón. Usamos los botones
cuando respondemos a los cuadros de diálogos, al mandar mensajes, y al
movernos por la web. Para la mayoría de la gente, los botones son el
medio primario de interacción con los ordenadores.

57
En adobe XD podemos crear nuestro botones utilizando las herramientas de dibujo como la
elipse (E), rectángulo (R) línea (L) pluma (P) y texto (T). integrando estas herramientas y
personalizándolas con nuestra paleta de colores tendremos botones que faciliten la
navegación en nuestras interfaces. No debemos olvidar convertir en símbolo nuestros
botones para poder reutilizarlos.

58
Componiendo con Grip Design

59
 Interfaz de Adobe XD

EL Grip Design o retícula suele ser una plantilla distribuida en

columnas. Existen distintos formatos de retícula: las variables
entre unos archivos y otros son básicamente el número de
columnas, el padding y el gutter.

60
Columnas: Habitualmente, el número de columnas suele ser de doce. Esto es
debido a que otorga una gran versatilidad compositiva al archivo. Con doce
columnas, podemos dividir la información en un bloque de doce, en dos
bloques iguales de seis columnas, en tres de cuatro columnas, en cuatro
bloques de tres columnas o seis de dos columnas. Esto nos da pie a generar
diferentes estructuras modulares a partir de una misma retícula. Por
supuesto, podemos diseñar retículas específicas para cada web con el
número de columnas que deseemos.

61
Padding: El Padding (relleno) es
una propiedad que establece un
espacio entre el borde de la
columna y el contenido
englobado dentro de esta. Su
grosor es editable.

Gutter Width: Espacio dejado

entre las columnas.

62
 Interfaz de Adobe XD

En adobe XD tenemos la opción desde nuestra ventana de

propiedades de trabajar con un grip design personalizable que
facilitará la organización y ubicación de los elementos de la interfaz,
todo ellos respetando los fundamentos visuales de una correcta
diagramación.

63
64
En caso nuestro proyecto requiera una mayor dimensión en anchura o altura, con la
herramienta mesa de trabajo o desde la ventana de propiedades podemos modificar
estos valores. Al tener una dimensión de altura el programa nos mostrará una línea
horizontal punteada que nos hará notar hasta donde se visualizará en primera vista
nuestra interfaz.
65
Teniendo nuestro grip design y las dimensiones de nuestra interfaz estaremos listos
para ubicar nuestros elementos en nuestra mesa de trabajo respetando las columnas
y los espaciados.

66
UI KIT

67
 Interfaz de Adobe XD
Un UI kit (del inglés user interface kit) es un archivo que incluye
varios elementos ya prediseñados (como por ejemplo: botones, iconos,
tablas, formularios, sliders, etc.) para ayudarnos en el desarrollo de nuestras
interfaces de usuario. Se pueden editar fácilmente (los elementos en un UI
kit suelen estar hechos con capas), de manera que podemos personalizarlos
o adaptarlos a nuestras necesidades (cambiar tamaño, color, etc.).

68
Adobe XD ofrece conexión con los UI KIT de Google, Mac y Windows para descargar
elementos que nos servirán para el diseño de nuestras interfaces.

69
Descarga de archivo.

70
Para añadir un elemento de UI KIT a nuestro proyecto solos debemos copiar el elemento y
pegarlo en nuestra mesa de trabajo.

71
Diseño Visual
(interfaz web)

72
Utilizaremos las hermanitas de Adobe XD para realizar el diseño
visual de un sitio web paso a paso al cual daremos interacción en la
siguiente unidad.

73
Crearemos un nuevo documento en adobe XD con dimensiones web por defecto
(1366 x 768) iniciaremos creando una mesa de trabajo la cual llamaremos INICIO.

74
Crearemos nuestra paleta de colores la cual nos servirá a lo largo de todo el proyecto
para personalizar nuestro diseño. Para obtener un color degrada como muestra en
nuestra paleta de colores debemos dar clic en color de relleno tendiendo una forma
seleccionada en nuestra mesa de trabajo, daremos clic en la parte superior del modo
de color y elegiremos degradado lineal, seleccionado los dos a más colores para que
se de el modo degradado. Posteriormente agregaremos en color a nuestra paleta
desde la ventana de activos y dando clic en el boto más.

75
76
Con las herramientas elipse, rectángulo y pluma creeremos iconos para nuestro
proyecto y les daremos color desde nuestra paleta.
.

77
Desde la ventana de activos (parte inferior) añadiremos cada icono como símbolo.
Seleccionando una forma y dando clic al botón más (+). Posteriormente
nombraremos a casa símbolo como el ejemplo.
.
78
Con la herramienta rectángulo (R) trazaremos un recuadro que cubra toda nuestra
mesa de trabajo.

79
Desde nuestra carpeta de proyecto ubicaremos la carpeta INICO – IMAGEN 01 y la
ingresaremos a al recuadro que creamos en adobe XD.

80
Con la herramienta rectángulo trazaremos un recuadro que cubra toda nuestra
imagen.

81
Aplicaremos el color degradao degradado de neustra paleta de colores con una
opacidad de 40% a nuestro recuadro.

82
Agruparemos todos los elementos de nuestra mesa de trabajo y las nombraremos
IMAGEN_INICIO.

83
Activaremos nuestro grip desde la ventana de propiedades para iniciar la
diagramación de los elementos de la página de incido (barra de navegación, titulos,
botones,etc)

84
Con la herramienta texto diseñaremos nuestra barra de navegación principal (SOBRE
MÍ – PORTAFOLIO - CONTACTO) con las especificaciones del ejemplo.

85
Diseñaremos un acceso a redes sociales con la herramienta texto (revisar especifica
iones del ejemplo) y una línea vertical.

86
Desde nuestra ventana de activos agregaremos nuestros iconos de redes sociales y le
daremos un color blanco.

87
Con la herramienta texto escribiremos un título y subtitulo para nuestra página de
inicio.

88
Duplicaremos nuestro titular y lo convertiremos a trazado par que sea nuestro
logotipo de la página

89
Le daremos un tamaño pequeño y lo ubicaremos en la esquina superior izquierda
(revisar ejemplo)

90
 Agruparemos los elementos de nuestro logo y lo nombraremos logo.
capas.

91
Seleccionaremos los elementos de texto (titular y subtitular) lo agruparemos y los
nombraremos titular.

92
Seleccionaremos los elementos de redes sociales, los agruparemos y los
nombraremos REDES_SOCIALES_01

93
Los textos de nuestra barra de navegación no los agruparemos, ya que los
necesitamos individualmente para generar la interacción entre las mesas de trabajo.

94
MESA DE TRABAJO: SOBRE MÍ
Nos ubicaremos en la herramienta mesa de trabajo (A) Y crearemos una mueva mesa
de trabajo, la cual nombraremos SOBRE MÍ.

95
Duplicaremos el logo y la barra de navegación de la mesa de trabajo INICIO a la mesa
a la nueva mesa de trabajo y le daremos un color nuevo desde nuestra ventana de
activos.
96
Editaremos el texto SOBRE MÍ eligiendo la versión bold de la fuente OPEN SANS y
agregaremos una línea debajo del texto (revisar ejemplo).

97
Copiaremos el titular (ASHER – WEB VISUAL DESIGNER) de nuestra mesa de trabajo
INICIO y lo pegaremos en nuestra nueva mesa de trabajo, lo dimensionaremos en a
una versión pequeña de color morado y lo ubicaremos en la parte superior derecha
(revisar ejemplo).

98
Con la herramienta texto agregaremos dos párrafos de texto.

99
Con la herramienta rectángulo (R) agregaremos un recuadro con las siguientes
dimensiones (ver ejemplo.)

100
En la carpeta de proyecto SOBRE MI - Ubicaremos la imagen sobre_MI_01 y la
ingresaremos en nuestro recuadro.

101
Con la herramienta mesa de trabajo modificaremos la altura de nuestra mesa de
trabajo.

102
Con la herramienta texto añadiremos un subtítulo (HABILIDADES).

103
Con la herramienta rectángulo (R) añadiremos 4 rectángulos. Ver ejemplo

104
Añadiremos los textos (DISEÑO 90% – DESARROLLO 80% – SEO 80% - AUDIOVISUALES 60%)
con las características del ejemplo.

105
Añadiremos un rectángulo morado sobre los recuadros de color gris (ver ejemplo).

106
Añadiremos los iconos desde nuestra ventana de activos a nuestra mesa de trabajo
(ver ejemplo).

107
Agregaremos imágenes a nuestros recuadros ingresando a la carpeta de proyecto –
imágenes – portafolio arrastrando una a una con clic sostenido.

108
Ubicados en la ventana de activos ingresaremos el boton_02 a nuestra mesa de
trabajo y le añadiremos un texto (DESCARGAR CV).

109
Trazaremos una barra en la parte inferior de la página. Ver ejemplo

110
Sobre nuestra barra ubicaremos nuestro logo, texto (Copyright © 2019 . Todos los
derechos reservados) y redes sociales.

111
Seleccionaremos todos los elementos de nuestro footer (pie de pagina, lo agruparemos
y lo nombraremos FOOTER).

112
Seleccionaremos nuestro botón (DESCARGAR CV) y el texto de introducción y lo
agruparemos nombrándolo CV.

113
MESA DE TRABAJO – PORTAFOLIO
Nos ubicaremos en la herramienta mesa de trabajo (A) y crearemos una nueva mesa
de trabajo la cual la nombraremos PORTAFOLIO

114
Duplicaremos el logo y la barra de navegación de la mesa de trabajo INICIO a la mesa
a la nueva mesa de trabajo.

115
Editaremos los textos de nuestra barra de navegación. Ver ejemplo.

116
Añadiremos los textos (Todos – Diseño Web – Branding – Diseño APP - Video). Ver
ejemplo.

117
Daremos una dimensión de más altura a nuestra mesa de trabajo.

118
Añadiremos con la herramienta Rectángulo (R) 8 recuadros. Ver ejemplo.

119
Ubicaremos en nuestra carpeta de PROYECTO – la subcarpeta PORTAFOLIO,
agregaremos una imagen a cada recuadro. Ver ejemplo.

120
Copiaremos el footter de la mesa de trabajo SOBRE MI a nuestra mesa de trabajo
PORTAFOLIO.

121
Seleccionaremos todos los elementos de la sección de categorías, lo agruparemos y
lo nombraremos CATEGORIAS.

122
Cubriremos nuestro uno de nuestros proyectos con un recuadro con la siguiente
apariencia. Ver ejemplo.

123
Añadiremos un texto con el nombre del proyecto y a la categoría que pertenece. Ver
ejemplo.

124
Agruparemos todos los elementos (imagen, recuadro, texto y línea).

125
MESA DE TRABAJO – PORTAFOLIO / PROYECTO.
Con la herramienta mesa(A) de trabajo añadiremos una nueva mesa de trabajo con
las dimensiones de 1366 x 2940 la cual nombraremos PORTAFOLIO / PROYECTO.

126
Copiaremos la barra de navegación y el footer (pie de página) de la mesa de trabajo
PROYECTO.

127
Agregaremos el texto portafolio con una flecha regreso

128
Seleccionaremos el elemento texto y la flecha de regreso y los agruparemos para
nombrarlos PORTAFOLIO_REGRESAR.

129
Diseñaremos la página maestra de descripción del proyecto_01 aplicando la
herramienta texto y rectángulo para ingresar imágenes de nuestra carpeta de
proyecto / PROYECTO – PORTAFOLIO – PORYECTO_01 . ver ejemplo.

130
MESA DE TRABAJO CONTACTO.
Con la herramienta mesa de trabajo (A) crearemos una nueva mesa de trabajo la cual
nombraremos CONTACTO.

131
Copiaremos la barra de navegación y el footer (pie de página) de la mesa de trabajo
PROYECTO.

132
Editaremos los textos de nuestra barra de navegación. Ver ejemplo.

133
Con la herramienta rectángulo crearemos un recuadro con borde gris al cual le
añadiremos un texto (nombre).

134
Añadiremos los demás campos del formulario. Ver ejemplo

135
Añadiremos un recuadro con color de relleno y le agregaremos un texto (ENVIAR).
.

136
Añadiremos un borde redondeado a nuestros rectángulos de formulario.

137
Seleccionaremos todos los elementos del formulario los agruparemos para
nombrarlo FORMALARIO.
.
138
Copiaremos texto titular de la página SOBRE MÍ y lo pegaremos en nuestra nueva
mesa de trabajo (CONTACTO).
.
139
Con la herramienta texto añadiremos un párrafo.
.

140
Desde nuestra ventana de activos añadiremos nuestros iconos de contacto.

.
141
Añadiremos textos descriptivos para cada icono de contacto.
.

. 142
Agruparemos todos los elementos seleccionado y lo nombraremos DATOS_CONTACTO.
.

. 143
Finalmente nos aseguraremos de ordenar nuestra mesa de trabajo. Ver ejemplo.

. 144