the surface plane

Rodolfo Álvarez NievesClaudio Medina PastranaNaldy Josephine SolanoAl ine Trejo García

THE SURFACE PLANE

The Surface Plane se trata de diseño sensorial y la presentación de las medidas lógicas que forman el esqueleto del producto.

Con la información de diseño, se determina la forma en que se deben agrupar y disponer los elementos de información de la página, a través de la atención al diseño visual, podemos determinar la cantidad que el acuerdo debe ser presenta visualmente.

DEFINING THE SURFACE

La determinación de como todo lo relacionado con nuestro diseño se manifiestan a los sentidos de la gente.

Visión Audición

Tacto Olfato Gusto

MAKING SENSE OF SENSES

SMELL AND TASTE

TOUCH

A excepción de los alimentos, perfumes, o productos perfumados, el olfato y el gusto son rara vez las consideraciones para los diseñadores de la experiencia del usuario. Estos olores son los resultado de la elección de los materiales en la construcción del producto, no las decisiones de los diseñadores.

La experiencia de tocar un producto físico se encuentra dentro del ámbito del diseño industrial. Los diseñadores industriales se ocupan principalmente de la participación física del usuario con un producto. Esto implica elementos de diseño de la interfaz y la interacción, pero también incluye puramente sensorial consideraciones, tales como la forma de un dispositivo, los las texturas usadas y los materiales empleados.

HEARINGEl sonido juega un papel en la experiencia de

muchos tipos de productos. El sonido puede ser utilizado no sólo para informar al usuario, pero para imbuir una producto con un sentido de la personalidad.

VISION

Esta es el área donde los diseñadores de experiencia de usuario tienen la mayor sofisticación, ya que el diseño visual juega un papel en casi todos los tipo de producto que hay.

Todo el mundo tiene un sentido diferente de la estética, en lugar de evaluar las ideas de diseño visual solamente en términos de lo que parece estéticamente agradable, debemos enfocar nuestra atención en que bien funcionan.

FOLLOW THE EYE

¿A dónde va el ojo primero?

¿Qué elementos del diseño atraen la atención del usuario?

¿Los atraen los objetivos estratégicos?

¿Algo mas jala la atención del usuario?

PREGUNTAS IMPORTANTES

Existe equipo avanzado para ir siguiendo el movimiento del ojo detalladamente.

Puede consultar a personas que lo vean.

Puede hacerlo uno mismo.

MÉTODOS

Un flujo suave de lo que se esta viendo.

Se da un tour de las posibilidades sin dar demasiado detalle.

DISEÑO EXITOSO

CONTRAST AND UNIFORMITY

Es vital para atraer la atención del usuario.

Ayuda a entender las relaciones entre elementos de navegación.

Comunica grupos conceptuales dentro del diseño de la información.

CONTRASTE

Te sirve para que el usuario le ponga atención a cosas como mensajes de error.

Te sirve para guiar a usuarios a objetivos en particular

Hace que el usuario piense en que estos contrastes son intencionales.

UTILIDAD

Esta le da a los usuarios la información que necesitan saber sin saturarlos.

Mantener la uniformidad de forma permite al usuario relacionar elementos como botones.

UNIFORMIDAD

Estas ayudan a la uniformidad de una página.

Pueden fallar debido a la diversidad de tamaños y resoluciones.

Se debe de reconocer cuando es necesario volver a los fundamentos del diseño visual.

USO DE GUÍAS

INTERNAL &

EXTERNAL CONSISTENCY

Debido a la forma que los sitios web se han producido se han plagado de problemas de coherencia en el diseño visual. Estos problemas son de dos tipos: Problemas de consistencia

interna, en la que diferentes partes del producto reflejar diferentes enfoques de diseño.

Problemas de consistencia externa, en el que el producto no refleja el mismo método de diseño utilizado en otros productos de la misma organización.

PROBLEMS

Las buenas soluciones se basan en una comprensión de la estructura del sitio. La clave consiste en identificar elementos recurrentes de diseño que aparecen en diferentes contextos a través de distintas interfaces, la navegación y la información son problemas de diseño en el producto.

SOLUTIONS

COLOR PALETTES

• El color es una forma eficaz de comunicar y dar sentido a una identidad de marca.

• Los colores son parte de una paleta estándar, seleccionados por lo bien que se complementan, sin competir.

COLOR PALETTES

•La paleta de colores requiere una gama que se ajuste a los usos que tenga la empresa.–Colores

brillantes: Utilizados en primer plano, para elementos que han de llamar la atención. –Colores

apagados: Se utilizan para elementos de fondo, que no necesitan resaltar en la página.

•Para la creación de una paleta visual, es importante recurrir a elementos como el contraste y la uniformidad.

•Tener una amplia gama de colores a elegir nos proporciona un conjunto de herramientas para la toma de decisiones eficaces de diseño.

TYPOGRAPHY

La ti pografí a , es también importante para la identi dad de una marca; se han producido ti pos específi camente para ello.

Es un elemento efi caz para comunicar y dar mayor senti do a su identi dad a través del diseño visual ; al igual que el color.

TYPOGRAPHY

Cuerpo del texto: Elegir un ti pos simple, que evite el cansancio de nuestros ojos.

Elementos de texto más grande: Elegiremos ti pos de letra con más personalidad, que son apropiados. Debemos cuidar el no abrumar a nuestros usuarios con el desorden visual.

Ajustarnos a los Principios de Efi cacia : Usar diferentes esti los para indicar las diferencias en la información que

está comunicando. Proporcionar sufi ciente contraste entre los esti los para llamar la

atención del usuario, según sea necesario, sin sobrecargar el diseño.

DESIGN COMPS

• En el diseño visual, el desarrollo del wireframe será de gran ayuda; lo veremos a través de un comp.

• Un comp, es la visualización del producto final construido a partir de los componentes que han sido elegidos.

• Muestra cómo las piezas funcionan en conjunto para formar una cohesión general; pero también, si no lo hacen, muestra dónde se encuentra la ruptura y demuestra las limitaciones, que estarán sujetas a explicarse por una solución.

DESIGN COMPS

• El wireframe no responde a problemas de diseño visual, solo se centra en la estructura del esqueleto, permitiéndonos abordar a sus problemas.

“El diseño visual no tiene que coincidir con el wireframe exactamente, sólo tiene que dar cuenta de la importancia relativa y agrupación de elementos que se

presentan en el wireframe.”

WIREFRAMES

STYLE GUIDES

La documentación defi niti va de las decisiones de diseño que tomadas es el style guide.

Su objeti vo general, será el de proporcionar sufi cientes detalles como para ayudar a las personas a tomar decisiones inteligentes en el futuro.

STYLE GUIDES

• Define:– Aspectos del diseño visual, desde los generales hasta los

específicos.– Estándares globales que afectan a todas las partes del

producto, como las redes de diseño, paletas de colores, tipografía, normas de tratamiento logo.

–Normas específicas para una determinada sección o función de un producto.

• También es útil en la imposición de la consistencia del diseño a través de una organización descentralizada, de forma que se consiga que todas las personas vayan a la par de un conjunto unificado de estándares.

THANKS!