ESTETICA Y PERCEPCIÓNDiseño Gráfico de Interfaces y UXSergio Martínez @misterymotion#mejorandoUX

Las decisiones estéticas están justificadas por un entendimiento del propósito del producto.Separar que el tema del diseño es visual. El producto debe generar sentimientos y no solo es visual.

HULK => Estética vs Percepción.

El diseño debe tener un contexto. El diseño no es nada si no se tiene en cuenta la parte funcional.Estar alineados con el cliente. Lo que pensamos que era increíble y lo que el cliente quería ver.EL éxito del sitio web gira en torno a una sola cosa: Como los usuarios perciben.

Diseño WebNo es solo visual.Se enfoca en metas y objetivos.Demuestra beneficios.Fluye y se adapta. Evoluciona. Un sitio no es estático. Debe ir mejorando con el tiempo.

Estructura = Sabana de contenidoEsqueleto => Diseño de la informaciónDiseño Visual => Se compone de algunos entregables puntuales. "UX Professional": Todos los diseñadores Web deben ser profesionales en UX.

SiteMap. Se definen categorias y subcategorías. Definen que contenido va en la esructura.

Notas:Un producto es un conjunto de features que responden una necesidad, no necesariamente debe ser tangible.

Producto:es un conjunto de features, que permite llevar una tarea a cabo satisfacer una necesidad

Roles de Profesionales 4 tipos de roles que se encasillas UX

Diseño e Iteración. Persona que realiza prototipos, diagramas de flujo, etc Arquitecto de la información. Organiza de manera jerárquicos los contenidos. UI Designer. Diseñador Web. Conocimiento usabilidad, tipográfica y programa de

edición gráfica. Back end developer. HTML, .NET/ Java, SQLDataBase, Server.

El Diseño de la información: Ésta compuesto por wireframes . Prototipos o diseños. Diseño visual: Moodboards, styleguide, Diseño de InterfaceSe entregan 4 componentes:

Wireframes Moodboards styleguide Diseño de Interface

About Atomic DesignResumen de la estructura que se plantea en la web de los diferentes elementos:

http://patternlab.io/Átomos > Moléculas > Organismos > Plantillas > Páginas

Átomos: Elementos tales como labels, buttons, inputs, etc.

Moléculas: Conjunto de átomos (un input de búsqueda con su botón "send" y su label/título del input).

Organismos: Conjunto de moléculas como puede ser el header de una web compuesto por inputs (como el de búsqueda mencionado anteriormente) links de las secciones, logo, etc.

Plantillas: Estructura del contenido (tamaño de las imágenes o de las letras, colores de los elementos estipulados... .

Páginas: Son casos específicos de las plantillas que dan un aspecto del contenido representativo real para que el usuario tenga una idea exacta de lo que se verá.

Demo de la web como herramienta: http://demo.patternlab.io/

Wireframes y sistema de grillasImágenes se describen como un cuadro con XPrototipos de baja densidad. Hay de alta densidad. Al iniciar con Wireframes trabajar con diseño para saber cómo va a operar.

- Moodboards: Collage de imágenes, objectos, textos y todo tipo de elementos que sirvan de inspiración para un proyecto.

- Grillas: Distribución del contenido de una web en columnas, con un tamaño que tienen en común y que comparten entre ellas.

WireframesUn wireframe para un sitio web, también conocido como un esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web. El wireframe esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto. Usualmente este esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos

Los wireframes se enfocan en:.- Los tipos de información que será mostrada.- La cantidad de las funciones disponibles.- Las prioridades relativas de la información y las funciones.- Las reglas para mostrar ciertos tipos de información.- El efecto de los distintos escenarios en la pantalla

El wireframe del sitio web conecta la estructura conceptual, o arquitectura de la información, con la superficie, o diseño visual del sitio web. Los wireframes ayudan a establecer funcionalidad, y las relaciones entre las diferentes plantillas de pantallas de un sitio web.

Puedes ser:.- Baja fidelidad..- Media Fidelidad..- Alta fidelidad.

Al iniciar se realiza un ejercicio con la finalidad de poder captar la estructura del site CristalLab

TIPS: Siempre de deben realizar los bocetos para plasmar el concepto de la idea.

TIPS: Un boceto realizado a mano se conoce como wireframe de baja densidad o calidad.

TIPS: Evitar el uso de Lorem Ipsum, en su lugar se debe intentar colocar el contenido a partir de la sabana de contenido que se ha creado. En caso de no tener contenido optar por ubicar un contenido real y acorde al sitio que se está diseñando.

TIPS: Hay que tomar en cuenta la cantidad de contenido que se puede utilizar para saber como va a fluir el site. Esto ya que hay secciones que se ven bien con una cantidad de contenido, si se le coloca más es posible que no ea tan eficiente.

TIPS: Si se está empezando el proyecto tratar los wireframes como si fueran interfaces, simulando el tamaño de la tipografía y los elementos en general. Con eso tendremos una perspectiva mucho mas acertada del diseño que se esta realizando.

TIPS: Cuando se hace un Wireframe vale la pena identificar las secciones por colores.

TIPS: Se recomienda leer las leyes de Gestab para tener una mejor idea de como deben fluir los elementos.

TIPS: El wireframe es un entregable de la sección de esqueleto en cuanto al sistema plateado por Garrett.

Moodboards

El moodboard es una especie de collage que se realiza con piezas visuales de diferentes soportes, tales como fotografías, recortes de revistas, muestras de colores, muestra de telas, frases, etc. Cualquier cosa que se pueda ver y represente el estilo o idea que el diseñador busca. En conjunto todas estas piezas crean una sola que muestra los rasgos distintivos de lo que se quiere crear, es muy útil tanto para mostrar a clientes la idea que se tiene pensada realizar, como para el propio diseñador para referenciarse.

TIPS: Cuando se esta diseñando el Moodboars en el Illustrator trate de tener a la mano los elementos que usara (Paleta de colores, Textos, etc).

Los moodboard son una genial manera para diseñadores gráficos de presentar el tema de la línea y la identidad de lo que se está creando, también es una forma para que el cliente pueda tener una idea prematura del resultado y el estilo del mismo. Por ejemplo, este cliente quiere una campaña que tenga un tono acogedor y amistoso, el diseñador puede armar un moodboard para mostrar cuáles serán las fuentes de inspiración o elementos que servirán para el trabajo a realizar.

TIPS: El Moodboard es un entregable de la sección de Diseño Visual en cuanto al sistema plateado por Garrett.

Guía de estilo

Una guía de estilo es una colección de elemento prediseñados gráficos y reglas que diseñadores o desarrolladores web deben seguir para asegurarse que partes separadas del sitio web sean consistentes y creen una experiencia cohesiva al final.

Es extremadamente importante cuando varios diseñadores están trabajando juntos en un sitio web grande o aplicaciones web para asegurarse que no interpreten mucho y que no cambien o ajusten los estilos basados en gustos personales. En el desarrollo, tener los elementos del sitio web definidos hace más fácil la labor de los desarrolladores web al momento de utilizar estos elementos. Además, es más fácil porque ellos sabrán qué elementos tienen que codificar y podrán ver exactamente lo que necesitan desde el comienzo.Para hacer el trabajo de los desarrolladores más fácil, es deber del diseñador incluir todas las posibles interacciones tales como desplazar, cliquear, visitar y otros estados para botones, títulos, link, etc.

TIPS: Entragarlo bien ensamblando a los desarrolladores evita confusión y perdida de tiempo ya que el desarrollador no tendrá que estar consultando constantemente al diseñador estos temas.

TIPS: El Moodboard es un entregable de la sección de Diseño Visual en cuanto al sistema plateado por Garrett.

_____________________________________________________________________

Sistema de grillas.

Una Retícula o Grilla es una herramienta de estructuración y organización del espacio y de los elementos que componen una pieza tipográfica. Toda retícula y grilla debe estar previamente decidida con un criterio claro. Esto es: en base a la idea general, se plantea la grilla y luego se la usa para diseñar. Permite obtener orden, legibilidad y funcionalidad. Una pieza tipográfica con una retícula o grilla de base es mucho más clara y armónica que una que no la tiene.

Hay varios sistemas de grillas y frameworks bajo las cuales podemos trabajar.

Las grilas se componen principalmente de 2 elementos: Las columnas y el espaciado que existe entre ellas.

Depende del sistema de columnas que se decida usar puede contar con diferentes características.

Podemos contrar con 3 tipos:

.- 12 Columnas.

.- 16 Columnas.

.- 24 Columnas.

TIPS: Depende del sistema de columnas seleccionado la información del site se puede percibir de manera más amplia o mas compacta

Sitios de Grillas: www.theguardian.com

Leyes de Gestalt .Ayuda como interactuar entre los elementos.

Visual Style Guide -Nike WE Portal Expandable Button Styles

www.yelp.com/styleguide