DISEÑO UX/UI

Clase 18
Grillas
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 17 Clase 18 Clase 19

Práctica Figma Sistema de grillas Estándares y Guidelines

● La plataforma Leyes UX ( guías de estilo)

● Resolución ●
● Principios básicos
● Comunidad en Figma
● Diseño modular ● Guidelines de Android
● Exportar e importar ● Aplicación de grillas ● Tarea para el Proyecto
archivos ● Tarea para el Proyecto Final
● Componentes y variables Final
● Auto-Layout
● Prototipado funcional
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Mi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital

Sistema de Grillas
¿Qué es Diseño modular?
El diseño modular es un enfoque donde se subdivide un sistema en partes
más pequeñas llamadas módulos, que pueden ser creadas
independientemente y luego utilizadas en diferentes sistemas.
Esta filosofía puede aplicarse en prácticamente todas las ramas del diseño,
aunque es adoptada especialmente en arquitectura y diseño industrial.
En diseño web, la modularidad consiste en el uso de bloques cuadrados o
rectangulares, alineados a una grilla, para presentar distintos tipos de
contenido.
Diseño Web modular
En los diseños modulares, la pantalla se divide horizontalmente en columnas de igual ancho y
verticalmente en filas de igual alto, opcionalmente con una separación (también de medida fija) entre
ellas. Cada módulo, bloque o widget de contenido tendrá un ancho equivalente a una o más columnas.
Esto tiene su origen en la aparición de los dispositivos móviles, dado que era mucho más complicado
adaptar una página web como unidad que ajustar los diferentes módulos a las dimensiones de cada
dispositivo.
Y es que con el diseño web modular los elementos del diseño cambian su ubicación, se vuelven más
pequeños o incluso desaparecen, en función del tipo de dispositivo desde el cual esté accediendo el
usuario.
Por otra parte, otra de las ventajas del diseño web modular es que posibilita un mayor dinamismo en el
diseño web, dado que los diseñadores web pueden modificar con mayor facilidad la posición de los
elementos.
Asimismo, el diseño modular, conlleva a la reutilización, lo que significa que se pueden usar de manera
consecutiva un mayor número de elementos de diseño, como pueden ser las imágenes de las páginas,
optimizando el trabajo de los diseñadores.
Tan simple como jugar con legos
¿Qué es una grilla?
Es un elemento sistémico, organizador y estructurante del espacio
gráfico.

Esto significa que la grilla, también llamada cuadrícula o retícula, es

básicamente una serie de líneas verticales y horizontales que dividen una
página en columnas, secciones y módulos, lo que permite a los
diseñadores administrar el espacio para poblarlo con diferentes contenidos.
Origen de las grillas
Históricamente las grillas están estrechamente relacionadas con el nacimiento de la
tipografía y por supuesto de la imprenta, pero desde mucho antes se utilizaban en
manuscritos para ordenar los textos y que finalmente el “usuario” pudiera leer fácilmente.

Con la revolución industrial esto fue mucho más desarrollado, ya que el proceso llevó a que
fuera necesario comunicar muchos mensajes al mismo tiempo sin hacer que estos
compitan. Actualmente su uso sigue vigente en muchas áreas del diseño, como: Diseño
gráfico editorial y en Diseño UX/UI.
¿Qué es el diseño editorial?
Se ha definido como una rama del diseño que busca la calidad en la narrativa visual en los
textos y se presenta en medios tales como periódicos, revistas, folletos, etc.

Siempre se debe tener en cuenta que la lectura sea fluida. La jerarquía es de lo más
importante, saber cómo guiar al lector dentro de la publicación

¿Qué quiero que lea primero?

¿Qué quiero que lea primero?
Tema: Grillas

El diseño editorial es el marco a través del que una historia se lee e

interpreta. Consiste tanto en la arquitectura global de la
publicación como en el tratamiento específico de la historia…

Autor/as/es: Martin Venezky

Grillas en UX/UI
Puede llegar a ser difícil imaginar una grilla en la diagramación de productos digitales, ya
que operan en múltiples dispositivos y tamaños de pantalla, pero lo cierto es que las
grillas llegan para salvar nuestros diseños del desorden y el caos, ayudando al ojo
humano a seguir un ritmo, sostener la jerarquía del contenido y le dicen a nuestro
cerebro donde esperar que se encuentren los elementos.

Crean consistencia incluso en el diseño responsivo entre dispositivos de diferentes

tamaños, contribuyendo a la proporción de los elementos en una página y que finalmente
todo siga una estructura de lectura que agrade al ojo.
Grillas
Mientras se desarrolla el proceso de prototipado debemos considerar la grilla.

La más popular actualmente está compuesta de 12 columnas (web) ya que muchos

frameworks de desarrollo web utilizan esta estructura, y porque el número 12 es fácil de
dividir en espacios más pequeños como 9, 8, 6, 4, 3, 2, 1 (Mobile)

Es importante construir una grilla bien trabajada y que pueda desenvolverse bien en
múltiples dispositivos, con el fin de facilitar que todos los sistemas y flujos conversen
entre sí, no solo en tipografía, color y forma, sino también en el invisible camino que sigue
el ojo humano en la lectura.

Si miramos un diseño y sentimos que algo está raro, es posible que sea una grilla mal
trabajada o contenidos que se ubicaron mal en la estructura definida.
La importancia de lo invisible
Es muy importante trabajar con atención el aire que se le da a los contenidos ya que este
no solo permite descansar la vista, sino que da ritmo al contenido y sostiene la jerarquía
que hayamos definido.

Prestar atención a los márgenes horizontales y a que todo en el sistema de grilla debería
tener el mismo aire y espaciado, por lo que hay que prestar atención a la estructura que
estamos construyendo.

No hay nada más incómodo y poco agradable a la vista que una acumulación de
elementos, donde no hay orden, sentido, ni espacio para respirar.
Como se puede apreciar en las imágenes, los módulos se ordenan utilizando
la Grilla: las cajas de texto y fotografías empiezan y terminan dentro de las estructuras
formadas por las columnas y calles de la misma.

Siempre dejando

libres los márgenes.

Comprender el diseño
En el diseño se utilizan elementos y espacios uniformes para fomentar la coherencia entre
plataformas, entornos y tamaños de pantalla.

Las áreas de diseño son la base de las

experiencias interactivas. Son los bloques
de construcción de un diseño y están
compuestos por elementos y
componentes que comparten una función
similar.

Las áreas de diseño también pueden

agrupar contenedores más pequeños.
1 Encabezado 2 Navegación 3 Cuerpo
Body y Menú
La región del BODY se utiliza para mostrar la
mayor parte del contenido de una aplicación.

Por lo general, contiene componentes como

listas, tarjetas, botones e imágenes.

La región del BODY utiliza valores de escala para

tres parámetros:
1. Dimensiones verticales y horizontales
2. Número de columnas
3. Márgenes.
El menú de navegación contiene componentes y
elementos de navegación, como el cajón de
navegación o el riel de navegación.
Ejemplo de Body y Menú Ayuda a los usuarios a navegar entre destinos en
una aplicación o acceder a acciones importantes.
Columnas, calles y márgenes
Las columnas nos sirven para colocar áreas
que luego pueden ser imágenes, videos o
textos según la necesidad de nuestros
elementos con los que se deba trabajar.

Esto puede ir dependiendo según nuestra

piezas a diseñar.

Vamos a ver distintas aplicaciones con

algunos ejemplos.
1 Columna 2 Calles 3 Márgenes
Columnas

En el diseño se utilizan elementos y espacios uniformes para fomentar la coherencia entre

plataformas, entornos y tamaños de pantalla.
Columnas

Las calles es el espacio entre columnas que ayuda a separar el contenido. Los anchos de las
calles son valores fijos en cada rango de punto de corte. Para adaptarse mejor a un tamaño de
pantalla dado, los anchos pueden cambiar según nuestra propuesta de diseño.
Márgenes
Los márgenes son el espacio entre el
contenido y los bordes izquierdo y derecho
de la pantalla. Los anchos de margen se
definen según el patrón de diseño.

Los márgenes nos ayudan a dar la

sensación de equilibrio visual ya que si
pegamos los elementos al borde es lo que
se suele decir que el diseño se cae, como si
estuviera saliendo de la pantalla y dificulta
la lectura a los usuarios.
Sobre las calles

En este ejemplo podemos ver como las calles son

el soporte de las columnas y las distintas áreas Veamos una distancia adecuada de las calles para
donde luego podemos ubicar los elementos con que las áreas tomen posición en el marco general.
los que vamos a trabajar.
Sobre las calles

Vemos un mal uso de las calles donde es casi de Márgenes y calles vemos que no tienen la misma
la misma medida la calle que las columnas medida y mantiene el criterio de diseño.
separando los elementos y quitándole
protagonismo a los elementos.
Grilla, Calles y Márgenes Horizontales

El planteo de la grilla en horizontal sigue los Las cuadrículas horizontales se pueden colocar para
mismos parámetros que de manera vertical adaptarse a diferentes alturas, dejando espacio para
las barras de aplicaciones u otras regiones de la
interfaz de usuario en la parte superior.
Grilla de cuadrícula

Una vez planteada la grilla general se puede hacer un sistema de retícula para contener
iconos, botones y otros elementos para mantener la coherencia visual.
Alineación de los elementos
Alineación de los elementos
Alineación de los elementos
Ejemplos de distintos tipos de maquetación y grilla
Ejemplos de distintos tipos de maquetación y grilla
Ejemplos de maquetación y grilla en APP
Ejemplos de maquetación y grilla en APP
Ejemplos de maquetación y grilla en APP
Prototipos
Prototipos
Prototipos
Creando grillas
paso a paso
Luego de crear un nuevo
frame con el tamaño del
dispositivo correcto,
agregamos una Layout grid
Cambiamos su tamaño y color
si lo deseamos
Cambiamos a Columns y
colocamos de 1 - 4 columnas
Cambiamos los valores de los
márgenes y las calles
En este paso podemos crear
un sistema de grillas, para
poder usar nuevamente la
grilla creada en próximas
pantallas.
Cuando aparece en las
opciones significa que todo
fue creado correctamente.
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:

Agregar al diseño de pantallas las Grillas y ordenar los elementos de cada pantalla de acuerdo a
estas, cuidando de que si ampliamos la imagen sea pixel perfect.

Para ello realizaremos las siguientes tareas:

● Elegir el sistema de grillas que necesita mi diseño, 1, 2, 3 o 4 columnas máximo.
● Márgenes de 16 dp para Android
● Mínimo de Calles de 8 dp para Android (si necesito más grande deben ser múltiplos de esa
medida).
● Medida recomendada para los elementos que pueden ser tocados por los usuarios: 48 dp
para Android
● Los elementos más pequeños deben medir como mínimo 24 dp x 24dp.
Aclaración: Recordar utilizar la Grilla de Columnas para el orden vertical y la Grilla de Cuadrícula
para el orden horizontal.
Ejemplo de entrega
UI KIT. VER EN FIGMA
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto