
Del código al píxel:
Interfaces de Usuario
¡Hola!

Diseñador gráfico
Cartelería

Portadas

Portadas

Discos/Vinilos

2014
Desarrollo de aplicaciones web
¿Por qué?
Hoy
¿De qué se va a hablar?
¿De qué se va a hablar?
Historia de la interfaz
¿Cómo se pueden construir?
Herramientas de creación
Creando una interfaz
¿De qué no se va a hablar?
Código
Experiencia de Usuario*
No de manera directa
Todo el proceso completo
Cómo seguir la presentación
slides.com/ardillan/interfaces-de-usuario/live#
¿Interfaz?
Según la DRAE
Del ingl. interface 'superficie de contacto'.
1. f. Conexión o frontera común entre dos aparatos o sistemas independientes.
2. f. Inform. Conexión, física o lógica, entre una computadora y el usuario, un dispositivo periférico o un enlace de comunicaciones.
Radares

Primeras interfaces
Sketchpad
Ivan Sutherland

Primeras interfaces
Sketchpad
Ivan Sutherland


Primeras interfaces
Sketchpad
Ivan Sutherland
Primeras interfaces
Xerox Alto y Xerox Start
Xerox PARC
Metáfora de escritorio
Interfaz gráfica
Uso del ratón
Primeras interfaces
Primeras interfaces
Metáfora de escritorio


Interfaz gráfica

Primeras interfaces
Ratón

Primeras interfaces
Primeras interfaces
It's Ok, we're only humans
Xerox Alto
Xerox Alto

Primeras interfaces
1984
Primeras interfaces

Macintosh
¿Qué tenía de particular?
Primeras interfaces
Metáfora de escritorio avanzada



¿Qué tenía de particular?
Primeras interfaces
¡Fuentes!

¿Qué tenía de particular?
Primeras interfaces
Iconografía de Susan Kare



Vamos a dar un salto en el tiempo

Más sistemas



Más sistemas




Más sistemas



Hoy
2007 - Adelante
Cambio de paradigma
Internet
Nuevas tecnologías
Internet
Acceso universal
Cualquiera puede usarlo. No hace falta ser experto
Inmediatez
Aquí, ahora
Portabilidad
Se pueden conectar diferentes dispositivos
Cambio de paradigma
De 21" pasamos a 4"
La información y la forma de interactuar cambiar con el smartphone
El puntero se convierte en nuestro dedo índice
Cualquiera puede usarlo
Nuevas tecnologías
Nuevos lenguajes que permiten nuevas maneras
de mostrar la información.
Las animaciones, por ejemplo, hacen más inversiva la experiencia.
Integración de perfiles
Un diseñador se puede involucrar más en el proceso.
Coge fuerza la figura de diseñador de UI - UX
Facilita el campo de juego
Ahora imaginar es más fácil
Evolución de escritorio







Algunos ejemplos de
evolución web en escritorio






Algunos ejemplos de
evolución



Hay que tener claro
Hay varias formas
Solución gráfica ante un problema
Tiene que ser amigable
No se trata tanto de cómo se ve,
sino de cómo funciona
Cómo puede construirse
Hay que tenerlo claro
La información es el todo
Cómo puede construirse
Tipografías
Claridad en el discurso
2 fuentes son suficientes

Tipografías
Claridad en el discurso
El peso define la importancia

Tipografías
Claridad en el discurso
Las fuentes han de estar bien formadas
Helvética es una fuente para imprentas, no para webs




Iconografía
Claridad en el discurso
Unidad mínima de expresión
Ha de hablar por sí mismo

Iconografía
Claridad en el discurso
Los estados
Nos indican situación



Iconografía
Claridad en el discurso
KISS
Keep it simple, stupid!


Colores
Claridad en el discurso
Coherencia del color

Colores
Claridad en el discurso
Coherencia del color
Que no duela

Colores
Claridad en el discurso
Coherencia del color
En su justa medida

Rejilla
Claridad en el discurso
Establecer orden en el caos
El peso de los elementos ayuda a definir la rejilla



Llorando sangre
Claridad en el discurso






Proceso
Papel y boli para un prototipo rápido
Prototipo de baja fidelidad
Prototipo final
Herramientas
Definición de tecnologías
Papel y boli
Como toda la vida
Herramientas


Baja fidelidad
Nos ayudan a agilizar el proceso
Herramientas

Tecnologías
Nos ayudan a agilizar el proceso
Herramientas





Alta fidelidad
Da una imagen cercana a la realidad
Herramientas



Software
Sketch App
Affinity Designer
Adobe XD
Herramientas
¿Photoshop / Illustrator?


Aplicación de eventos
Aplicación web
Enfocada a dispositivos móviles
Sin framework, rejilla personalizada
Creando una interfaz