Transcribe your podcast
[00:00:00]

Si les digo la verdad,

[00:00:01]

existen diferentes trucos para conseguirmejores resultados en sus diseños.

[00:00:05]

Uno de ellos es el sistema de reticulado.

[00:00:07]

Mi nombre es Jennifer Lopez Arroba.

[00:00:09]

No, yo no soy esa en Twitter y hoyhablaremos sobre el sistema de reticulado.

[00:00:17]

Todos hemos escuchado alguna vezhablar sobre el sistema de retícula.

[00:00:21]

Este término se ha vuelto muy popular en

[00:00:23]

el diseño web, ya que los developersutilizan diferentes sistemas de frameworks

[00:00:27]

para agilizar su trabajoy conseguir mejores resultados.

[00:00:31]

El concepto de la retículono es algo nuevo.

[00:00:33]

De hecho, está ligado en toda la evoluciónde la humanidad en el arte y la escritura.

[00:00:39]

Cuando no existía la imprenta,los libros se tenían que hacer totalmente

[00:00:44]

a mano y había personas que sededicaban exclusivamente a esto.

[00:00:48]

Generalmente esas personas eran monjes

[00:00:50]

y todo el día se la pasabanescribiendo libros.

[00:00:53]

Estos monjes ya tenían un sistema

[00:00:55]

de retícula preestablecidopara hacer estos libros.

[00:00:59]

Esa retícula generalmente estabantiradas un poquito a la izquierda.

[00:01:02]

Todo el texto se acomodaba a la izquierda

[00:01:05]

y simplemente hacían pequeños cambios enel tamaño de las fuentes

[00:01:09]

para hacer un poquito de jerarquía visual,y que la lectura de estos libros,

[00:01:15]

que eran gigantes inmensos,no fuera tan complicada.

[00:01:18]

Cuando Gutenberg al fin se inventóla imprenta durante 450 años,

[00:01:24]

se mantuvo más o menos a la idea de estaretícula que utilizaban las personas

[00:01:28]

que escribían a mano porque era muy,muy eficiente.

[00:01:31]

Entonces, todas las primeras publicaciones

[00:01:34]

impresas tienen este mismo lookde la época donde Grauman,

[00:01:38]

cuando la revolución industrial estallóy las cosas empezaron a producir en masa.

[00:01:43]

Los arquitectos y diseñadores de estaépoca que un diseñador como tal no era

[00:01:48]

una profesión muy sentada,empezaron a formalizar los sistemas

[00:01:53]

de retícula y a preocuparse máspor todo este proceso del diseño.

[00:01:59]

La guerra tuvo una gran influenciaen el arte y en el diseño.

[00:02:03]

Muchos diseñadores decidieron migrar

[00:02:05]

a Suiza porque era un país neutral,como allí habían muchísimos diseñadores.

[00:02:09]

Empezaron a publicar diferentes cosas,

[00:02:12]

pero tenían que publicarlasen más de un idioma.

[00:02:14]

Y eso era un problema de diseño,

[00:02:17]

porque como en una sola página ibana mostrar tres idiomas tan distintos.

[00:02:22]

Entonces recurrieron a las mismas retícula

[00:02:25]

o a la misma idea y concepto de retículade aquellos escribas que antes hacían

[00:02:29]

los libros a manoy lo utilizaron para poder resolver esto

[00:02:33]

y para poder comunicar entres diferentes idiomas.

[00:02:37]

En las publicaciones y así cubrir unun muy amplio campo a nivel mundial.

[00:02:44]

A partir de esto,

[00:02:44]

el sistema y el funcionamientode las ridículas se formalizó un poco más

[00:02:50]

y ya las publicaciones, las revistas,los libros, los posters de esa época.

[00:02:56]

Todo empezó a utilizarun sistema de retícula.

[00:02:59]

No tan cuadriculado como en la época dondeno había imprenta,

[00:03:05]

pero síse dieron cuenta de que la retícula

[00:03:09]

siempre les ayudaba a resolver el problemaque querían, que querían comunicar.

[00:03:14]

El problema visual y del lenguajeque querían comunicar.

[00:03:17]

Por eso se empezaron a apoyarmuchísimo, muchísimo en eso.

[00:03:20]

Como dato curioso, en

[00:03:22]

este tiempo se inventaron tipografíascomo la Helvética y la Helvética.

[00:03:26]

Se inventó principalmente por eso,

[00:03:29]

porque necesitaban una tipografía versátilque pudieran utilizar en distintos idiomas

[00:03:35]

y que fueran muy,muy entendible y muy fácil de leer.

[00:03:39]

Los diseñadores identificaron que el uso

[00:03:42]

de las retícula les ayudaba a agilizarsu trabajo, igual que los developers.

[00:03:48]

También identificaron que el uso de estosframeworks les ha ayudado a implementar su

[00:03:52]

trabajo de una maneramuchísimo más rápida.

[00:03:55]

Les doy un ejemplo si ustedes vana una página como Twitter

[00:03:58]

y primero están en su timeliney luego van y revisan el perfil o entran

[00:04:03]

a la sección de configuración,las tres cosas se leen exactamente igual.

[00:04:09]

Esto es porque utilizan retícula

[00:04:12]

para que toda la lectura del sitiosea similar, sea consistente.

[00:04:17]

La segunda característica.

[00:04:19]

Es que el diseño se vetotalmente equilibrado.

[00:04:22]

Si utilizamos retículapara empezar a componer nuestros

[00:04:26]

elementos, no importa si son imágenes, sies texto, si es lineal, si son figuras.

[00:04:34]

Si utilizamos la retícula de manera

[00:04:37]

correcta, vamos a conseguir un equilibriovisual y que para el ojo no sea tan

[00:04:43]

extraño tener la lecturade esto, de esta imagen.

[00:04:48]

La verdadera función del diseñoes comunicar algo.

[00:04:53]

Si tú no comunicas bien,o si tú no sabes comunicar bien una idea

[00:04:59]

visual o escrita, estás fallandoy algo no está funcionando.

[00:05:04]

Las personas que empezarona desarrollar la retícula.

[00:05:07]

La gente que empezó a trabajar con éxito,

[00:05:09]

los artistas, los escribas, losdiseñadores, los primeros diseñadores.

[00:05:13]

Empezaron a utilizar este método

[00:05:15]

porque era un camino muy fácil parapoder resolver un problema de diseño.

[00:05:21]

Una de las ventajas de utilizar retículo

[00:05:24]

es que va a agilizar tu proceso de diseño,el proceso de acomodar cosas.

[00:05:29]

El principal problema de diseñoes la composición.

[00:05:33]

Si una composición está bien hecha,es legible.

[00:05:39]

Para el ser humano legible no quiere decir

[00:05:43]

que sea legible de lectura, de palabraslegible visualmente porque tú no llegas.

[00:05:50]

O sea, por ejemplo,cuando tú vas a un landing,

[00:05:52]

tú no entras y lees,generalmente simplemente das vistazos,

[00:05:57]

lees con tus con imágenes

[00:06:00]

sí, una sí, una retícula se aplica bien,puede resolver ese problema de composición

[00:06:07]

y tú vas a entender quémensaje te están comunicando.

[00:06:11]

De forma visual y de forma escrita.

[00:06:14]

Por más que un diseñador lleve muchos

[00:06:16]

años, años, años diseñando,pero lo haga mal.

[00:06:23]

Olvidé los fundamentos de diseño,

[00:06:25]

olvide cosas tan importantescomo aplicar retículo.

[00:06:31]

Nunca va, nunca va a poder solucionar biencualquier problema que le pongan, o sea,

[00:06:37]

ni siquiera ni digital ni impreso,porque olvidó.

[00:06:41]

Estos fundamentos,

[00:06:43]

cosas como el equilibrio en la imagen,cosas como el ritmo,

[00:06:48]

cosas como la jerarquía visual,que es lo que la mayoría de personas

[00:06:52]

fallan mal, porque la jerarquía visualayuda a que tu leas fácilmente

[00:06:58]

la jerarquía, guía tu ojohacia donde tu quieres.

[00:07:02]

Si tu lo manejas bien,ayudas a que la lectura sea muy fluida.

[00:07:10]

El contexto en general de la pieza.

[00:07:12]

Muchos diseñadores fallan

[00:07:15]

por olvidar los fundamentos esencialesde diseño,

[00:07:20]

por olvidar que cuando se hacían las cosasa mano y cuando

[00:07:24]

se se sintió que se necesitaba esanecesidad,

[00:07:28]

cuando las personas que se sentabana escribir a mano los libros que no habían

[00:07:31]

imprenta y sabían que tenían que escribiruna obra tan grande,

[00:07:35]

se tenía que ver consistente y que por esoresolvieron crear la retícula.

[00:07:40]

Cuando un diseñador o una persona

[00:07:43]

que trata de componer algoolvida el uso de la retícula.

[00:07:47]

No va a solucionar de muy buena forma

[00:07:51]

el problema visual y lo que seaque esté haciendo no va a funcionar.

[00:07:56]

El diseño digital es muy, muy parecido alde los impresos en muchas cosas.

[00:08:02]

Si no lo has notado, más del 90 por cientodel diseño en web es tipografía.

[00:08:09]

Entonces vienen las bases del diseño web,de la diagramación de revistas.

[00:08:16]

Por eso la retícula en web son casi

[00:08:20]

la misma cosa que cuando tú vas a hacer

[00:08:22]

una revista y tienesque plantear tus retículo.

[00:08:26]

La retícula tienen dos partes.

[00:08:29]

Son columnas y entre cada columnahay un espacio en blanco.

[00:08:35]

Ese espacio tiene el nombre de media nil

[00:08:38]

y es consistente a través del contenedor.

[00:08:42]

Esto mismo pasa en una revista.

[00:08:44]

Se utiliza en las mismas columnas,con los mismos espacios en blanco.

[00:08:49]

Y ya es cuestión de cada unocolocar el número de columnas que quiera,

[00:08:55]

ya sea vertical u horizontalmente.

[00:08:57]

Para empezar,acomodar los módulos, las imágenes,

[00:09:02]

el texto y así empezar a crearcomposiciones que tengan

[00:09:07]

las características que antesya les había mencionado.

[00:09:10]

Ritmo, equilibrio, contexto, flexibilidad.

[00:09:14]

Ahora mismo, con los diferentes tamaños

[00:09:16]

de pantallas y dispositivos móvilesque hay en el mercado disponibles,

[00:09:22]

no es tan cerrado la forma enla que debemos utilizar las retícula.

[00:09:28]

El tamaño del contenedor.Hace unos años,

[00:09:31]

960 píxeles era el estándarde la industria,

[00:09:35]

pero con todos estos dispositivosy nuevas pantallas ya no es así.

[00:09:39]

Y cada uno de ustedes tiene el poderpara elegir el ancho de estos retícula.

[00:09:45]

Y cómo las quieren manejar?