Curso universitario:

Diseño de Interfaz de
Usuario (UI)
Módulo 1:

Vinculando disciplinas de diseño

Unidad 2:

La organización visual
Presentación
En esta unidad seguiremos ahondando en cuestiones básicas de diseño, cómo el
espacio, fondo y relación de elementos. La idea es empaparnos de información
sobre la relación del usuario respecto a elementos visuales antes de comenzar a
diseñar. Para esto veremos algunas leyes de Gestalt que se basan en la percepción
del usuario, también hablaremos de la aplicación de grillas, jerarquías y sistemas
visuales.

Aclaración: Algunos de estos puntos tienen contenido del curso de Experto en

experiencia de usuario
Objetivos
Que los participantes logren…

● Identifiquen las leyes de gestalt aplicadas al diseño UI

● Comprender el beneficio de cada una de estas leyes
● Conocer distintos tipos de grillas y aprender a utilizar la grilla indicada según
el caso
● Aprender a trabajar diferentes jerarquías visuales
● Aprender que es una identidad visual y para qué sirven
Bloques temáticos
1. Gestalt aplicada al diseño de interfaz: Ley de figura y fondo, Ley de
semejanza, Ley de proximidad, Ley de cierre, Ley de continuidad.
2. Sistemas de maquetación: Lógica visual, Estructura, Disposición, Sistema de
grillas
3. Jerarquía visual: El diseño como organizador.
4. Identidad visual: El diseño como sistema. Aplicación de branding a productos
digitales.
 1.Gestalt aplicada al diseño de interfaz

La percepción es un proceso activo, donde la cognición simplifica estímulos

sensoriales en unidades comprensibles y los organiza en objetos y patrones
coherentes. Esta característica innata del cerebro para encontrar, estructurar y crear
orden visual, fue estudiada por una teoría: la psicología de la Gestalt.

La Gestalt describe cómo la mente interpreta y organiza información visual para

encontrar sentido a lo que nos rodea a través de sus leyes. Como diseñadores,
debemos utilizar estos descubrimientos para poder crear piezas más efectivas y
eficientes.

Esta teoría propone que el ojo humano, en combinación con los sistemas de visión
del cerebro, percibe las cosas como un conjunto antes que sus elementos
individuales, es decir “que el todo es más que la suma de sus partes”.

Como menciona Ellen Lupton, la percepción visual está moldeada por las
relaciones entre figura y fondo. Los humanos separamos las figuras del espacio,
color o patrones que los rodean. Por ejemplo, en la lectura, separamos las letras con
respecto a su fondo y no podemos percibir un objeto negro en la oscuridad total, ya
que sin separacion ni contraste, las formas desaparecen.

En el campo del diseño visual, es clave generar una correcta tensión entre figura
y fondo, ya sea para generar un mayor impacto como para lograr un buen equilibrio.
Detallaremos algunas de las leyes de la Gestalt a continuación.
Ley de figura y fondo
Esta es una de las leyes más amplias, sustentada por la suma de todos los demás
principios. Como ya mencionamos en la introducción al tema, gran parte de la
percepción visual se sustenta en la relación de la figura de un objeto con respecto a
un fondo. Figura (o forma) es un elemento que existe en el espacio y se relaciona
con otros elementos, y el fondo, es todo lo que no es figura y la sostiene. En
relaciones estables, como explica Lupton, la forma se distingue claramente del
fondo, y por contraste, el fondo tiende a ser desapercibido.

Fuente: https://www.toptal.com/designers/ui/exploring-the-gestalt-principles-of-design

Existen también relaciones reversibles, donde el fondo y figura se alternan según

la percepción al ser igual de fuertes. Esto suele ser utilizado en figuras imposibles
tanto como recurso para generar mayor interés visual, como por ejemplo, en el
diseño de marcas y logotipos.

La última relación que podemos mencionar es la de ambigüedad, donde ningún

área es dominante y por ende, no podemos percibir fondo ni figura.
Ejemplos aplicados:

Fuente: https://www.toptal.com/designers/ui/exploring-the-gestalt-principles-of-design
 Fuente:
https://www.behance.net/gallery/130860609/Modal-components?tracking_source=search_projects_re
commended%7Cmodal%20ui

Ley de semejanza
Los elementos que comparten características similares son percibidos y
agrupados en contraposición a aquellos que no comparten características similares.
Tendemos a percibir estos elementos como grupos o patrones. También podemos
por ende, llegar a la conclusión de que estos comparten una misma función.

La semejanza nos permite organizar y clasificar objetos dentro de un grupo y

otorgarles una función o significado específico.
Hay varias maneras de conseguir que los elementos sean percibidos como
relacionados, por ejemplo, dotándolos de características similares como color,
tamaño, forma, textura, dimensión y orientación. En algunos casos, estas relaciones
son más evidentes que otras: por ejemplo, el color se relaciona más rápidamente
que el tamaño, y el tamaño que la textura.

Fuente:https://www.behance.net/gallery/106667469/UI-Design-Exercise-Neumorphism-UI-Kit?trackin
g_source=search_projects_recommended%7Cbutton%20ui
 Fuente: http://www.bertusgerssen.nl/

Cuando la ley de semejanza ocurre, un objeto puede ser enfatizado simplemente

diferenciándolo del resto. Esto es llamado anomalía, y puede ser utilizado para
crear contraste o peso visual. Puede generar un punto focal, es decir, llamar la
atención del usuario hacia un punto.
 Fuente:
https://www.behance.net/gallery/125006145/arty-mobile-app?tracking_source=search_projects_reco
mmended%7Cui%20design
Esta ley también juega un rol esencial en mantener la consistencia de una interfaz
de usuario. Mantener un diseño consistente a través de toda la UI ayuda a que los
usuarios rápidamente puedan inferir qué ítems cumplen la misma función
aunque estén realizando una tarea diferente o nueva.

Ley de proximidad
Los elementos que se encuentran posicionados cerca son percibidos como
grupos en contraposición a aquellos que se encuentran más alejados.

Podemos utilizar este principio en una interfaz para agrupar información similar,
organizar contenido y descomprimir ciertas composiciones.

Los espacios juegan un rol fundamental ya que generan el contraste necesario y

guían la vista en la dirección correcta. Esto permite que se genere una mejor
jerarquía visual de los elementos y que se facilite y agilice el escaneo de la
composición, ayudando a los usuarios a conseguir sus objetivos más rápidamente.

Este es uno de los principios de la Gestalt más importantes e incluso puede superar
al de semejanza por color o forma. Podemos ver la aplicación de esta ley a diario en
los elementos de una interfaz. En general, su ausencia es la que causa que los
usuarios pasen por alto información como hipervínculos o botones aunque estén
muy visibles, ya que el espacio en blanco que separa los elementos hace que los
perciban como una parte ajena a la tarea que están realizando. Como explica Aurora
Harley en un artículo de NNGroup, este comportamiento es conocido como visión de
túnel: los usuarios prestan atención selectivamente a algunas partes de la pantalla
mientras realizan una tarea y pierden elementos que se encuentran por fuera de ese
área focal.
Fuente: https://dribbble.com/shots/15516474-Boosto-Website
 Fuente: https://dribbble.com/shots/16453129-JUO-Website

Ley de la Región Común

Este principio es muy similar al de proximidad, ya que establece que los elementos
que se encuentran dentro de una misma región se perciben como un grupo. Al
igual que el anterior, es muy utilizado ya que ayuda a agrupar información y
organizar contenido, pero también puede lograr una separación o actuar como un
punto focal. Ayuda a jerarquizar, a escanear rápidamente la pantalla.

De esta forma, se pueden agrupar y mantener juntos muchos elementos

diferentes y visualizarlos de manera unificada incluso dentro de grupos más
grandes. Podemos lograrlo a través del uso del color, línea, forma, sombras,
etcétera. También suele ser utilizado para diferenciar elementos del fondo,
indicando algún tipo de interacción o importancia.
Fuente: https://dribbble.com/shots/10955382-Card-UI-Examples-Round-1-The-Classics

Fuente: http://byronfernandes.com/ui-and-visual-design
 Fuente: https://dribbble.com/shots/1857391-Exploration-Google-Cards-Style

Ley de cierre
Esta ley ocurre cuando un grupo de elementos se reconoce como una única
forma o figura reconocible, e incluso cuando un objeto se percibe como
incompleto: automáticamente cerramos el hueco o vacío de la forma.

Como menciona Lupton, cuando percibimos, el cerebro asocia la experiencia

pasada y lo sensorial inmediato para poder navegar el entorno satisfactoriamente.
Por ejemplo, sabemos que una mesa tiene cuatro patas, incluso cuando no vemos
alguna de ellas. Nuestra experiencia con ese objeto nos permite cerrar su forma
automáticamente con la información faltante.

Cuando nuestro cerebro percibe una considerable cantidad de información, salta a

conclusiones inmediatamente llenando estos espacios y creando un todo unificado.
De esta forma podemos disminuir los elementos necesarios para comunicar
información, reduciendo la complejidad y generando diseños más atractivos.

Un posible ejemplo diario de este principio, es cuando vemos algún elemento

cortado, indicando que podemos desplazarnos para continuar la lectura.

Fuente: https://www.mercadolibre.com.ar/

Fuente: https://imborrable.com/blog/teoria-de-la-gestalt/
Otro ejemplo serían los íconos que requieren cierta distinción pero que aún deben
ser legibles, como los diferentes estados de un ícono a continuación. Aquí se usa el
cierre, aunque las formas son realmente diferentes cuando hay un espacio negativo,
aún podemos verlas como un todo completo.

Ley de continuidad
Esta ley propone que los elementos ordenados siguiendo una línea contínua (o
una curva leve) son percibidos como un grupo.
Nos permite interpretar dirección y movimiento a través de una composición. Ocurre
cuando alineamos elementos y puede ayudar a que la vista recorra suavemente la
superficie de la pantalla, ayudando a una mayor legibilidad. Refuerza la percepción
de la información agrupada creando orden y guiando a los usuarios a diferentes
segmentos de contenido. La interrupción de la continuidad puede indicar el final de
una sección y llevar la atención a un nuevo contenido.

Fuente: https://dribbble.com/shots/16015885-Sidebar-Navigation-UI
 Fuente: https://dribbble.com/shots/16828933-Testportal-Web-App-Navigation

Entonces.. ¿Para qué sirven las leyes de Gestalt?

Como vimos, las leyes de las Gestalt son utilizadas en el diseño de interfaces
para mejorar la experiencia de los usuarios. Pequeños detalles visuales y
consistentes a través de todas pantallas de un producto ayudan a realizar mejores
interpretaciones y a realizar tareas de forma efectiva. De esta forma, el usuario
puede concentrarse en llevar a cabo las acciones sin distracciones ni confusión, en
vez de tener que memorizar los pasos a seguir o conscientemente establecer una
estructura ante cada uso de la interfaz, facilitando enormemente sus objetivos.
 2. Sistemas de maquetación

Como vimos en el tema anterior, nuestra percepción tiende a organizar los

elementos visuales con diversos criterios. Es por ello que debemos prestar suma
atención a la forma en que alineamos, espaciamos, y distribuímos los objetos dentro
del plano.

Maquetación o diagramación son términos que se suelen utilizar en el Diseño

Editorial para referirnos al modo de organización de un espacio. En inglés, veremos
este término utilizado en UI como “Layout”.

La maquetación o layout en el caso de una interfaz como explica Jenifer Tidwell,

contiene elementos informativos, funcionales, que se utilizan como contenedores
o marcos, y decorativos. La forma en que se distribuyen estos elementos
determina la importancia de la información y las funciones de la UI y es clave en
ayudar al usuario a entender que necesitan saber y qué hacer con ello.

Para organizar esta información, en diseño se utiliza una grilla.

Grillas
Una grilla es un conjunto de líneas invisibles horizontales y verticales que dividen
una pantalla en columnas y filas. Son uno de los principios fundamentales en el
diseño de interfaz.

Como hemos mencionado, las grillas o retículas son utilizadas habitualmente en el

diseño de libros, revistas y diarios, ya que se originaron por la necesidad de
organizar texto. Como explica Müller Brockmann, con la grilla o retícula, una
superficie se subdivide en campos reducidos, a modo de reja. Estos campos están
determinados por el ancho de las columnas y el alto de las filas.
Fuente: https://cmoorehead.format.com/grid#1
Fuente: https://miro.medium.com/max/758/1*i8PNKHgpwN4oiOiDzY2LjA.png
¿Por qué es conveniente utilizar grillas?
● Dan estructura y claridad al diseño: ayudan a organizar y alinear todos
los elementos.
● Facilitan la comprensión y uso de un producto digital: como vimos, la
cercanía elementos visuales genera que se perciban como parte de un
conjunto, mientras que su lejanía los separa. Utilizar grilla, ayuda a
establecer jerarquías claras.
● Ayudan a que el diseño se vea correctamente en distintos dispositivos
al hacerla adaptable (responsive).

Para comenzar, detallaremos algunos elementos de las grillas a tener en cuenta.

Columnas
Las columnas son las secciones verticales de la grilla. Cuanto más columnas
existan, más flexible será. La mayoría de los diseños de interfaz orientados a web y
mobile, suelen utilizar 12 columnas.
 Fuente:
https://denysergushkin.medium.com/the-anatomy-of-a-grid-why-you-should-use-one-a3d076cac69a
https://medium.com/aela/grids-como-usar-esse-sistema-para-designs-responsivos-c6b3dd1c0383

Filas
Las filas son las secciones horizontales de una grilla. Si bien en el diseño
tradicional se utilizan junto con el interlineado para definir los campos o espacios, en
el diseño UI no suelen utilizarse. En general, los diseños se rigen por las columnas.
 Fuente:
https://denysergushkin.medium.com/the-anatomy-of-a-grid-why-you-should-use-one-a3d076cac69a

Calles
Las calles son el espacio libre que queda entre las columnas. A menor tamaño de
calles, menor cantidad de espacios en blanco en el diseño, es decir, más juntos los
elementos.
 Fuente:
https://denysergushkin.medium.com/the-anatomy-of-a-grid-why-you-should-use-one-a3d076cac69a
https://medium.com/aela/grids-como-usar-esse-sistema-para-designs-responsivos-c6b3dd1c0383

Márgenes
Los márgenes son el espacio por fuera de las columnas, Se pueden pensar como
calles que están fuera de la grilla. Dan el espacio en blanco en los límites del
diseño. También se utilizan para separar el contenido dentro de componentes.
 Fuente:
https://denysergushkin.medium.com/the-anatomy-of-a-grid-why-you-should-use-one-a3d076cac69a
https://medium.com/aela/grids-como-usar-esse-sistema-para-designs-responsivos-c6b3dd1c0383

Módulos
Los módulos son las divisiones resultantes de la intersección de filas y columnas.

Fuente:
https://denysergushkin.medium.com/the-anatomy-of-a-grid-why-you-should-use-one-a3d076cac69a

Campos o áreas
Son espacios definidos por las intersecciones de columnas y grillas donde se
ubican los elementos, como por ejemplo, una imagen. Pueden ser variables y son
los que generarán la dinámica dentro de nuestro diseño.
 Fuente:
https://denysergushkin.medium.com/the-anatomy-of-a-grid-why-you-should-use-one-a3d076cac69a

Grillas fluidas y grillas estáticas

Al diseñar para pantallas, tenemos que considerar que existen una múltiple
cantidad de tamaños y resoluciones, por lo que nuestro diseño debería poder
adaptarse de una forma adecuada a diversos formatos. No existe un tipo universal
de grilla en el diseño de interfaz, por lo que es necesario comprender las que se
usan más habitualmente.

Grilla fluida
En una grilla fluida, el ancho de las columnas varía según el ancho de la pantalla,
mientras que los márgenes y las calles permanecen estáticas. Este tipo de grilla
es una de las más habituales para diseñar interfaces adaptables a distintos
dispositivos (responsive), ya que su contenido cambia según el tamaño de la
pantalla y se pueden ajustar fácilmente.

Grilla estática (fixed)

Este tipo de grilla tiene valores estáticos de columnas y calles, con márgenes que
varían según el ancho de la pantalla.

Este tipo de grilla sirve para contenido que debe permanecer exactamente igual
entre distintas pantallas. Suele utilizarse para algunos sitios y para portales de
noticias, ya que achicar el contenido haría que pierdan legibilidad.
Grillas mixtas
En algunos casos, veremos que ninguno de los dos tipos de grilla se adapta del
todo bien a nuestro diseño. Para ello, debemos entender que no todos los
elementos de la UI deben ser fluidos.

Por ejemplo, si diseñamos una aplicación para web con un panel lateral y utilizamos
una grilla fluida, al ampliar o reducir la ventana también se reducirá o ampliará el
panel, cuando lo ideal sería que tengamos más espacio para el contenido y no
márgenes extra dentro de ese lateral. Esto sucede porque en las grillas fluidas se
establecen porcentajes para definir el tamaño de las columnas y escalarlas
correctamente.

La solución, sería determinar que el menú lateral fuese estático mientras que la
parte del contenido, sea fluida.

Construcción de una grilla

Cuando pensamos la construcción de una grilla siempre debemos comenzar por
establecer un valor de base: es el número más pequeño que utilizaremos para
establecer todos los demás valores y definirá no solo el tamaño de los objetos sino
también los espaciados. Todos los valores de la grilla deben ser divisibles por este
número. En general se utilizan grillas de 8 puntos o grillas de 10 puntos.

Antes de comenzar debemos explicar algunas particularidades sobre las pantallas y

sus unidades de medida.

Pantallas y resolución
El diseño de interfaz se basa totalmente en pantallas. En los viejos monitores de
tubo, las pantallas tenían un formato más cuadrado y sus resoluciones eran
establecidas entre 640 x 480 px y 800 x 600 px. Luego comenzaron a aparecer
formatos más grandes y horizontales, hasta llegar a los monitores que utilizamos
actualmente.

El estándar de las pantallas se estableció en 72 pixeles por pulgada (con la sigla ppp
en castellano, y points per inch, ppi, en inglés). Cuando apareció el iPhone 4 y su
nuevo retina display, éste cambió la densidad de píxeles al doble. Es decir si la
pantalla original tenía 320x480 (es decir, un tamaño de 1x base), ahora los elementos
conservaban ese mismo tamaño pero se duplicaba la cantidad de pixeles por lo que
en verdad la resolución era de 640x960 (2x), lo que daba una mejor calidad de
imagen.

Con el tiempo, empezamos a ver iPhones, tablets y laptops con mayor densidad de
píxeles, de 3x y hasta 4x.

Como el diseño de las interfaces ya se realiza de manera íntegra en software

vectorial (como Sketch, Figma o XD), ya no debemos preocuparnos por esto. La
resolución base de 1x nos sirve de igual forma en pantallas de baja o alta densidad.

Por ejemplo, si diseñamos un objeto que tenga 30 píxeles de alto. Este objeto será
de 30p a 1x, ya que a un píxel a 1x es igual a un punto. Pero a 2x, el objeto será de 60
píxeles, aunque en el diseño, seguirá siendo de 30 puntos.

Lamentablemente es imposible prever todas las resoluciones posibles que

presentan los dispositivos hoy en día, por lo que primero que debemos plantear al
realizar un diseño es al menos en qué tipo de pantalla se verá y por ende, cuál es
la distancia que el usuario tendrá del dispositivo. Una pantalla tradicional se
distingue de una TV o de un dispositivo móvil como un celular: las televisiones
tendrán que ser vistas a distancia en las habitaciones, una pc o notebook tendrá una
distancia media y un celular, una distancia corta. De esta forma, podremos priorizar
qué características deben tener los elementos de la UI en cada caso y llegar a una
buena experiencia final.
 Fuente: https://uxdesign.cc/ui-design-basics-screens-734bfbeffca9

Fuente: https://uxdesign.cc/ui-design-basics-screens-734bfbeffca9

Grillas de 10 puntos
Es una de las más populares porque resulta sencillo dividir y multiplicar por 10. En
diseños con grillas fluidas, se suelen utilizar 20p para las calles, y se dobla ese valor
a 40p para los márgenes.
 Fuente: https://blog.prototypr.io/ui-grid-best-practices-efd6c4f9d16

Grillas de 8 puntos
Funciona de la misma forma que la de 10p, se utiliza 8 como valor de base y luego
se multiplica por dos o se suma 8 a los valores para mayor fluidez.

Actualmente, es la más popular ya que da una mayor flexibilidad con los

espaciados, por lo que se pueden encajar en grilla elementos más pequeños y
complejos. Además, muchas resoluciones populares son divisibles por 8, lo que es
de suma ayuda para diseñar interfaces para dispositivos móviles.

Para crear esta grilla, se comienza multiplicando el número de base por dos. En
general, las calles son de 16 y los márgenes externos de 32 o 24.

En general, se prefiere la de 8p a la de 10p porque al generar espaciados dentro de

elementos como botones y campos, podemos tener más libertad en escalas de 8
que en 10, donde los espaciados pueden resultar demasiado amplios.
 Fuente: https://material.io/design/layout/spacing-methods.html#baseline-grid

Grillas blandas (Soft grids)

Una grilla blanda se utiliza alineando y espaciando los objetos utilizando el
número de base y sus múltiplos. En general, es más sencillo implementar este tipo
de grilla en diseño y en código, y suelen ser las más utilizadas.

Se suele utilizar un módulo de 8p (o 4p en algunos casos para diseños destinados a

dispositivos móviles) y sus múltiplos (16, 24, 32, 48, 64) para generar los espaciados
de los objetos.

Los valores más pequeños se utilizan para los componentes, donde los espacios y
márgenes son más detallados y pequeños, y los valores más altos, para la
diagramación en general. Para auxiliar esta tarea, podemos crear una escala de
cuadrados de estos tamaños y luego verificar los espaciados dentro del diseño para
ajustarlos.

Este método no sólo es útil para diseñar sino también para indicar a los
programadores el sistema de espaciado en los prototipos. De esta forma, podremos
generar una mejor consistencia a través de todas las pantallas de nuestras
aplicaciones.
Fuente: https://uxplanet.org/the-bottomline-on-measuring-hard-and-soft-grids-part-i-7ff52d7bc458
 3. Jerarquía visual

Cuando hablamos de jerarquía visual, como su nombre lo infiere, nos referimos a

la importancia que tienen algunos elementos con respecto a otros en una
composición. Como ya hemos visto, apenas observamos algo, automáticamente
buscamos la información importante y establecemos relaciones entre las partes.
Ordenar es una tarea central del diseñador, sin jerarquías la comunicación visual es
extremadamente difícil de lograr.

Un buen diseño de interfaz debe tener en cuenta qué información debe

comprender el usuario de forma inmediata, qué elementos son secundarios y
cuáles son necesarios en últimas instancias. Esta clasificación es la que establece
la jerarquía visual.

Para determinar el orden de importancia podemos trabajar con distintos criterios

como posición, color, tamaño, espaciados y forma. Por ejemplo, un elemento muy
importante, se puede distinguir por tener un tamaño mayor y un color llamativo y
saturado, mientras que un contenedor, o un fondo, debe tener un color neutro y
ayudar a la cohesión de los elementos sin resaltar demasiado.

Establecer jerarquías claras es una de las tareas más necesarias y difíciles ya que
tendremos que trabajar con muchas variables en simultáneo para poder optimizar la
cantidad de información en pantalla, mantener una consistencia y al mismo tiempo
pensar en las particularidades de la vista que estamos diseñando. Un mal resultado
generará confusión en el usuario y lo notaremos rápidamente.

Para pensarlo con un ejemplo claro, imaginemos la estructura de una página

cualquiera. En ella tenemos títulos, subtítulos, listas y párrafos de texto. Al leer, cada
uno de estos elementos tiene un formato diferenciado que nos ayuda a estructurar
la información visualmente.
A continuación, profundizaremos en algunas cuestiones para establecer buenas
jerarquías visuales dentro del diseño de una interfaz.

Fuente: https://listacross.ouiwill.com/

Establecer relaciones entre los elementos

Para poder decidir qué elementos están relacionados, tendremos que analizar
cuáles tienen funciones similares y cuáles se utilizan en conjunto. Estos elementos
suelen estar agrupados espacialmente y secuencialmente para reforzar las
relaciones conceptuales y reducir el tiempo de movimientos del usuario.

Solemos ver este ejemplo en las barras de herramientas: algunos elementos dentro
del mismo grupo se encuentran cerca, y otros similares pero que no pertenecen al
mismo conjunto de acciones se separan o delimitan con recuadros, líneas y
espacios.
Veremos más adelante que existen ciertos patrones de interacción ya establecidos a
través del tiempo como convenciones, como por ejemplo la forma en que se
visualizan los hipervínculos por defecto: azules y subrayados. Si bien hoy en día
cada aplicación se encuentra diseñada de forma particular, debemos pensar de qué
forma enfatizamos o atenuamos los elementos de la UI para facilitar la comprensión
del usuario, que deberá distinguir rápidamente un botón, un hipervínculo, un menú,
etcétera.

Fuente: https://dribbble.com/shots/16007029-Finance-Dashboard-Design
Verificar que las jerarquías son las correctas
Como explican los autores de About Face, en diseño y otras disciplinas visuales se
utiliza una prueba muy sencilla para verificar qué vemos primero: el squint test,
que traducido significa entrecerrar los ojos. En esta prueba, nos alejamos
físicamente unos pasos del diseño, cerramos un ojo y entrecerramos el otro. Al
forzar una visión borrosa y no distinguir claramente los elementos, podremos ver
cuáles son los que resaltan primero o se ven agrupados y corregirlos en el caso de
que sea necesario.

Alinear a la grilla
No nos extenderemos de más ya que lo hemos explicado en el tema anterior, pero
es importante resaltar que la grilla es una de las principales herramientas para
organizar información y nos auxiliará ante los casos de mayor complejidad. Alan
Cooper señala algunos beneficios del uso de grillas:

● Usabilidad: Como las grillas regulan la posición de los elementos, los

usuarios pueden aprender rápidamente dónde encontrar aquellos que son
claves dentro de la interfaz. Si un elemento se encuentra siempre en la misma
ubicación, no tiene que escanear nuevamente la pantalla para encontrarlo.
● Consistencia: La consistencia del espaciado y el posicionamiento van de la
mano con el mecanismo de procesamiento visual innato de los seres
humanos. Una grilla bien diseñada mejora la lectura en pantalla.
● Atractivo: Si se aplica una grilla de forma cuidada y se eligen relaciones
apropiadas entre distintas partes de la pantalla, el diseño genera un sentido
del orden que los usuarios encuentren confortable. Cuando todos los
elementos de una interfaz compiten por la atención, ésta se ve ruidosa y
 caótica, como una gran pared de contenido donde no queda claro lo que es
importante. Si deliberadamente se desenfatiza la información secundaria y
terciaria, y se hace un esfuerzo en resaltar aquellos elementos que son
importantes, el resultado es automáticamente más agradable, incluso cuando
no se realicen modificaciones de otro tipo (color, disposición, tipografías,
etcétera).
● Eficiencia: Estandarizar las puestas en pantalla reducirá la cantidad de trabajo
necesario para producir interfaces visuales de calidad. Definir e implementar
una grilla de forma temprana en un diseño reduce las iteraciones y los ajustes
en los diseños de interfaz.

Entender cómo visualizamos o escaneamos

el contenido
Los usuarios de pantallas no se detienen a leer como habitualmente se estila leer
un libro o un diario, sino que escanean el contenido.

Como explica Marisol Parnofiello en su libro UX Writing en español, esto se debe a

que leer en la web (o cuando visualizamos un contenido en una aplicación) implica
eficiencia pura: los usuarios no quieren perder tiempo de más.

Hay muchos patrones de lectura diferentes. Podemos mencionar el marcado,

(donde los ojos se focalizan en un lugar fijo mientras se va desplazando la página),
capas de torta (donde los ojos leen principalmente encabezados y saltean el texto
intermedio), localizado o manchado (se saltean los grises de texto y se busca algo
en particular), entre otros. Pero el patrón principal que siguen las personas en
occidente según un estudio de Nielsen Norman Group es el F o E.

El patrón F/E describe que los ojos siguen el margen izquierdo del contenido,
leyendo una primera línea, saltando a la segunda línea, la cual se abandona rápido,
y va bajando la mirada saltando así de línea en línea hasta que se pierde la atención
y se pega nuevamente contra el margen izquierdo.
Para poder evitar este patrón y mejorar la usabilidad, apelaremos a buenas
jerarquías visuales donde el usuario encuentre fácil y rápidamente los elementos
que busca a través del recorrido visual.

Utilizar mucho espacio en blanco y luego

reducir
Un ejercicio práctico para poder visualizar y separar elementos ante la duda, es
siempre dejar espacios extra de más (en diseño llamado aire), en las primeras
iteraciones, y luego reducirlo y comparar. Podemos realizar por ejemplo, tres
versiones de un mismo diseño: primero con una gran cantidad de aire, luego con un
nivel intermedio y luego con menos que el anterior, y comprobar cuál de estas es la
más adecuada para lo que estamos realizando.

El espacio entre objetos es tan importante como su tamaño o peso en el plano. Nos
ayudará a establecer las separaciones correctas para tener buenas jerarquías.
 4. Identidad visual

Cuando hablamos del concepto de identidad visual, nos referimos a una serie de
elementos gráficos que simbolizan a una compañía, producto o servicio. Estos
elementos representan conceptos abstractos (como por ejemplo, valores, misión,
servicios, etcétera) a través de identificadores visuales.

Vemos diariamente que las empresas se comunican a través de colores, formas y

palabras, y que resultan fácilmente identificables por sus logotipos. Todo esto, junto
con decisiones como elección de imágenes, tratamientos gráficos y tipografías
conforman la identidad visual. La sistematización y organización de todos estos
elementos junto con sus aplicaciones y usos se denomina manual de marca. Más
adelante, lo veremos en más profundidad cuando hablemos de sistemas de diseño.

En productos o servicios digitales, veremos reflejados estos atributos tanto

dentro, en el producto en sí mismo, como por fuera, ya sea en su página web,
redes sociales o e-mails. Sin embargo, debemos comprender que diseñar para
producto y diseñar para web son dos disciplinas distintas. No deberían aplicarse
los mismos criterios de diseño para producto que para marketing. Ambos tienen
objetivos diferentes, y por tanto, usuarios y casos diferentes.

Sin embargo, algunas cuestiones en el lenguaje visual son coincidentes. Si

observamos empresas como Spotify o Dropbox, veremos que ambas utilizan los
mismos colores, el logotipo, mismas ilustraciones y misceláneas, entre otros
detalles. Sus webs y su producto son distintos, visual y funcionalmente pero son lo
suficientemente similares para verse unificados. Esto sucede gracias a una identidad
visual documentada y consistente. Esta identidad, permite que los productos se
perciban distintivamente, se diferencien el uno del otro, y a su vez, generan el
hilo conductor que permita reconocer sus partes como un todo.
Fuente: https://spotify.design/article/making-the-brand-redesigning-spotify-design
 Fuente: (App) https://open.spotify.com/artist/2JW9qYMG994WQsfwEuUtkv

Otro caso muy interesante para observar es el de Google. Tienen una identidad
visual fuerte, que no solo se refleja en su producto insignia (su buscador) sino que se
despliega sistemáticamente a todas sus aplicaciones y se adapta a todos los
medios posibles con una consistencia visual muy cuidada.

Andrew Couldwell, en su libro Laying the Foundations, explica que estos pilares de
identidad visual, ayudan a que todas las partes de un proyecto, ya sean
desarrolladores, diseñadores o directores, se encuentren trabajando en la misma
página, con el mismo lenguaje y formando un equipo. Él llama a este manual de
marca digital “Digital Foundations”, considerando que no se pueden utilizar los
manuales de marca tradicionales para definir las cuestiones inherentes a los medios
digitales.

Hay factores como accesibilidad y experiencia de usuario que impactan en los

colores que utilizamos. Por ejemplo, identitariamente una marca puede tener rojo
como su color primario pero en una interfaz, el rojo suele indicar una acción
importante y hasta destructiva, como borrar un archivo de forma irrecuperable.
Incluso hay otros elementos que son parte del mundo digital como animaciones,
sonidos e interacciones, que no pueden ser representados en un manual tradicional.

Para concluir, ya que profundizaremos sobre estos temas en próximas unidades

cuando veamos sistemas de diseño, la identidad visual es más que simplemente
hacer que las cosas se vean bien. Todas las elecciones que se realizan y la forma
en que son utilizadas impactan en la marca de forma positiva o negativa. La
identidad visual eleva la experiencia de usuario creando consistencia y naturalidad.

Antes

Ahora
Fuente: https://1000logos.net/google-logo/
Bibliografía utilizada y sugerida
Libros y otros manuscritos:
Lupton E., Phillips J. C. Diseño Gráfico: Nuevos fundamentos. Barcelona. Gustavo Gili
2016.

Cooper, A. About Face: The Essentials of Interaction Design (4th Revised ed.). Wiley.
2014

Samara, T. Diseñar con y sin retícula. Barcelona. Gustavo Gili. 2016

Tondreau, B.. Layout Essentials Revised and Updated: 100 Design Principles for
Using Grids. Rockport Publishers. 2019.

Müller-Brockmann, J. Sistemas de retículas. Un manual para diseñadores gráficos.

Editorial Gustavo Gili. 2012.

Tidwell, J., Brewer, C., & Valencia, A. Designing Interfaces: Patterns for Effective
Interaction Design (3rd ed.). O’Reilly Media. 2020.

Parnofiello, M. UX Writing en español. Autores de Argentina. 2020.

Couldwell, A. Laying the Foundations. Owl Studios. 2019.

Artículos de revista en formato electrónico:
NN Group. (s. f.). Nielsen Norman Group: UX Training, Consulting, & Research.
Nielsen Norman Group. Recuperado 15 de julio de 2021, de
https://www.nngroup.com/

(2021, 01). The 8-Point Grid. Obtenido 12, 2021, de

https://spec.fm/specifics/8-pt-grid

Vinh, K. (2007, 04). Grids are Good (right?). Obtenido 12, 2021, de
https://www.slideshare.net/huer1278ft/grids-are-good-right/