Introducción al Diseño UX/UI - DCU

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 disena
̃ dor 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.
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
1) Observación y análisis. Ya que la necesidad del diseño surge de la cotidianidad del
ser humano.
2) Planificación y proyección. Proponiendo un modo de solucionar la necesidad
detectada.
3) 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

1) Es una disciplina dedicada a la producción de comunicaciones visuales orientadas a
un público específico.
2) Se encarga de comunicar a través de medios visuales y como finalidad transmitir un
mensaje específico despojado de rasgos personales.
3) El hecho de crear y cumplir con un propósito se centra en: la transformación de una
realidad existente por una deseada.
4) 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.
5) 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?
6) 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.
Frascara
"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".

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.

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.

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.

Imágenes en el diseño
¿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
1) Conforman todos los elementos gráficos que se transforman en iconos: fotos,
pinturas, caricaturas, pictogramas, esquemas, gráficos, infografías y grabados.
2) Ayudan a generar un ritmo dinámico en la puesta en página y conectan el texto con
dicha ilustración.
3) Son una forma de contenido que informa ya que brindan testimonios de forma
gráfica.
4) 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.
5) 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.
6) Brindan información al lector que sea de complemento con el contenido escrito y no
reiterativo con lo que se está relatando.
7) Por último las ilustraciones y caricaturas pueden ofrecer humor a las publicaciones y
también enriquecer visualmente la información.

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 esta 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:
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.
Susan Kare
"Los símbolos sencillos y económicos funcionan mejor y de forma más universal que los
cargados de detalles".

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.

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.

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.)