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
Interfaces de usuario
By Adrián
Interfaces de usuario
Presentación para Coders Cantabria.