Certamen que reconoce e impulsa la producción fotográfica en México, y permite conocer la escena fotográfica contemporánea en el contexto nacional a través de una muestra, una publicación y Premios de Adquisición.

1. INTRODUCCIONA UI Y UX
DCG. EDGAR TORRES
Docente

2. 2
TEMA 1

4. La experiencia de usuario, o UX por 'User
Experience', como disciplina, se aplicó
tradicionalmente a los sistemas
informáticos y en particular al diseño de
páginas web pero, hoy, se ve ampliada a
otros campos del diseño. La razón es que,
una vez que tomamos como una
«experiencia» casi cualquier producto o
servicio, estos comienzan a «diseñarse»
buscando la máxima satisfacción del
consumidor, que pasa a ser un «usuario»
que transita por dichas experiencias.
¿QUE ES UX?
Objetivo: Crear experiencias relevantes.
Productos: Facil - Intuitivo - Valor = Usuarios felices.
User Centric: Entender necesidades y problemas y
como el producto resuleve estas areas.

5. DISEÑO CENTRADO EN EL HUMANO
Esta metodología encuentra soluciones a problemas de diseño y
administración tomando en cuenta el punto de vista del ser humano.
Típicamente, el diseño centrado en el humano observa al problema
dentro de su contexto, usando la perspectiva del ser humano para guiar
el proceso de diseño. Esto incluye la lluvia de ideas, conceptualización,
desarrollo e implementación de la solución. Empieza con el análisis de
las necesidades del usuario. Una vez que se identifican, se desarrollan
varias soluciones para satisfacerlas. Tras el proceso de desarrollo, se
hace la implementación de una de las soluciones. El diseño centrado en
el humano es un proceso iterativo.

6. Siguiendo con la referencia del ISO 9241-210:2010 tenemos lo
siguiente:
1. El diseño se basa en el entendimiento explícito de los usuarios,
tareas y ambientes.
2. Los usuarios están involucrados durante el diseño y desarrollo.
3. El diseño es impulsado y refinado por la evaluación centrada en el
usuario.
4. El proceso es iterativo.
5. El diseño contempla la experiencia completa del usuario.
6. El equipo de diseño incluye habilidades y perspectivas
multidisciplinarias.
DISEÑO CENTRADO EN EL HUMANO(DCH)

7. La norma ISO define un ciclo de desarrollo que comienza planificando el
proceso de Diseño Centrado en las Personas, y a partir de ahí pasa por
cuatro etapas principales:
Comprender y especificar el contexto de uso
Especificar los requisitos de usuario y negocio
Producir soluciones de diseño
Evaluar diseños frente a requisitos
CICLO DCH

8. Design thinking: Tim Brown, CEO de
IDEO, define design thinking como “un
enfoque de la innovación centrado en las
personas que se basa en el conjunto de
herramientas del diseñador para integrar
las necesidades de las personas, las
los
posibilidades de
requisitos para
la tecnología y
el éxito de negocio”.
Organiza las actividades en torno a tres
fases: Inspiración, Ideación e
Implementación.
OTROS ENFOQUES
https://designthinking.ideo.com/

9. Doble diamante: Un proceso de diseño
para la innovación desarrollado por el
Design Council
estructurado en
del Reino Unido y
4 pasos: Descubrir,
Definir, Desarrollar y Entregar.
OTROS ENFOQUES
Design sprint de Google Ventures: Se
trata de una aproximación rápida al
diseño que trata de abordar un
problema y darle solución a través
cuatro etapas: Ideación, Construcción,
Lanzamiento y Aprendizaje.
https://www.designcouncil.org.uk/news-opinion/what-framework-
innovation-design-councils-evolved-double-diamond
https://www.gv.com/sprint/

10. DESIGN THINKING
Esta metodología encuentra soluciones a problemas de diseño y
administración tomando en cuenta el punto de vista del ser humano.
Típicamente, el diseño centrado en el humano observa al problema
dentro de su contexto, usando la perspectiva del ser humano para guiar
el proceso de diseño. Esto incluye la lluvia de ideas, conceptualización,
desarrollo e implementación de la solución. Empieza con el análisis de
las necesidades del usuario. Una vez que se identifican, se desarrollan
varias soluciones para satisfacerlas. Tras el proceso de desarrollo, se
hace la implementación de una de las soluciones. El diseño centrado en
el humano es un proceso iterativo.

11. CONCEPTOS DE DISEÑO
La retícula es un elemento de composición que tiene toda publicación,
es una regla invisible para el espectador, pero visible para quien diseña.
Es una base sobre la que se puede trabajar y donde aplicar los
elementos que componen la publicación: columnas, páginas, etc.
11

12. Dentro del diseño de interfaces las retículas tienen varias partes. La
principal es la columna, que son alineaciones verticales donde podemos
acomodar nuestro contenido. El margen que es el espacio que existe al
borde de la página o alrededores y el contenido.
Los medianiles son separaciones entre las columnas.
CONCEPTOS DE DISEÑO
¿Por qué es importante utilizar
una retícula?
• Porque nos ayuda a tener
estructura en el
12
permite alinear
diseño y nos
de manera
ordenada nuestros elementos.
• Nos ayuda a tener claridad y
consistencia.
• Nos ayuda a poder trabajar en
diferentes dispositivos.

13. ¿Qué es la retícula en diseño web?
La retícula es una herramienta compositiva que tiene como finalidad
ajustar la posición de los diferentes elementos que componen la página
que estás diseñando. Gracias a su uso, dotarás a tus diseños de una
estructura interna armónica y visualmente agradable.
CONCEPTOS DE DISEÑO
Columnas
• Habitualmente, el número de columnas
suele ser de doce. Esto es debido a que
otorga una gran versatilidad compositiva
al archivo.
Padding
• El Padding (relleno) es una propiedad
que establece un espacio entre el borde
de la columna y el contenido englobado
dentro de esta.
Gutter Width
• El Gutter Width es el espacio que
dejamos entre las columnas.
13

14. CONCEPTOS DE DISEÑO: TIPOGRAFIAS
En diseño UX no podemos utilizar más de 2 tipografías, por lo que es
importante escoger la mejor para nuestro proyecto y de preferencia que
tenga una buena familia tipográfica. Como en este caso Roboto
14

15. Existen 2 tipos principales de tipografía SERIF y SANS SERIF.
Serif se caracteriza por tener tipografías con remates en sus finales y
que se usan para contextos de mucha formalidad.
Sans Serif se caracterizan por no tener remates, ser más geométricas y
modernas. Son las más usadas ya que cumplen muy bien su función de
comunicar modernidad y seriedad.
CONCEPTOS DE DISEÑO: TIPOGRAFIAS
15

16. 1. Se deben usar un máximo de 3 tipografías o 1 sola con una variedad
de estilos en su familia, también debemos asegurarnos que sean
legibles en todos los tamaños y tener en cuenta un ancho de
columna correcto, se recomienda máximo 66 caracteres por columna
y buen interlineado.
2. Un fórmula para obtener un interlineado adecuado es: utilizar 1 +
20%. Si tienes una tipografía del tamaño de 10pt el interlineado sería
de 12pt.
3. Contraste de color: hay que tener un buen contraste para que todo
sea, no bien, sino ¡perfectamente legible a la vista!
CONCEPTOS DE DISEÑO: RECOMENDACIONES
16

17. Gestalt: es una corriente psicológica que nació en Alemania a inicios del
siglo 20, y explica principios de cómo el humano percibe su entorno.
Principio de semejanza: Tendemos a agrupar elementos que son
similares aunque no estén juntos. Podemos relacionar forma, tamaño,
color.
Principio de proximidad: Si vemos elementos alineados de forma
ordenada y en un mismo espacio, los tendemos a ver como un grupo.
Principio de continuidad: Si vemos elementos dispuestos en línea o
curva de forma ordenada, los vamos a ver como si estuvieran
agrupados.
PRINCIPIOS DE GESTALT Y UX
17

18. Gestalt: es una corriente psicológica que nació en Alemania a inicios del
siglo 20, y explica principios de cómo el humano percibe su entorno.
Relación de figura-fondo: Tenemos una figura o el foco principal de la
atención del usuario, y el fondo que lo percibimos pero no tiene la misma
jerarquía o relevancia. Nos permite mostrar diferentes planos de
profundidad y ordenar de manera jerárquica el contenido.
Principio de cierre (o cerramiento): Cuando vemos una imagen
incompleta, nuestro cerebro automáticamente la llena. Nos ayuda en
iconografía.
PRINCIPIOS DE GESTALT Y UX
18

19. Ley de Fitt: Se parece al principio de proximidad. El tiempo que lleva
llegar a un objetivo tiene que ver con el tamaño y la distancia del mismo.
Por ejemplo: el boton Enviar de un formulario debe estar cerca de los
demás elementos, para que el usuario sepa qué acción debe realizar.
Ley de Hick: Cuantas más opciones tenga el usuario, más dificil le será
tomar una desición.
Ley de Jakob: A los usuarios les gusta usar cosas que ya saben usar y
que ya sabe como van a funcionar. Podemos lograrlo usando mejores
prácticas y estándares de la industria.
Ley de Miller: El ser humano puede recordar hasta 7 (±2) elementos en
su memoria a corto plazo.
LEYES UX
19

21. 1Visibilidad del estado del sistema: el usuario
debería saber que está pasando en cada
interacción con el producto (cargando,
guardando, errores). Debe recibir un feedback
del estado del producto.
2Relación producto y mundo real: El usuario
no debería tener dudas al momento de
interactuar con el sistema, se le debe brindar
toda la información para que pueda operar el
sistema.
3Control y libertad del usuario: El usuario
debe poder cancelar o salir de un proceso, sin
finalizarlo y sin compromisos.
PRINCIPIOS DE USABILIDAD Y HEURISTICA
21

22. 4Consistencia: En el diseño de los bloques
visuales del flujo del sistema, tratar de llevar un
patrón en todos los elementos del sistema.
5Prevención de errores: Proveer instrucciones
claras de lo que se espera que el usuario realice
dentro de nuestro producto.
6Reconocer antes de recordar: Entregar
información valiosa al usuario y ademas proveer
una forma en que el usuario pueda revisarla
cuando la necesite sin acudir a su memoria.
7Flexibilidad y eficiencia de uso: Entregar una
interfaz capaz de satisfacer a usuarios
avanzados y no avanzados. Permitir el uso del
producto sin necesidad de conocimientos
especializados.
PRINCIPIOS DE USABILIDAD Y HEURISTICA
22

23. 8- Diseño estético y minimalista: no saturar
de contenido al usuario, mostrar
únicamente el contenido relevante para
cada vista o cada acción que el usuario ha
decidido acceder. No poner elementos que
distraigan al usuario del objetivo de la vista.
9- ayudar al usuario a reconocer y corregir
errores: Dar información al usuario de lo
q u e e s t a g e n e r a n d o e r r o r e s o
inconsistencias en el sistema.
10- Ayuda y documentación: Detectar las
dudas mas comunes de los usuarios a la
hora de usar nuestro producto y proveer
información que pueda resolverlas de
manera inmediata.
PRINCIPIOS DE USABILIDAD Y HEURISTICA
23

24. 24

25. UX (User Experience) e UI (User Interface) son dos
términos que a menudo se usan indistintamente, pero
que en realidad significan cosas muy diferentes.
Entonces, ¿cuál es la diferencia entre los dos?

26. ¿Qué es UX?
Originalmente definido por un científico cognitivo llamado
Don Norman, el término "experiencia de usuario" se
definió antes del siglo XXI. Según él, “La experiencia del
usuario abarca todos los aspectos de la interacción del
usuario final con la empresa, sus servicios y sus
productos".
La UX se puede aplicar a cualquier cosa en la vida que
cree una experiencia. No tiene que ser algo digital como
una web o aplicación en móvil. Podría ser una máquina de
café, una visita al supermercado o un viaje en avión.

27. La parte de la "experiencia del usuario" se refiere a la
interacción entre el usuario y un producto o servicio. El
diseño de UX, entonces, considera todos los diferentes
elementos que dan forma a esta experiencia. Un
diseñador de UX piensa en cómo la experiencia hace
que el usuario se sienta y la facilidad para realizar las
tareas deseadas. También observan y realizan análisis
para ver cómo los usuarios realmente completan las
tareas.

28. Por ejemplo: ¿Cómo es de fácil el proceso de pago al
comprar online? , ¿Tu aplicación de banca online te
facilita la administración de tu dinero?
La clave del diseño de UX es crear experiencias fáciles,
eficientes, relevantes y agradables para el usuario.

29. ¿Qué es UI?
A diferencia de UX, el diseño de la interfaz de usuario es
un término estrictamente digital. Una interfaz de usuario
es el punto de interacción entre el usuario y un
dispositivo o producto digital, como la pantalla táctil de tu
móvil o el panel táctil que usas para seleccionar qué tipo
de café deseas de la máquina de café.
En relación con los sitios web y las aplicaciones, el
diseño de la interfaz de usuario considera el aspecto, la
sensación y la interactividad del producto.

30. Un diseñador de UI pensará en iconos y botones,
tipografía y esquemas de color, espaciado, imágenes y
diseño receptivo. También en elementos que aportan
feedback y dinamismo como los efectos de sonido o el
movimiento.

31. Diferencias entre UX y UI
Comparar UX y UI es casi como comparar manzanas y
naranjas. El diseño de la interfaz de usuario es creativo,
visual e innovador. Por otro lado, UX se basa más en
análisis, optimización, organización y estructura de los
datos a implementar. Sin uno u otro, el proyecto no se
puede completar. Los dos se complementan y son
necesarios para cualquier proyecto digital - nueva web,
desarrollo de aplicaciones móvil etc.

32. diferencias entre los dos:
El diseño de UX se trata de identificar y resolver los problemas de los
usuarios mientras el diseño de la interfaz de usuario se trata de crear
interfaces interactivas intuitivas y estéticamente agradables.
El diseño de UX suele ser lo primero en el proceso de desarrollo del
producto, seguido de la interfaz de usuario. El diseñador de UX traza los
esquemas básicos del viaje del usuario; luego, el diseñador de la interfaz de
usuario lo completa con elementos visuales e interactivos.
La experiencia de usuario puede aplicarse a cualquier tipo de producto,
servicio o experiencia. La interfaz de usuario es específica para productos y
experiencias digitales.

33. Responsabilidades de un diseñador UX
Mejora la calidad de la interacción entre un usuario y un servicio, empresa o
producto.
Se centra en cómo se siente el usuario, lo que experimenta y facilita una
experiencia agradable.
Proporciona análisis de la competencia e investigación de usuarios.
Crea una estrategia para el producto.
Crea wireframes y prototipos.
Ejecuta el producto coordinándose con diseñadores y desarrolladores de
UI.
Realiza un seguimiento de los objetivos y de la integración para impulsar el
producto hasta su finalización.

34. Responsabilidades de un diseñador UI
Considera cada parte de los elementos visuales o interactivos que encontrará el
usuario.
Piensa en iconos, tipografía, colores, botones, imágenes e incluso sonido y
movimiento.
Guía al usuario a través del producto visualmente.
Proporciona análisis de clientes e investigación de diseño.
Crea una buena marca y desarrolla gráficos para contar una historia.
Asegura que el diseño tenga consonancia con la marca.
Crea prototipos de UI, así como interactividad y animación si corresponde.
Garantiza que el producto se adapte a todos los tamaños de pantalla y
dispositivos.
Implementa el producto con el desarrollador.