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

Made with Slides.com