ADOBE XD

1. ADOBE XD()
Phd(c). Richard Mendoza
Docente

2. 2
TEMA 1

4. Adobe XD es un editor de gráficos
vectoriales desarrollado y publicado por
Adobe Inc para diseñar, un prototipo de la
experiencia del usuario para páginas web
y aplicaciones móviles. El software está
disponible para MacOS y Windows.
Adobe XD apoya a los diseño vectoriales
y a los sitios web wireframe, y creando
prototipos simples e interactivos con un
solo click. Adobe prime anunció que
estaban desarrollando una nueva
herramienta de diseño y prototipado bajo
el nombre "Proyecto XD" en la
conferencia Adobe XD en octubre de
2015. La primera versión beta fue
realizada para MacOS como "Adobe
Experience Design CC“.
ADOBE XD

6. Adobe Xd esta en constante actualización, así
que te dejo estos recursos para mantenerte
actualizado.
• Mejoras mensuales.
• Garantía de Adobe.
• Familiaridad en herramientas.
• Proceso completo.
VENTAJAS ADOBE XD
•Blog oficial sobre actualizaciones
•Blog oficial de tips
•Twitter de Adobe Xd
La primera.
Solo para macOS.
Desde navegador.
Colaborativa.

7. Xd tiene una versión gratuita que nos dejara
acceder a casi todas las funciones de la
aplicación. La diferencia con la versión de
paga es que solo nos dejara publicar un
prototipo en internet, mientras que en la de
pago es ilimitado, o sea, para que clientes o
desarrolladores puedan revisar nuestro
diseño en sus dispositivos a través de un link.
VENTAJAS ADOBE XD
https://helpx.adobe.com/la/xd/help
/keyboard-shortcuts.html

8. Recomendaciones
Siempre debemos ser lo más ordenados y
limpios posibles al trabajar nuestros
documentos en Adobe XD.
Un primer paso es nombrar el documento.
Nombrar cada una de las mesas de trabajo
por nombres descriptivos.
Al pasar el mouse por encima de las
herramientas nos mostrará sus atajos del
teclado.
INTERFAZ ADOBE XD
Selección: Seleccionar elementos
del entorno de trabajo.
Grupo Formas
Rectángulo
Circulo
Polígono
Grupo Edición
Linea
Pluma
Texto

9. Artboard: Herramienta que nos ayuda a crear mesas de trabajo de medidas
especificas.
Zoom.
Librerías: En la sección de librerías se encuentran todos los recursos
relacionados con nuestro proyecto.
Capas: En la sección capas podremos clasificar todas las formas y
componentes que tengamos en nuestras mesas de trabajo.
Plugins: Recursos que ofrece Adobe para poder extender funcionalidades de
la aplicación.
HERRAMIENTAS ADOBE XD

10. Bocetos que nos sirven para definir la jerarquía de los
productos.
Un wireframe se hace con boceto gráfico.
Tener en cuenta: Tamaño de íconos y letra, y permitir
que el usuario pueda salirse cuando quiera.
WIREFRAMES
https://wireframe.cc/ https://www.sketchize.com/

11. Figma es un editor de gráficos vectorial y una
herramienta de generación de prototipos,
principalmente basada en la web, con
características off-line adicionales habilitadas
por aplicaciones de escritorio en macOS y
Windows. Las aplicaciones Figma Mirror
companion para Android y iOS permiten mirar
los prototipos de Figma en dispositivos
móviles. El conjunto de funciones de Figma,
se enfoca en el uso de la interfaz de usuario y
el diseño de experiencia de usuario, con
énfasis en la colaboración en tiempo real.
FIGMA
•https://www.figma.com/
Figma empezó ofrecer un programa de invitaciones únicas
gratis el 3 de diciembre de 2015.
Esta vio su primera salida el 27 de septiembre de 2016.
El 22 de octubre de 2019, Figma lanzó Figma Comunidad,
permitiendo a los diseñadores publicar sus trabajos para
que otros los puedan ver y adaptar.

12. DISEÑO RESPONSIVE
Podemos adaptar nuestro contenidos en el
apartado de layout.
Consejos para el diseño responsive:
Hay que empezar diseñando nuestros
proyectos desde la interfaz más pequeña a
nuestra interfaz más grande.
Debemos tomar en cuenta la accesibilidad;
Una manera de hacerlo es usar componentes
más grandes o llamativos al usuario.
(Componentes que se vean sin tener que
hacer zoom)
Elegir tamaños de fuente legibles. (mínimo
15px)
Evitar muchas animaciones en móvil.
(Enriquecen el diseño pero suelen pasar
costos al tardar en cargar tu página, no todos
los navegadores soportan animaciones)
Mobil: 417*926 Tablet : 768 * 1024

13. HERRAMIENTAS
AVANZADAS
Creación de formas
(Fusionar, Restas,
Diferencia y Suma)
Relación de
componentes -
Alineación
Creación de formas
irregulares -
Herramienta de
Pluma
Cómo importar
imágenes al artboard
Recortar imágenes en
ancho, alto o ambos
Cómo crear máscaras
de imágenes con
formas.

14. WIREFRAMES SKETCHING
Primer boceto a mano
Foco sin pensar en el diseño
Hacerlo siempre: cuesta poco, es muy eficaz.
Ventajas:
Colaborativo. Útil en reuniones de trabajo
Participan no diseñadores.
WIREFRAMES Lo-Fi (BAJA):
Esquema principal de un diseño
Estructura y jerarquía de textos e imágenes
aun sin definir su contenido.
Ventajas:
Rapidez de cambios ante primeras reiteradas
iteraciones.
Repositorio de decisiones previas de cada
fase del proyecto.

15. WIREFRAMES High-lo (ALTA):
Próximo al final sin la capa de diseño.
Recoge funcionalidades básicas.
Mínimas iteraciones.
Ventajas:
Definición y fiabilidad. Elementos y estructura
final.
Teste table. Primeras pruebas con usuarios.
MOCKUP:
Propuesta final con interacciones
reales.
Estilos diseño con color,
tipografía, sombras,
comportamientos…

16. MOODBOARD
Un Moodboard es, literalmente, un tablero de
inspiración. Así de simple pero de complejo a
la vez. Se trata de, gráfica y visualmente,
exponer y aterrizar un concepto, una idea o
definir una línea gráfica sobre la que trabajar.
Awwwards - Website Design Inspiration
https://www.awwwards.com/websites/
Las 10 tendencias en apps en 2021 | proun Madrid - Asturias
https://www.proun.es/blog/tendencias-en-diseno-de-aplicaciones-moviles/
https://www.uxdesigninstitute.com/blog/best-prototyping-tools-for-ux-designers/
Top 7 UX Trends to Watch in 2021. Introduction | by Lollypop Design Studio | UX Planet
https://uxplanet.org/top-7-ux-trends-to-watch-in-2021-4dab5bb2cf

17. DISEÑO ATOMICO
La metodología “Atomic Design”, o diseño
atómico en castellano, es un sistema de
trabajo que se basa en la creación de
elementos modulares sencillos para crear
estructuras de información mucho más
complejas, una teoría que creó el diseñador
digital Brad Frost.
A Frost se le ocurrió utilizar el modelo atómico
para transmitir la idea de que, tanto en el
diseño como en el desarrollo web, se debe
trabajar desde los elementos particulares
hacia los generales, creando así, todo un
universo de átomos, moléculas, organismos y
sistema.

18. Balsamiq Studios es un ISV fundado en
marzo de 2008 por Peldi Guilizzoni, un
ex ingeniero de software sénior de Adobe.
Balsamiq Wireframes es una aplicación de
creación de estructura de alambre de sitio
web de interfaz gráfica de usuario . Permite al
diseñador organizar widgets preconstruidos
utilizando un editor WYSIWYG de arrastrar y
soltar . La aplicación se ofrece en una versión
de escritorio , así como un complemento para
Google Drive , Confluence y JIRA.
BALSAMIQ
•https://balsamiq.com/
La herramienta de maquetas Balsamiq basada en la web se
lanzó en junio de 2008. Balsamiq tiene 33 empleados. En
2011, Balsamiq logró casi $5 millones de dólares en
ventas, y $6,4 millones de dólares en 2015

19. 19

20. InVision es una plataforma de diseño para
desarrollo con herramientas y funciones
integradas que permiten a los individuos y
equipos crear prototipos móviles y web de alta
fidelidad, colaborar en tiempo real y gestionar
sus proyectos con facilidad. Millones de
personas utilizan InVision para crear
prototipos, revisar, refinar, gestionar y probar
productos web y móviles, todo sin una sola
línea de código.
INVISION
•https://www.invisionapp.com

21. 21