Diseño de interfaces gráficas en
entornos Virtuales
Escuela de Comunicaciones
Introducción al Diseño de Interfaz Gráfico de
Usuario (UI)
Introducción al Diseño de Interfaz Gráfico
de Usuario (UI)
Logro de Contenido
aprendizaje
Conoce la importancia del •s Fundamentos de Diseño UI.
diseño de experiencia de • Componentes UI.
usuario y el diseño de • Herramientas de Diseño de
interfaces gráficas. Web/App en actualidad.
• ¿Qué opción UI es la mejor?
• Reto User Inyerface.
Aprendemos
Diseño de interfaces gráficas en
entornos Virtuales Introducción
• ¿La siguiente pantalla es
visualmente atractiva?
• ¿Si el diseño es “bonito” el
producto es funcional?
Aprendemos
Introducción
Una interfaz puede ser visualmente
atractiva por la composición,
maquetación, paleta de colores,
tipografía, iconos o degrado, pero
eso no significa que sea funcional.
Aprendemos
Fundamentos de Diseño UI
• La interfaz de usuario o UI es el conjunto de
elementos de la pantalla que permiten al
usuario interactuar con una página web.
• Los colores, la tipografía, las imágenes son
algunos de los elementos con los que
trabaja el diseñador UI para hacer que un
producto sea atractivo.
• Pero de nada sirve tener un producto bonito
si no satisface las necesidades de los
usuarios para los que está pensado. Por
eso, UX y UI deben ir de la mano para
lograr un producto 100% pensado para
los clientes.
Aprendemos
Fundamentos de UI
• Veámoslo con un ejemplo. Piensa
en la bandeja de entrada de tu
correo electrónico. Todo lo que
ves es el trabajo de un diseñador
de UI.
• Ahora imagina que intentas abrir
un correo pero la página tarda
mucho o que no puedes
encontrar ese contacto tan
importante al que tienes que
escribir.
• Pues los encargados de que no te
desesperes en los procesos son
Aprendemos
Diseño de interfaces gráficas
en entornos Virtuales
Aprendemos
Componentes UI
• Según Usability.gov, los elementos
que generalmente se presentan en
una UI para un producto digital son:
• Controles de Input
• Componentes de Navegación
• Componentes de información
• Contenedores: acordeones
Aprendemos
Controles Input
• Dentro de los controles Input
tenemos:
• Botones, campos de texto,
checkboxes, radio buttons,
listas drop down, switches,
campos de fecha.
Aprendemos
Controles de Navegación
• Dentro de los controles Input
tenemos:
• breadcrumbs, sliders, formularios de
búsqueda, paginación, sliders, tags,
iconos
Aprendemos
Controles de
contenido:
Acordeones
Aprendemos
Herramientas de Diseño de Web/App en actualidad
Sketch Figma Adobe XD
Aprendemos
¿Qué opción UI es la mejor?
• La respuesta correcta es la B,
nuestro producto digital
deberá de “hablar” el mismo
idioma que los usuarios.
Aprendemos
¿Qué opción UI es la mejor?
Aprendemos
Diseño UX y UI
• UX (Experiencia de usuario) es aquello
que una persona percibe al interactuar
con un producto o servicio.
• UI (Interfaz del Usuario) es la vista que
permite a un usuario interactuar de
manera efectiva con un sistema.
• UX es lo qué te hace sentir una marca o
producto al momento de interactuar con
él, mientras que UI es una capa visual de
colores, texturas, iconos, tipografía,
formas y elementos.
Actividad de aprendizaje
• Ingresa a https://userinyerface.com/
• El reto User Inyerface pondrá a prueba tus
habilidades de observación y de diseño de
interfaces de usuario.
• Consta de 4 niveles y lo que debes de hacer
es cumplir la tarea que se te asigna.
• La página está llena de malas prácticas de
diseño UI y opciones ocultas, lo que te puede
terminar confundiendo.
• Completa todos los niveles y demuestra que
puedes superar los Bad UI.
• Realiza un screenshoot de la última pantalla.
• Subirlo a la plataforma.
• ¡Tú puedes!
Gracias
