Contenidos teóricos
Sitio: Agencia de Aprendizaje a lo largo de la Vida Imprimido por: natalia rodriguez
Curso: CAC DISEÑO UX/UI 1c Día: viernes, 10 de marzo de 2023, 14:08
Libro: Contenidos teóricos
Tabla de contenidos
1. Introducción al diseño UX-UI
2. Características del diseñador
3. La retórica de la imagen
4. Diseño gráfico - Diseño UX
5. Imágenes en el diseño
6. En fotografía
7. En el diseño
8. La imagen
9. Las leyes de la Gestalt
1. Introducción al diseño UX-UI
Ejercicio Clase 1
Pensar cuales son las similitudes y diferencias entre:
Dibujo - Diseño - Arte - Ilustración
¿Qué es el Diseño?
El diseño es el proceso previo de configuración mental, «pre figuración», en la búsqueda de una solución en cualquier campo. Se aplica habitualmente en disciplinas que requieren creatividad.
El diseño involucra variadas dimensiones que van más allá del aspecto, la forma y el color, abarcando también la función de un objeto y su interacción con el usuario.
Durante el proceso se debe tener en cuenta además la funcionalidad, la operatividad, la eficiencia y la vida útil del objeto del diseño.
Comunicación visual
El Emisor se desdobla en dos protagonistas:
Aquel que crea el mensaje y necesita transmitirlo (cliente o marca)
El diseñador que interviene para hacer que dicho mensaje sea efectivo.
El receptor es el sujeto para quien está destinada la comunicación, un sector
de la sociedad o el público ideal.
EI significado es lo que se desea expresar, es el mensaje. ¿Qué se comunica?
El significante está siempre unido al significado pues la comunicación se produce en el cruce de
ambos. ¿Cómo se comunica?
Comunicación casual y comunicación intencional
En la comunicación casual quien es receptor interpreta “libremente” la imagen que está viendo.
En la comunicación intencional existe un emisor con la intención de que el receptor interprete un mensaje concreto.
2. Características del diseñador
Características del diseñador
Un diseñador es una persona que ha entrenado su creatividad para enfocarla hacia aspectos más pragmáticos, de manera que pueda ofrecer soluciones adaptadas al problema que enfrenta.
Utiliza un conjunto de saberes aplicables a diversos campos de trabajo, que se sirven de la geometría, la aritmética, la lógica, la ilustración, el mercadeo, la sociología o la informática para un proceso que, fundamentalmente, comprende en las
etapas que figuran a continuación:
Etapas
Observación y análisis. Ya que la necesidad del diseño surge de la cotidianidad del ser humano.
Planificación y proyección. Proponiendo un modo de solucionar la necesidad detectada.
Construcción y ejecución. Llevando a la realidad lo proyectado y sometiéndolo a la prueba de su funcionamiento.
El diseño como forma de comunicar
Es una disciplina dedicada a la producción de comunicaciones visuales orientadas a un público específico.
Se encarga de comunicar a través de medios visuales y como finalidad transmitir un mensaje específico despojado de rasgos personales.
El hecho de crear y cumplir con un propósito se centra en: la transformación de una realidad existente por una deseada.
Los diseños se basan en un mensaje concreto que se quiere transmitir y a partir de ello obtener una respuesta del público al que está dirigido. Estos afectan el conocimiento, las actitudes y el comportamiento de la gente.
Para poder crear estas piezas de comunicación, el mensaje se tiene que adecuar al grupo al que se está introduciendo. De esta forma se analiza ampliamente a quién irá encaminado el mensaje. ¿Qué piensa? ¿Qué hace? ¿Qué ve? ¿Qué siente? ¿En
qué cree?
En todo diseño debe haber correlación entre lo que se quiere transmitir y los elementos utilizados sin resignar su objetivo final sea cual sea.
"El diseñador de comunicación visual trabaja en la interpretación, el ordenamiento y la presentación visual de mensajes. Su sensibilidad para la forma debe ser paralela a su sensibilidad para el contenido". Frascara
Reglas del diseñador profesional
El diseñador es un intérprete que conforma mensajes producidos por otras personas.
El diseñador no adorna, es un proceso de creación visual con el propósito de comunicar un mensaje específico.
El diseño debe ser estético pero también funcional.
El diseñador maneja conceptos, códigos y estética para poder enviar mensajes fácilmente comprendidos y absorbidos por las audiencias a quienes se dirigen.
El diseño, por ética, debe tener como fin último mejorar y transformar el mundo donde vivimos.
El diseño forma parte de nuestra vida diaria, estamos rodeados de diseño por lo tanto debe ser cuidadoso.
3. La retórica de la imagen
La retórica de la imagen
La denotación, es el significado básico de una palabra, constante, universal, el que una palabra tiene para todos los conocedores de una lengua.
Por ejemplo: un cuenco, una bombilla, una infusión y yerba. Lo denotado sería lo real, lo objetivo y lo literal, en lo que está de acuerdo toda la comunidad lingüística, es decir el significado que le da el diccionario.
La connotación, son todas aquellas ideas y asociaciones que se despiertan a la hora de visualizar un mate.
por ejemplo: Argentinidad, charlas, reunión con amigos, campo, Pampa, etc.
Lo connotado son otros significados que podemos darle a la imagen.
Estas ideas o asociaciones a la imagen del mate van a depender de quién sea el observador. De su cultura, entorno, edad, lugar, educación y muchos factores más.
4. Diseño gráfico - Diseño UX
Diseño gráfico - Diseño Ux
El diseño gráfico se trata de la creación y proyección de objetos gráficos: ilustraciones, composiciones, logotipos, imágenes, tipografías, etc., atendiendo a aspectos estéticos, comunicacionales y simbólicos.
Esta rama del diseño tiene segmentos aplicados a diversos campos como: el diseño editorial, el diseño publicitario, el diseño corporativo, el diseño web y el diseño UX/UI.
El diseño de experiencia de usuario (UX) es una disciplina relativamente nueva que utiliza varias premisas y reglas tomadas del diseño gráfico, marketing, diseño industrial, etc.
Es una práctica que sirve para diseñar centrados en las necesidades de los usuarios. La experiencia de usuario es el conjunto de factores relativos a la interacción del usuario con un dispositivo, generando como resultado una percepción positiva o
negativa de esa experiencia y su marca.
Diseño UX facetas
El diseño de experiencia de usuario (UX) es un conjunto de metodologías, mindsets y procesos, orientados a diseñar un servicio o producto, teniendo en consideración las necesidades de los usuarios finales (y no de quien está desarrollando o
diseñado).
Las 7 facetas o factores que construyen la experiencia de usuario de Peter Morville:
Valioso - Útil - Deseable - Accesible - Creíble - Ubicable - Usable
Diseño UI
El diseño de interfaz de usuario (UI) refiere a todo aquello con lo que los usuarios interactúan de forma directa.
Se trata de lo que vemos y tocamos en una interfaz o un dispositivo, es aquello que permite interactuar con el producto o servicio.
“Un área híbrida, donde los límites entre diseño gráfico e industrial se diluyen”
Lev Manovich.
¿Qué es la Usabilidad?
“El atributo de calidad de un producto que se refiere sencillamente a su facilidad de uso.
Implica el grado en que el usuario puede explotar o aprovechar la utilidad de un producto.” Jakob Nielsen - Padre de la usabilidad.
Características
Facilidad de aprendizaje: ¿Cuán fácil es llevar a cabo las tareas la primera vez?
Eficiencia: Una vez que aprendieron el funcionamiento, ¿cuán rápido las realizan?
Cualidad de ser recordado: Si pasan un tiempo sin usarlo, ¿cuán fácil es que vuelvan a usarlo eficientemente?
Eficacia: ¿Cuántos errores comete el usuario? La gravedad del error, puede recuperarse fácilmente de esos errores?
Satisfacción: ¿Cuán agradable es usar el producto?
Diseño Centrado en el Usuario
El DCU comprende una serie de métodos y técnicas para analizar, diseñar y evaluar hardware y software (interface)
Tiene un enfoque de diseño cuyo proceso está orientado por la información acerca de quienes van a hacer uso del producto (usuarios)
Tener en cuenta: ¿Quién usará el sistema? y qué tareas llevará a cabo con el mismo?
Un proceso iterativo (cíclico) en el cual diseño y evaluación se incorporan desde la fase inicial del proyecto y en todas las fases que veremos a continuación:
Fases
Análisis. Entendiendo a los usuarios y sus necesidades
Diseño. Proyecto una solución que satisfaga las necesidades
Validación. Compruebo el valor que estoy agregando a los usuarios
Experiencia casual y experiencia diseñada
En la experiencia casual o accidental es cuando vemos una comunicación que no tiene diseño aplicado, probablemente no fue hecha por un diseñador, y no tiene criterio visual.
Genera confusión y malestar en el usuario.
En la experiencia diseñada ningún detalle fue dejado al azar, hay coherencia en sus elementos, es intuitivo y claro para el usuario.
Genera satisfacción en el usuario.
5. Imágenes en el diseño
Ejercicio Clase 2
¿Qué tienen en común las siguientes páginas web?
¿Por qué es importante?
El impacto de las imágenes es vital tanto para el medio impreso como el virtual.
El usuario examina los detalles visibles, desde la imagen de la portada, el color, los títulos, la organización de la información, la línea gráfica (coherencia) y todo lo que a su juicio la hace sobresalir de otros textos o páginas web.
Las personas eligen empujados por lo que ven, la sensación que les produce y lo que les dicen los titulares. Si a primera vista el medio les atrae, lo adquirirán.
El diseño por tanto, es la llave de acceso para alcanzar las metas, de ahí la importancia de poseer una gráfica que destaque por sobre las demás.
Lo primero que elegimos es lo que más nos atrae visualmente.
En resumen: La primera impresión cuenta.
Ilustraciones o imágenes
Conforman todos los elementos gráficos que se transforman en iconos: fotos, pinturas, caricaturas, pictogramas, esquemas, gráficos, infografías y grabados.
Ayudan a generar un ritmo dinámico en la puesta en página y conectan el texto con dicha ilustración.
Son una forma de contenido que informa ya que brindan testimonios de forma gráfica.
Con las fotografías se aporta una información que con el texto muchas veces es difícil de comunicar o en otros casos al lector le facilita la lectura porque entiende mejor el tema y le aporta más datos.
A su vez, las infografías pueden ser más eficaces y son un buen recurso para mostrar datos de una forma más atractiva.
Brindan información al lector que sea de complemento con el contenido escrito y no reiterativo con lo que se está relatando.
Por último las ilustraciones y caricaturas pueden ofrecer humor a las publicaciones y también enriquecer visualmente la información.
6. En fotografía
En fotografía
Para aprender a distinguir entre buenas y malas fotografías necesitamos entrenar nuestra mente y también a nuestros ojos.
Prestemos atención de ahora en más en:
si la imagen está nítida, si el foco está en el lugar adecuado, si está sobreexpuesta (demasiado blanca) o subexpuesta (demasiado oscura), si está centrada, si tiene manchas o reflejos molestos, si los colores son los adecuados etc.
La regla de los tercios
En las artes visuales como la pintura, fotografía y diseño, la regla de los tercios es una forma de composición para ordenar objetos dentro de la imagen.
Esta regla divide una imagen en nueve partes iguales, utilizando dos líneas imaginarias paralelas y equiespaciadas de forma horizontal y dos más de las mismas características de forma vertical, y los puntos de intersección permiten ubicar los
elementos en el centro de atención de la composición y así crear una imagen con equilibrio visual.
Ley de Horizonte y de la Mirada
El horizonte debe ubicarse en el tercio superior o en el tercio inferior del cuadro para romper con el excesivo equilibrio que se generaría si lo ubicamos a la mitad del encuadre.
La mirada del sujeto (u objeto) debe estar dirigida a la parte de la fotografía donde haya más ‘aire’ para dirigir la atención del espectador hacia adentro de la fotografía.
Ley de pregnancia
En la teoría de la Gestalt, muchas de sus aplicaciones son a base de la ley de pregnancia y buena forma.
Muy utilizado en las artes visuales, ya que trata de que las personas tendemos a organizar nuestro entorno buscando estabilidad, equilibrio, significado, seguridad, etcétera y nos sentimos más confortables cuando lo que percibimos es comprensible.
En las imágenes fotográficas, se utiliza muchas veces esta ley como base de composición, ya que es normativa que las imágenes sean pregnantes y atractivas.
Equilibrio o Ley de la balanza
Al igual que el peso físico en una balanza, el equilibrio compositivo es la apreciación subjetiva del peso visual en una imagen.
Cuando situamos el mismo peso a ambos lados de una balanza, ésta queda equilibrada.
Cabe aclarar que equilibrio visual no es sinónimo de simetría; más bien lo contrario: la composición de los elementos, con todas sus variables de orden y forma, es un juego de equilibrios.
Ley De La Compensación De Masas: Se compone con formas de diferente tamaño, diferente color, forma o importancia para compensar la composición.
Tipos de equilibrios
Ley de la balanza
Simetría
Equilibrio o Balanza
Punto de interés
El punto de interés es la capacidad que tiene un elemento de una composición en atraer la mirada del espectador.
Si los elementos principales se encuentran situados dentro de la ley de los tercios, será una imagen aún más atractiva.
Para esto, es fundamental reconocer qué es lo importante de la escena y justamente encuadrar sobre aquel punto y eliminar aquellas superficies que no aportan y distraen la atención.
Recorrido visual
La sumatoria de varios puntos de interés forma el recorrido visual.
Recorrido que es sugerido por los puntos de interés ubicados de modo estratégico, para que sean recorridos con la mirada, uno por uno, y al finalizar retomar el primero nuevamente haciendo una secuencia continúa. Ese camino continuo es lo que se
conoce como recorrido visual.
De estos elementos (cada uno con su forma y color) será tan importante su particularidad como también su ubicación y la relación entre ellos.
Según nuestra cultura occidental, leemos de izquierda a derecha y de arriba abajo.
Proporción o sección áurea
A la proporción áurea se le han asignado muchas definiciones y nombres. Si revisamos viejos textos, podremos encontrar referencias y denominaciones como: el número de oro, el número áureo, el número dorado, el número phi (que no es el número
pi), la sección áurea, la medida áurea o la divina proporción.
El descubrimiento de esta proporción o número (1,618034) causó todo un revuelo en las ciencias y las artes y ha obsesionado a artistas, diseñadores, arquitectos, y todo tipo de profesionales en busca de la perfección visual, durante siglos.
Nace de la creación del rectángulo áureo y de la espiral de oro.
El descubrimiento de Fibonacci causó muchísima fascinación.
Posteriormente, otro matemático y teólogo italiano llamado Luca Pacioli publicó un libro denominado La Divina Proporción (1590), alegando 5 motivos por los que el número áureo era divino. Desde la publicación de su libro, la proporción áurea fue
tomada como la proporción divina, alegando que la sucesión de Fibonacci y su número áureo se relacionaban con algo más espiritual que la geometría.
Obtuvo la fama de conseguir realzar la armonía y la belleza de los objetos o el arte. Por el auge de esta fama, a lo largo de la historia, la proporción áurea fue aplicada a innumerables proyectos de arquitectura o pintura.
Rectángulo áureo
Espiral de oro
Ejemplos:
7. En el diseño
En el diseño
En diseño gráfico, una composición es la parte donde todos los elementos separados se unen para formar un todo. Cuando todas tus letras, tus imágenes, tus gráficos y colores se unen para formar un diseño cohesivo.
Es un conjunto de elementos visuales cuya interacción y orden dan paso a una idea. Dichos elementos están contenidos en un “Marco de referencia” el cual señala (física o virtualmente) los límites del diseño, además de definir el centro de la
composición y las sensaciones de espacio.
Elementos gráficos
Existen 6 elementos gráficos que son la base del Diseño:
La grilla/estructura (márgenes, calles, columnas, etc.)
la tipografía (estilo del texto)
las misceláneas (caracteres tipográficos no alfabéticos)
Las imágenes o ilustraciones (fotografías, dibujos, gráficos, etc.)
El color
El reparto de blancos (espacios de aire entre gráficos, imágenes, columnas y otros)
El trabajo del diseñador incluye saber cómo combinar uniformemente estos elementos para poder lograr un producto ordenado y claro.
"Los símbolos sencillos y económicos funcionan mejor y de forma más universal que los cargados de detalles". Susan Kare
Diseño web
La información está por todas partes, y por eso es extremadamente importante que los diseñadores piensen en hacer diseños claros. Las piezas del diseño tienen que atraer la atención de los usuarios, ya sea mientras compran en una tienda
online, leen un blog o, simplemente, navegan por internet.
El diseño web debe ser fácil de leer y de entender.
Debemos recordar que optar por un diseño sencillo en lugar de uno recargado es clave para mantener interesados a los lectores. Una gran cantidad de elementos, imágenes, colores, y formas diferentes en una página pueden hacer que una web se
vea más "barroca", lo cual distraerá la atención del usuario.
Una buena forma de crear una experiencia agradable en la web es recordar que menos es más.
8. La imagen
La imagen
Según Villafañe definir lo que es una imagen es más complejo de lo que parece a simple vista.
La definición más generalizada que tenemos es cuando funciona como representación de un objeto o una idea, sin embargo, el concepto de imagen implica procesos como el pensamiento, la percepción, la memoria y la conducta… Por lo tanto
propone definir las imagenes como lo que primariamente posee las siguientes tres características:
selección de la realidad;
elementos configurados;
sintaxis (orden de esos elementos).
Dondis - La sintaxis de la imagen
El punto de vista subyacente de la psicología Gestalt, tal como la define von Ehrehfels, afirma que:
"si tenemos doce observadores y cada uno de ellos escucha uno de los doce tonos de una melodía, la suma de sus experiencias no correspondería a lo que se percibiría si alguien escuchase la melodía entera"…
En todos los estímulos visuales y a todos los niveles de inteligencia visual, el significado no solo reside en los datos representacionales, en la información ambiental o en los símbolos incluido el lenguaje, sino también en las fuerzas compositivas
que existen o coexisten con la declaración visual fáctica.
Cualquier acontecimiento visual es una forma con contenido, pero el contenido está intensamente influido por la significancia de las partes constituyentes, como el color, el tono, la textura, la dimensión, la proporción y sus relaciones compositivas
con el significado.
9. Las leyes de la Gestalt
Las leyes de la Gestalt
“La mente configura, por medio de ciertas leyes, los elementos que llegan a través de los canales sensoriales o de la memoria (pensamiento, inteligencia y resolución de problemas), es decir la percepción.
La palabra Gestalt hace referencia a figura, forma u organización.
La Gestalt analizó diversas áreas de la psicología (actitudes, el aprendizaje, la motivación, etc.) pero se centró en la percepción.
No percibimos como elementos aislados, sino que por el contrario percibimos como globalidad o conjunto organizado.”
“El todo es más que la suma de las partes”
Ley de la buena forma o pregnancia
La Ley de Pregnancia fue establecida por la Psicología de la Gestalt y adoptada por la Escuela de la Bauhaus.
Nuestra percepción tiene la capacidad de organizar los elementos de formas sencillas para nuestro entendimiento. El cerebro disfruta las composiciones armónicas y agradables para nuestros sentidos, esto lo hacemos simplificando lo que
percibimos y preferimos lo sencillo.
Pregnancia se refiere a la capacidad de una imagen o parte de ella de llamar nuestra atención y permanecer en nuestra memoria debido a su simpleza.
Lo que vemos y Lo que percibimos:
Ley de cierre
La Ley de cierre es la tendencia de la percepción a completar con la imaginación la parte faltante de una imagen.
Cuando un objeto está incompleto o es un espacio que no está completamente cerrado, el cerebro se encarga de activar unos mecanismos para completar la figura mediante la adhesión de la información faltante.
No hace falta que pongamos un círculo para que nuestro cerebro perciba un círculo:
Ley de semejanza
Según la ley de semejanza, nuestra mente agrupa los elementos que comparten características visuales y los unifica. La semejanza depende de la forma, el tamaño y el color.
Elementos similares tienden a ser percibidos como parte del mismo conjunto.
En estos casos agrupamos según color:
Ley de simetría
El principio de la simetría se basa en nuestra búsqueda de simplicidad, estabilidad y orden.
Dictamina que las imágenes simétricas son percibidas como un solo elemento (tal vez requiera ver con un poco de distancia). Va más allá del campo de la percepción de las formas y representa uno de los fenómenos básicos de la naturaleza. La
simetría utiliza figuras divididas de forma geométricamente perfecta, lo que genera la aparición de una variable importantísima: el equilibrio.
Tipos de simetría: por reflejo (percibida como si se reflejara la imagen), por rotación (percibida como giratoria) o por traslación (donde un módulo se repite).
Las formas simétricas se asocian a aspectos positivos como estabilidad y solidez:
Ley de proximidad
Tenemos tendencia a percibir los objetos y las formas que están cerca las unas de las otras como si pertenecieran a un mismo grupo (aunque estos elementos sean de colores y formas diferentes).
Nuestro cerebro genera esta asociación para facilitar nuestra percepción de los objetos y crear contornos dónde en principio no existen.
Las formas pueden ser iguales o diferentes, pero se mimetizan gracias a su proximidad:
Ley de continuidad
Según la ley de continuidad los elementos que siguen un patrón se tienden a agrupar perceptivamente, a pesar de que estén separados entre sí.
Los elementos mantienen un patrón o una dirección y tienden a agruparse entre sí. Estas piezas que apuntan en un mismo sentido se perciben de forma continuada. Si estos elementos forman líneas curvas o rectas las percibiríamos como una
misma forma.
Estos elementos no seguirán la ley de continuidad si no poseen una dirección común.
En la imagen de arriba, vemos un cruce de línea y curva en lugar de cuatro segmentos distintos de línea y curva que se encuentran en un solo punto.
Ley de figura - fondo
Esta ley analiza la tendencia de nuestro cerebro a separar el fondo de los demás elementos, y se basa en la premisa: no existe figura sin un fondo que la sustente.
Es la relación entre elementos positivos y espacio negativo.
Es lo primero que identifican las personas cuando ven una composición, qué es la figura y cuál es el fondo, depende de eso donde va a estar puesta nuestra atención.
Figura y fondo no son estáticos sino que pueden intercambiar sus papeles, el fondo puede convertirse en la figura y la figura en fondo, pero nunca podremos prestar igual atención a las dos a la vez. (Cuanto más básicas sean las figuras que
aparecen, más sencillo será el intercambio entre figura y fondo.)
