UX

Diseño Gráfico y de Interfases

[Link] Carpio Farfan

Que es el diseño UX
 Qué es UX Designer?

Los diseñadores de experiencia de usuario (UX) son profesionales que crean

experiencias digitales significativas y centradas en el usuario. Utilizan principios de
diseño, psicología y metodologías de investigación para garantizar que los productos y
servicios sean fáciles de usar, visualmente atractivos y estén en línea con las expectativas
del usuario. Los diseñadores comprenden las necesidades y los comportamientos de los
usuarios para crear interfaces intuitivas, optimizar los viajes y la satisfacción de los
usuarios e impulsar el éxito empresarial.
Competencias de un UX Designer
Herramienta de planificación y priorización ágil.
• Story Mapping : Se utiliza principalmente en la gestión de productos y proyectos para organizar historias de usuario, planificar
funcionalidades, y visualizar el flujo de trabajo desde la perspectiva del usuario.

Herramientas de investigación
•Google Analytics: Para analizar el comportamiento de los usuarios en un sitio web.
•Hotjar: Proporciona mapas de calor y grabaciones de sesiones para comprender cómo interactúan los usuarios.
•UsabilityHub: Para realizar pruebas de usabilidad rápidas con usuarios reales.
•SurveyMonkey: Para crear y distribuir encuestas a los usuarios.

Herramientas de diseño
 Figma: Una plataforma de diseño colaborativa que permite crear wireframes, interfaces y prototipos.
 Sketch: Popular para diseñar interfaces de usuario en macOS.
 Adobe XD: Herramienta de diseño de experiencia de usuario que permite crear wireframes y prototipos interactivos.
 InVision: Para crear prototipos interactivos y colaborar en tiempo real.
 Herramientas de pruebas de usabilidad
 UserTesting: Plataforma para realizar pruebas de usabilidad remotas con usuarios reales.
 Lookback: Herramienta para pruebas de usabilidad en tiempo real con video y comentarios de usuarios.
 Optimal Workshop: Para realizar pruebas de arquitectura de la información como card sorting.

Herramientas de colaboración
 Miro: Un tablero digital para trabajar en equipo en lluvias de ideas, mapas de usuario, y flujos.
 Zeplin: Facilita la colaboración entre diseñadores y desarrolladores, proporcionando especificaciones de diseño.

Herramientas de gestión de proyectos

 Jira: Para la gestión de proyectos y seguimiento de tareas en equipos de desarrollo ágil.
 Trello: Un tablero visual que permite organizar tareas y colaborar con equipos.

Herramientas de creación de mapas de usuario y flujos

 FlowMapp: Para crear mapas de experiencia de usuario y definir flujos de usuario.
 Lucidchart: Herramienta de diagramación que permite crear flujos y diagramas de usuario.
Una competencia transversal es una habilidad o capacidad que es aplicable y valiosa en múltiples áreas
o contextos, tanto personales como profesionales. Estas competencias no están ligadas a un campo
específico del conocimiento, sino que se pueden usar en una amplia variedad de situaciones.

Ejemplos comunes de competencias transversales incluyen la comunicación efectiva, el trabajo en

equipo, el pensamiento crítico, la resolución de problemas, y la adaptabilidad.
Estas habilidades son valoradas en muchos sectores y son clave para el éxito en diferentes roles y
entornos. Por eso, muchas empresas y organizaciones buscan candidatos con competencias
transversales.
El Design Thinking es una metodología de innovación centrada en las personas, que busca resolver problemas de
manera creativa y colaborativa. Se basa en entender profundamente las necesidades de los usuarios para generar
soluciones innovadoras. Este enfoque se utiliza ampliamente en diseño de productos, servicios y procesos, pero también
es aplicable a otros ámbitos.

El proceso de Design Thinking suele seguir cinco fases principales:

[Link]: Comprender a fondo a los usuarios, sus necesidades, problemas y contexto.

[Link]: Sintetizar la información recolectada para identificar el problema clave o desafío que se necesita resolver.
[Link]: Generar un amplio rango de ideas y posibles soluciones sin restricciones, fomentando la creatividad.
[Link]: Crear versiones simples o modelos de las soluciones para probarlas rápidamente.
[Link]: Probar los prototipos con los usuarios, obtener retroalimentación y realizar ajustes según sea necesario.

El Design Thinking fomenta la experimentación, la colaboración interdisciplinaria y el enfoque iterativo para llegar a
soluciones innovadoras.
 Qué es UI Designer?
Crea interfases de productos digitales atractivas,intuiivas y accesibles para los [Link] esto
plantea la linea grafica del Proyecto,estandariza colores,menús y además genera las animaciones
de interaccion con cada elemento de la plataforma
El profesional realiza el diseño de la interfaz de usuario basándose en la investigación del Diseñador
UX. Para ello, utiliza sus conocimientos en arquitectura de la información, creación de línea gráfica y
usabilidad. Así logra satisfacer las necesidades de los usuarios.
Este cargo trabaja de la mano con el diseñador UX. Pertenece al equipo de producto y responde
directamente al Product Manager.
Las empresas que no cuentan con este profesional presentan errores en la funcionalidad de su
interfaz grá[Link] puede afectar la navegación de los usuarios y provocar abandonos dentro el
sitio. Lo cual, traería como consecuencia una bajo captación de leads.
[Link]

Las 6 habilidades requeridas para el cargo de Diseñador UI son:

1. Conocimiento en diseño.
2. Conocimiento en usabilidad.
3. Conocimiento en arquitectura de la información.
4. Conocimiento en diseño responsivo.
5. Conocimiento en prototipado.
6. Conocimiento en ciencias del comportamiento
Terminologia-Conceptos
1. Wireframe (prototipo baja fidelidad)

Un wireframe o prototipo no es más que un boceto donde se representa visualmente, de una forma muy sencilla
y esquemática la estructura de una página web.
El objetivo de estos es definir el contenido y la posición de los diversos bloques de tu web. Esto incluye menús de
navegación, bloques de contenido, etc… Además, te permite como interactuarán estos elementos entre sí.
En los wireframes no se utilizan ni colores, ni tipografías ni cualquier elemento gráfico. Lo importante es
centrarse en la funcionalidad del sitio y la experiencia del usuario. La prioridad son los contenidos de la web.
Al ser representaciones tan simples, te permiten crear múltiples versiones de un mismo proyecto de una forma
rápida, así como aplicar cambios o nuevas ideas que aparezcan a posteriori. Lo importante es tener clara la
estructura de la web o aplicación antes de empezar con el HTML y el CSS para comprobar que no haya fallos
importantes de base que luego te podrían suponer muchas horas de trabajo subsanar.
Wireframe (prototipo Alta fidelidad)
Sketch es una herramienta simple y completamente basada en vectores para diseñar la interfaz de usuario y la
experiencia de usuario de aplicaciones móviles y sitios web. Fue desarrollado por Bohemian Coding teniendo en cuenta
las necesidades de los diseñadores digitales. Los diseñadores lo utilizan principalmente para crear sitios web e interfaces
de usuario para la plataforma móvil, así como para la plataforma de escritorio
Adobe XD :Esta herramienta te permite diseñar interfaces digitales para aplicaciones
móviles,PC o Mac, o sitios web. Crear una imagen preliminar de la interfaz de algún
proyecto en el que estés trabajando es mucho más fácil que con otras
herramientas.
Una de las ventajas es que te ayuda a ahorrar tiempo, ya que la imagen preliminar te
da la oportunidad de hacer cambios rápidos, en caso de ser necesarios, antes de
llegar a la etapa de programación.
Con Adobe XD puedes crear prototipos interactivos que simulan la navegación real en
tu proyecto,lo que significa que puedes presentarle a tus clientes un trabajo mucho
más tangibledel flujo de navegación del usuario. Así será más sencillo identificar los
aspectos quedeben corregirse antes de la etapa de desarrollo y programación
Marvel :Es una excelente herramienta online que nos va a permitir crear prototipos de aplicaciones móviles y
proyectos web. En este tutorial vamos a ver cómo podemos usar Marvel por primera vez, creando un sencillo
prototipo de juego móvil y así poder mostrar cómo sería el proceso de navegación a través de las diferentes
pantallas y opciones disponibles.

Características
Algunas de las características destacadas que podemos encontrar en Marvel son:
• Sincronización con Dropbox. Por ejemplo, si estamos trabajando en Photoshop y guardamos los cambios, si
tenemos el archivo en Dropbox,nuestro prototipo se actualizaría automáticamente en tiempo real.
• Posibilidad de añadir bocetos desde la aplicación móvil de Marvel. Por si queremos empezar desde bocetos
hechos en papel.
• Soporte de múltiples tipos de transiciones y gestos.
• Posibilidad de crear equipos de trabajo ilimitados (imagina un equipo de trabajo para un cliente, un grupo de
compañeros para un hackday, etc.)
• Plantillas de diferentes dispositivos móviles para previsualizar los proyectos.
• Una interfaz muy cuidada y llena de detalles.
• Múltiples opciones de exportación y capacidades de compartir el prototipo
Figma : Es un programa que ofrece todas las herramientas necesarias para diseñar un proyecto. Sobre
todo es ideal para crear interfaces de usuario tanto para web como para móvil. También permite crear
prototipos, generar código para el traspaso (hand-off) e ilustrar, aunque para esto último no es la mejor
herramienta para ello.
Pero lo más potente que tiene Figma es que permite que varias personas puedan colaborar dentro del
mismo proyecto simultáneamente y a tiempo real.
Además, siempre se van guardando los cambios en el archivo de forma que los usuarios siempre verán
los últimos cambios sin la necesidad de estar siempre sincronizados o de enviarse documentos.
En definitiva, eso ayuda a que varios usuarios puedan trabajar, por ejemplo en el diseño de una app, de
forma remota y simultánea, comunicándose entre ellos y avanzando en el resultado
 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

Balsamic :Es un programa de escritorio, es decir, solo tienes que registrarte para poder empezar a utilizarlo sin
ningún tipo de descarga. Programado en Flex y AIR por lo que crea muy rápido Wireframes. Interfaz fácil de
usar Como se ha creado con AIR es instalable tanto en Windows como Linux y Mac OS [Link] te permite
escoger entre un montón de objetos prediseñados como: barras de estado, menús, barras de progreso, etc.
Además, te permite exportar el diseño que realizes en PNG, PDF e incluso al portapapeles. Permite incrustar tus
diseños en tu página web o en informes de errores. Puedes compartir tus diseños a través de un sistema muy
parecido a Dropbox. Balsamiq funciona como cualquier aplicación normal, te permite arrastrar, soltar, guardar
mockups en un archivo, copiar y pegar, deshacer, etc.
Para comenzar a utilizar esta herramienta, lo primero que hay que hacer es acceder a la página principal de
Balsamiq. Una vez en ella, registrarse con un email, contraseña y usuario. Cuando ya has realizado el paso
anterior, te llegará un email para confirmar la cuenta y una vez realizado esto, ya podrás empezar a utilizar la
herramienta.