MICROCLASE 2

Grillas y

Jerarquía Visual
Tabla de contenido

Percepción visua

Grilla

Tipo de Grilla

Jerarquías Visuales
 ¡Hola! Bienvenidx :)

Este documento es una extensión de la microclase. Nos interesa

que puedas ampliar conocimientos ya que la clase es corta y

ayuda mucho poder bajar la información en un archivo para

tenerlo a mano de consulta o repaso.

El objetivo de estas microclases es que ustedes incorporen

algunos conceptos sobre el diseño de experiencia de usuario y

diseño de interfaz y compartirles recursos que a ustedes les sirva

y les sea útil como material extra si ya están dentro de estas

disciplinas o recién empezando.

Nuestra idea es ser sus compañeras en este nuevo camino hacia

futuros diseñadores ux/ui.

Como siempre decimos en cada clase, no somos expertas, día a

día vamos aprendiendo, somos inquietas estudiamos e

investigamos mucho pero como dice una gran profe nuestra, no

existen técnicas infalibles ni una formula secreta para resolver

cuestiones específicas. Hay mil maneras diferentes de resolver

algo, todos los días se actualizan las metodologías, entre todo

podemos ir aportando y aprendiendo.

Percepción y

atención visual

Los usuarios de pantallas no se detienen a leer

como habitualmente se estila leer un libro o un

diario, sino que escanean el contenido.

Mientras más conozcamos como las personas

perciben y ven las cosas, más acertadas serán las

decisiones que tomemos sobre el diseño.

“Vemos menos de lo que

creemos ver, pero más de

lo que somos conscientes

de estar viendo”
Hassan-Montero, Y.; Ortega-Santamaría,

S. (2009). Informe APEI sobre Usabilidad.

Estamos acostumbrados a buscar información del tiempo, no

cesamos de hacer búsquedas visuales. El ojo se encarga de

hacer foco en un punto y es ahí donde se verán a mayor detalle,

mientras que el resto que no está enfocado será captado con

menor cantidad de información.

Cómo sabemos la percepción no es una actividad pasiva sino

que nosotros decidimos qué es lo que nos interesa ver y qué

llama nuestra atención. Nosotros decidimos qué es lo que

supera el filtro de atención visual. Esto lo decidimos de manera

consciente a través de varios filtros, el primero de estos es el de

atención visual.

En los primeros momentos, la percepción visual llega en sus

características más simples y básicas que son color,

movimiento, orientación y tamaño.

Color Movimiento

Fuente Imagen

Orientación

Fuente Imagen

Tamaño

Fuente Imagen

Fuente Imagen
La teoría psicológica se basa en que nos sentimos atraídos por

lo inusual, aquello que marque su diferencia respecto al resto de

los elementos cercanos será capaz de atraer nuestra atención.

Fuente Imagen

Fuente Imagen
Los humanos tenemos una cultura selectiva donde aprendemos
a ignorar aquello que no nos interesa. Por ejemplo cuando
estamos navegando una web podemos ignorar fácilmente
aquello que percibimos como publicidad, Por ejemplo, banners
publicitarios. A medida que salen más estrategias de venta y
promoción nuestra percepción crea más mecanismos
automáticos para administrar nuestra atención.

Fuente Imagen

Una vez que podemos focalizar la atención, nuestro cerebro

empieza a hacer un análisis para interpretar aquello que
estamos viendo. Analiza cómo se coordinan, ordenan y vinculan
entre sí los elementos. Una vez que superamos este filtro de
atención, vamos a empezar a visualizar patrones, estructura,
formas, contornos y regiones y empezamos a hacer un análisis
automático de la sintaxis gráfica viendo cómo se coordinan,
ordenan y vinculan entre sí estos elementos. Nuestro cerebro
empieza a preguntarse diferentes cuestiones para procesar
dicha información:

¿Qué forma parte de qué?

¿Qué está relacionado con qué?

¿Qué orden lógico tiene un

elemento de qué?

Hablemos

de Grillas
“Una grilla se trata de un grupo de líneas verticales

y horizontales que dividen una pantalla en

columnas y filas. Una grilla nos otorga estructura

en una página/pantalla para poder asegurar

consistencia y espacio entre los elementos”.

Michael Filipiuk - “UI Design Principles”

Las grillas son nuestras mejores aliadas, nos ayudan a

administrar el espacio y generar composiciones que sean

armoniosas y equilibradas. Básicamente una grilla es una serie

de líneas verticales y horizontales que ayudan a dividir una

página en columnas, módulos y secciones.

Si nos remontamos a la historia las grillas están relacionadas

con el nacimiento de la tipografía. Estas ayudaban a ordenar los

textos de los manuscritos para que la persona usuaria pudiera

recibir esa información fácilmente.

Fuente Imagen
Vamos a basarnos en el libro de UI Design Principles de
Michael Filipiuk. En este libro plantea que la grilla está
constituida por 5 elementos: Columnas, Rows (filas), Gutters
(calles), Márgenes y Módulos.

Columnas
Las columnas son aquellas secciones verticales, mientras más
columnas tengamos en nuestra grilla más flexible será. Para el
diseño mobile se utilizan 4 columnas y para web 12.

Rows o Filas
Estas son las secciones horizontales de una grilla, a diferencia
de las columnas, raramente se utilizan en el diseño web, ya que
las grillas suelen basarse en columnas.
Gutters o Calles
Estos son los espacios vacíos entre columnas y rows. Si
achicamos el tamaño del gutter nuestro contenido estará más
apretado y cerca.

Márgenes
Este elemento se encuentra por fuera de las columnas, rows y
gutters. La configuración de su tamaño es crucial, ya que si
usamos márgenes pequeños puede producir la sensación de
un diseño sobrecargado.
Módulos

Es el área que se crea cuando una columna y una row hacen

intersección.

¿Y qué pasa

con la UX?

La grillas son cruciales para estructurar nuestro contenido y

crear un recorrido claro para que las personas usuarias reciban

la información. Aportan enormemente a la jerarquía del

contenido,y la consistencia. Si logramos tener un buen manejo

de las grillas nuestras personas usuarias sabrán donde se

encuentran las cosas.

Al momento de diseñar webs o apps nos enfrentamos a que

nuestro diseño se visualice en diferentes dispositivos, es acá

donde la grilla nos facilita a crear un diseño responsive,

donde los elementos pueden reubicarse y escalar de una

forma más intuitiva.

Tipo de Grillas
En el libro de UI design principles se distinguen dos tipos de
grillas para el diseño de interfaces digitales: la grilla soft o
fluida y la grilla fija o fixed. Como cada diseño, independiente
del proyecto y contexto, antes de elegir una grilla, debemos
tener super claro que queremos comunicar y cómo. Una vez
dicho esto veamos cada una más en detalle.

Grilla soft o fluída

En estas grillas, el ancho de las columnas cambian en base al
ancho de pantalla, en cambio los gutters y márgenes quedarán
fijos. Al momento de crear interfaces responsivas esta grilla es
ideal, ya que se adaptan según el formato de pantalla y el
aspecto se sigue manteniendo.
Grilla fixed o fija

Este tipo de grilla suele utilizarse para formularios o artículos.

A diferencia de la grilla Soft, los márgenes son los que

cambian dependiendo el ancho de pantalla y las columnas y

gutters quedan fijos. Este tipo de grillas son utilizadas para

contenido que debe mantenerse tal cual

independientemente del tipo de pantalla.

Bien… ¿Y por qué

debería usar grillas?

Te convierte en un buen compañero de trabajo.

Como bien sabemos los diseñadores ux/ui jamás

trabajan solos, sino que trabajan en equipo con

muchísimos tipos de profesionales, entre ellos los

desarrolladores. Si usamos grillas en nuestros diseños

ayudaremos a que al momento de programar, los

desarrolladores podrán interpretar y deducir donde se

ubican los elementos, el tamaño que tienen y cuántos

módulos ocupas.
 Permite prabajar a la velocidad de la luz
Podremos definir de manera más eficiente y rápida
donde ubicará cada elemento. Las grillas son nuestra
estructura y guía, nos ahorrará muchas decisiones de
composición.
Pro diseño responsive

Gracias al uso de grillas podremos adaptar de manera

más sencilla nuestro diseño a cualquier tipo de pantalla.
Ojo… Podes tomarte
algunas licencias
Si… podemos romper la grilla. No debemos considerar a la
grilla como una atadura, podemos tomarnos licencias para
poder quizás destacar un elementos, generar ciertas
sensaciones, entre otros criterios.

Fuente Imagen
Fuente Imagen

Fuente Imagen
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. Apenas

observamos algo, automáticamente buscamos la información

importante y establecemos relaciones entre las partes. Ordenar

es una tarea central del diseñador y el generar una correcta

jerarquización no solo ayudará a la persona usuaria a

comprender la información fácilmente sino que también

estaremos facilitando su interacción.

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

información debe comprender la persona usuaria 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.

Para saber cómo jerarquizar nuestro contenido, primero

deberemos entender qué es lo que queremos comunicar y
cuales son las necesidades de nuestras personas usuarias. 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.

En resumen una buena jerarquización visual no solo brindará

una armonía estética, también mejoraremos la usabilidad y
experiencia de usuario.

Fuente Imagen
 Fuente Imagen

Fuente Imagen
 Fuente Imagen

Cómo construir una

jerarquía visual.
A través del contraste entre diferentes elementos de la
interfaz lograremos jerarquizar la información. Es
importante también mantener la consistencia y equilibrio a
lo largo de nuestro diseño para guiar la atención de la
persona usuaria y no distraerse.

Veamos a continuación aquellos atributos que nos serán

útiles para la creación de jerarquias visuales:

Tamaño
Siempre nos llamará la atención aquellos elementos que
sean más grandes porque destacan sobre el resto. A través
del tamaño podremos crear un recorrido claro para que
nuestra persona usuaria, primero visualizará aquellos
elementos más grandes y seguirá por los más pequeños.

Color
A través del tratamiento del color podremos captar la
atención de la persona usuaria, destacar elementos
interactivos y ofrecer información sobre el estado de la
interfaz. Aquellos colores que sean más vivos y luminosos
serán captados con mayor facilidad.

Alineación
Nuestro cerebro procesa la información a través del
reconocimiento de patrones, nos resulta más sencillo
comprender si los elementos están ordenados, pero
aquel elemento que rompa este patrón de orden se
destacará fácilmente.

Repetición
Aquellos elementos estructuralmente similares se
perciben como un mismo nivel de jerarquía o también
pueden percibirse como elementos relacionados. La
repetición de forma consistente favorece enormemente la
navegación y comprensión de la interfaz.
Proximidad
Cuando diseñamos y creamos un orden de lectura, lo
recomendable es agrupar elementos según el orden de
lectura que queremos conseguir ya que la persona usuaria
suele ir de un elemento al siguiente más cercano.

Espacio vacío
También conocidos como espacios en blanco, son
esenciales en nuestras composiciones, gracias a este
podemos realzar y resaltar elementos. Los espacios vacíos
son necesarios para lograr bajar la carga cognitiva y que
nuestra interfaz respire.

Tip para Verificar que las

jerarquías sean 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.
Bibliografía

Cooper, A. About Face: The Essentials of Interaction Design. New Jersey.

Wiley. 2014

Tidwell, J. Designing Interfaces. California. O’Reilly. 202

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

Lupton E., Phillips J. C. Diseño Gráfico: Nuevos fundamentos. Barcelona.

Gustavo Gili. 2016

Filipiuk, M. UI Design Principles. (eBook) https://

michaelfilipiuk.gumroad.com/l/uiguid

Busquets, C. Mejora tu diseño UI utilizando retículas. 2019. https://

www.uifrommars.com/mejora-tu-diseno-ui-utilizando-reticulas

Cimino, L. Cómo usar las grillas en el diseño de interfaces. 2021. https://

blog.ida.cl/diseno/como-usar-las-grillas-en-el-diseno-de-interfaces

Campos, M. La importancia de las grillas en diseño web y UX. 2019. https://

medium.com/ux-ripley/la-importancia-de-las-grillas-en-dise%C3%B1o-web-

y-ux-27abf06be8

Luiggi, S. Todo diseño necesita tres niveles de jerarquía tipográfica. 2014.

https://www.staffdigital.pe/blog/diseno-niveles-jerarquia-tipografica

Gamma UX. La importancia de la jerarquía en el diseño de interfaces. 2021.

https://www.gammaux.com/blog/la-importancia-de-la-jerarquia-en-el-

diseno-de-interfaces/
Si te gustó nuestro contenido

te invitamos a seguirnos en

nuestras redes :)