Diseño gráfico

para internet

O como yo lo llamo... Diseño UI/UX

Santiago Ardila

Software Developer

UI Designer

¿QUÍEN SOY?

12 Años de experiencia en Diseño gráfico
5 años de experiencia en UI/UX y Desarrollo de software
2 años y 6 meses como docente en Artes y Letras

¿Qué aprenderemos en el camino?

ANALIZAR, IDEAR

Y DEFINIR

Desde la idea principal de nuestro proyecto o componentes hasta el análisis de nuestros usuarios

DISEÑAR

Utilizaremos Figma para generar nuestro primer acercamiento a nuestra interfaz final.

EVALUAR

Testear nuestro prototipo con usuarios reales para extraer conclusiones de optimización

BASES DE MAQUETACIÓN WEB

En base a nuestro proyecto finalizado veremos conceptos básicos de maquetación (html y css), pasaremos nuestro diseño a un componente real

UI / UX

Conversemos...

¿Has escuchado estos términos?

HEADER

FOOTER

INPUT

HOVER

FORMULARIO

BOTÓN

SLIDER

SELECT

ACCORDION

MODAL

TABS

Comencemos...

¿Qué significa UI?

User Interfaces Design

(Diseño de interfaces de usuario)

UI se refiere a todo con lo que los usuarios interactúan de forma directa (la capa externa o visual de un producto digital). Es todo lo que vemos y tocamos en una página web, en una aplicación o un dispositivo.

¿QUÉ ES LA USABILIDAD?

Jakob Nielsen, considerado el padre de la usabilidad, la definió como el atributo de calidad de un producto que se refiere sencillamente a su facilidad de uso.

Implica el grado en el que el usuario puede explotar o aprovechar la utilidad de un producto.

UI + USABILIDAD

La interfaz tiene que ser clara y debe transmitir los mensajes de manera simple y fácil.

Por este motivo, la usabilidad debe

de ir de la mano con el UI.

2. ¿Qué es UX?

User Experience

(Experiencia de usuario)

Es una disciplina que a través de procesos se encarga de crear un producto o servicio que agrega valor a los usuarios.

Hacer que el usuario de un producto tenga una experiencia significativa y relevante.

Fácil, intuitivo y que aporte valor

USUARIOS FELICES

3. Diferencias

entre UI y UX

"UX se centra en el viaje del usuario para resolver un problema, en cambio la interfaz de usuario (UI) se centra en cómo se ven y funcionan las superficies de un producto"

- Ken Norton, Líder tecnológico de Goole

Pregunta pregunta...

¿El diseño de la interfaz de usuario es más importante que la experiencia de usuario?

"Algo que se ve muy bien pero que es difícil de usar es un ejemplo de una gran interfaz de usuario y una mala experiencia de usuario. Si bien algo muy útil que se ve terrible es un ejemplo de una gran experiencia de usuario y una interfaz muy pobre"

El caso del botón de los 300 millones de dólares

Veamos un ejemplo real...

CONOCIMIENTOS BÁSICOS DE UI

1. Psicología cognitiva:

Estudia cómo los seres humanos obtenemos y procesamos la información y a partir de ese procesamiento formamos una experiencia para saber cómo tenemos que actuar.

La ley de Hick-Hyman, o ley de Hick, explica que el tiempo que tardamos en tomar una decisión se ve directamente afectado por el número de opciones que tenemos.

Lógicamente, aumentar el número de opciones aumentará el tiempo de decisión de los usuarios.

2. Empatía:

Como diseñadores UI/UX, nuestra principal responsabilidad es comprender profundamente a los usuarios y sus necesidades. La empatía nos permite ponernos en el lugar del usuario, entender sus emociones, frustraciones y expectativas al interactuar con un producto.

Esta comprensión nos guía en cada decisión de diseño, asegurando que lo que creamos no solo sea funcional, sino también relevante y significativo para quienes lo usan.

3. Buen comunicador visual:

A la hora de crear una interfaz visual, vamos a diseñar los elementos o componentes que el usuario va ver en pantalla, los cuales van a guiar y facilitar el manejo del producto y cómo usarlo.

Es por eso que debemos asegurarnos de que cada elemento visual tenga un propósito claro y esté alineado con los objetivos de la experiencia de usuario. Los colores, las tipografías, los iconos, y los espacios deben trabajar en conjunto para comunicar de manera efectiva y sin generar confusión.

4. Tener buena línea gráfica:

No se logra una buena línea gráfica de la noche a la mañana, esto es un constante aprendizaje a medida que se van desarrollando interfaces.

El mejor consejo es practicar mucho y estar estudiando las tendencias actuales de diseño.

"La práctica va puliendo al que lo intenta"

5. La curiosidad:

Tenemos que ser curiosos, porque al ser curiosos potencia la observación de lo que sucede al nuestro alrededor, nos lleva a preguntarnos cuáles son las necesidades o frustraciones del usuario.

¿El qué? ¿El cómo? ¿El dónde? ¿El cuando? ¿El por qué?

CONOCIMIENTOS DE ELEMENTOS BÁSICOS DE UI

GUIDELINES DEL SISTEMA OPERATIVO

Las guías de diseño son pautas o normativas generales para el diseño de interfaces.

Estos lineamientos sirven para asegurar una coherencia visual entre la interfaz a diseñar y la plataforma en la que será implementada.

HUMAN INTERFACE DESIGN (APPLE)

MATERIAL DESIGN (ANDROID)

ESCALABLE

Debe funcionar y verse correctamente en tamaños grandes y reducidos

SIMPLE

Los usuarios no deben esforzarse en reconocerlo

CONSISTENTE

Mantiene el mismo estilo y colores que la aplicación misma

ICON DESIGN

UI KIT

Es un archivo/documento que incluye varios elementos diseñados (botones, iconos, tablas, formularios, etc).

Estos elementos puedes trasladarse fácilmente a un proyecto generando una coherencia visual debido a su aplicación fiel en las pantallas.

Nos ayuda a definir cómo será la morfología de nuestros componentes.

SISTEMA DE COLOR

Definir por lo menos tres colores:

Primario
Secundario
Acento

SISTEMA DE ICONOS

Definir cuáles serán los iconos a utilizar según sus estados

Activo
Inactivo

TIPOGRAFÍA

Definir la familia y variables tipográficas que se utilizarán para al menos, las jerarquías principales:

Títulos
Párrafos
Botones

COMPONENTES

Definir cada uno de los elementos que se usarán (Top bars, botones, formularios, tarjetas, controles, etc)

BOTONES

Definir los botones (tener presente el sistema operativo elegido)

Principal
Secundario
Fantasma

Activo
Inactivo
Presionado

¿Conoces la estructura básica de una página web?

EJERCICIO PRÁCTICO

Análisis UI/UX de una página web

drudgereport.com

bbc.com/news

ryanair.com

despegar.com.co