Post on 09-Jan-2017
Mauricio Angulo S.Consultor Senior en Experiencia de Usuario
mauricio@uxnights.com@mauricioangulo
monterrey.uxnights.com
Lenguajes de diseño visual
Experiencia de Usuario
“Sentimientos, emociones y percepciones de una persona sobre un sistema o tecnología.”
“El diseño es demasiado importante para dejárselo a los diseñadores”
- Raymond Loewy
Desarrollo
DiseñoNegocio
Consistencia en el diseño
Una buena consistencia:
Reduce la fricción y la curva de aprendizaje
Aprovecha nuestra tendencia natural de encontrar patrones
Es crítica para la construcción de una marca
Ayuda a los usuarios a reconocer sus productos favoritos
Refuerza las experiencias positivas
Google | Proprietary & Confidential
Lenguajes Visuales
Material Design
Así se veía GMail hace algunos años...
Web de Escritorio Android Web Móvil
Google | Proprietary & Confidential
El “Proyecto Kennedy” tenía la intención de unificar el diseño de las aplicaciones de Google
Google | Proprietary & Confidential
El primer lenguaje visual para Android se llamó “Holo”
Google | Proprietary & Confidential
Gmail.com(Kennedy)
Gmail para Android(Holo)
...pero aún había inconsistencia entre plataformas
Google | Proprietary & Confidential
En 2014 un grupo de diseñadores en diversas áreas de Google buscaban arreglar este problema de consistencia y comenzaron a trabajar en un lenguaje visual que fuera multiplataforma y más allá de guías de estilo.
Querían crear un sistema de diseño que considera diseño, animación e interacción. Este sistema debería usarse no solo dentro de Google sino en toda la industria...
¿Cómo es Material Design?
google.com/design/spec
Superficies tangibles
Basado en diseño impreso
Animación con significado
Diseño adaptivo
Una metáfora material es la teoría unificada del espacio racionalizado y de un sistema en movimiento. El material está bajado a una realidad táctil, inspirada por el estudio del papel y la tinta, pero abierto a la imaginación y a la magia.
Los fundamentos de la luz, las superficies y el movimiento son la clave para definir cómo es que los objetos se mueven, interactúan y existen en un espacio en relación con ellos mismos.
La iluminación realista muestra divisiones y huecos en el espacio y señala las partes móviles.
El material es la metáfora
Los elementos básicos del diseño impreso - tipografía, rejillas, espacio, escala, color y el uso de imágenes - guían los tratamientos visuales. Estos elementos hacen más que satisfacer la vista y crean jerarquía, significado y enfoque.
Las elecciones intencionales de color, imágenes que llenan las superficies, textos de gran tamaño y uso deliberado de espacio negativo crean una interfase gráfica con experiencias de usuario inmersivas.
Es atrevido, gráfico e intencional
La animación respeta y refuerza al usuario como el generador de movimiento. Las acciones principales del usuario son puntos de inflexión que inician movimiento, transformando el diseño completo.
La animación tiene significado y es apropiada, funcionando para enfocar la atención y mantener la continuidad. La retroalimentación es sutil pero clara y las transiciones son eficientes y coherentes.
La animación proveé significado
Diseño adaptivo
Imágenes y diseñoLas imágenes deberían usarse como algo más que solo decoración, porque son una herramienta poderosa para ayudarte a comunicar y a diferenciar tus productos.
Las imágenes atrevidas, visuales e intencionales te ayudarán a atrapar la atención de tus usuarios.
La paleta de color viene con colores primarios y llena el espectro para crear una paleta usable y completa para Android, Web y iOS.
Paleta de colores
Limita tu selección de colores eligiendo tres tonos de tu paleta primaria y un color de contraste de tu paleta secundaria.
Ejemplo de paleta primaria Ejemplo de paleta secundaria
Paleta de colores
Casos de estudio
Los controles de drawer y las pestañas de navegación ayudan a sus usuarios a moverse fácilmente entre pantallas.
Los cambios en Pocket han ayudado a conseguir sus más de 170,000 calificaciones de 5 estrellas en la Play store, y le ayudó a ganar el 2015 Premio de Material Design 2015 por Diseño Adaptivo.
TrelloTrello utiliza componentes de Material Design como el FAB, que ayuda a los usuarios a crear tableros y fomenta que colaboren entre ellos.
Desde su cambio a Material Design en 2015, Trello ha aumentado 10% el número de inicio de sesión por usuario por semana, y cada sesión aumentó un 42% la creación de nuevos tableros y 63% más usuarios se agregaron a los tableros.
Cómo implementar un lenguaje visual
<!-- Usa el elemento -->
<paper-card heading="Título">
<div class="card-content">
Contenido
</div>
<div class="card-actions">
<paper-button>Acción</paper-button>
<paper-button>Otra acción</paper-button>
</div>
</paper-card>
http://patternlab.io
El segundo jueves de cada mes a las 19:00 hrs:
- Un tema diferente por mes- Tres expertos por tema- ¡Cerveza gratis!
Más información en monterrey.uxnights.com
Mauricio Angulo S.Consultor Senior en Experiencia de Usuario
mauricio@uxnights.com@mauricioangulo
monterrey.uxnights.com
¡Gracias!