Transcript of Sistemas de retículas: resolviendo problemas de diseño - Platzi
Our favorite podcastsSi les digo la verdad,
existen diferentes trucos para conseguirmejores resultados en sus diseños.
Uno de ellos es el sistema de reticulado.
Mi nombre es Jennifer Lopez Arroba.
No, yo no soy esa en Twitter y hoyhablaremos sobre el sistema de reticulado.
Todos hemos escuchado alguna vezhablar sobre el sistema de retícula.
Este término se ha vuelto muy popular en
el diseño web, ya que los developersutilizan diferentes sistemas de frameworks
para agilizar su trabajoy conseguir mejores resultados.
El concepto de la retículono es algo nuevo.
De hecho, está ligado en toda la evoluciónde la humanidad en el arte y la escritura.
Cuando no existía la imprenta,los libros se tenían que hacer totalmente
a mano y había personas que sededicaban exclusivamente a esto.
Generalmente esas personas eran monjes
y todo el día se la pasabanescribiendo libros.
Estos monjes ya tenían un sistema
de retícula preestablecidopara hacer estos libros.
Esa retícula generalmente estabantiradas un poquito a la izquierda.
Todo el texto se acomodaba a la izquierda
y simplemente hacían pequeños cambios enel tamaño de las fuentes
para hacer un poquito de jerarquía visual,y que la lectura de estos libros,
que eran gigantes inmensos,no fuera tan complicada.
Cuando Gutenberg al fin se inventóla imprenta durante 450 años,
se mantuvo más o menos a la idea de estaretícula que utilizaban las personas
que escribían a mano porque era muy,muy eficiente.
Entonces, todas las primeras publicaciones
impresas tienen este mismo lookde la época donde Grauman,
cuando la revolución industrial estallóy las cosas empezaron a producir en masa.
Los arquitectos y diseñadores de estaépoca que un diseñador como tal no era
una profesión muy sentada,empezaron a formalizar los sistemas
de retícula y a preocuparse máspor todo este proceso del diseño.
La guerra tuvo una gran influenciaen el arte y en el diseño.
Muchos diseñadores decidieron migrar
a Suiza porque era un país neutral,como allí habían muchísimos diseñadores.
Empezaron a publicar diferentes cosas,
pero tenían que publicarlasen más de un idioma.
Y eso era un problema de diseño,
porque como en una sola página ibana mostrar tres idiomas tan distintos.
Entonces recurrieron a las mismas retícula
o a la misma idea y concepto de retículade aquellos escribas que antes hacían
los libros a manoy lo utilizaron para poder resolver esto
y para poder comunicar entres diferentes idiomas.
En las publicaciones y así cubrir unun muy amplio campo a nivel mundial.
A partir de esto,
el sistema y el funcionamientode las ridículas se formalizó un poco más
y ya las publicaciones, las revistas,los libros, los posters de esa época.
Todo empezó a utilizarun sistema de retícula.
No tan cuadriculado como en la época dondeno había imprenta,
pero síse dieron cuenta de que la retícula
siempre les ayudaba a resolver el problemaque querían, que querían comunicar.
El problema visual y del lenguajeque querían comunicar.
Por eso se empezaron a apoyarmuchísimo, muchísimo en eso.
Como dato curioso, en
este tiempo se inventaron tipografíascomo la Helvética y la Helvética.
Se inventó principalmente por eso,
porque necesitaban una tipografía versátilque pudieran utilizar en distintos idiomas
y que fueran muy,muy entendible y muy fácil de leer.
Los diseñadores identificaron que el uso
de las retícula les ayudaba a agilizarsu trabajo, igual que los developers.
También identificaron que el uso de estosframeworks les ha ayudado a implementar su
trabajo de una maneramuchísimo más rápida.
Les doy un ejemplo si ustedes vana una página como Twitter
y primero están en su timeliney luego van y revisan el perfil o entran
a la sección de configuración,las tres cosas se leen exactamente igual.
Esto es porque utilizan retícula
para que toda la lectura del sitiosea similar, sea consistente.
La segunda característica.
Es que el diseño se vetotalmente equilibrado.
Si utilizamos retículapara empezar a componer nuestros
elementos, no importa si son imágenes, sies texto, si es lineal, si son figuras.
Si utilizamos la retícula de manera
correcta, vamos a conseguir un equilibriovisual y que para el ojo no sea tan
extraño tener la lecturade esto, de esta imagen.
La verdadera función del diseñoes comunicar algo.
Si tú no comunicas bien,o si tú no sabes comunicar bien una idea
visual o escrita, estás fallandoy algo no está funcionando.
Las personas que empezarona desarrollar la retícula.
La gente que empezó a trabajar con éxito,
los artistas, los escribas, losdiseñadores, los primeros diseñadores.
Empezaron a utilizar este método
porque era un camino muy fácil parapoder resolver un problema de diseño.
Una de las ventajas de utilizar retículo
es que va a agilizar tu proceso de diseño,el proceso de acomodar cosas.
El principal problema de diseñoes la composición.
Si una composición está bien hecha,es legible.
Para el ser humano legible no quiere decir
que sea legible de lectura, de palabraslegible visualmente porque tú no llegas.
O sea, por ejemplo,cuando tú vas a un landing,
tú no entras y lees,generalmente simplemente das vistazos,
lees con tus con imágenes
sí, una sí, una retícula se aplica bien,puede resolver ese problema de composición
y tú vas a entender quémensaje te están comunicando.
De forma visual y de forma escrita.
Por más que un diseñador lleve muchos
años, años, años diseñando,pero lo haga mal.
Olvidé los fundamentos de diseño,
olvide cosas tan importantescomo aplicar retículo.
Nunca va, nunca va a poder solucionar biencualquier problema que le pongan, o sea,
ni siquiera ni digital ni impreso,porque olvidó.
Estos fundamentos,
cosas como el equilibrio en la imagen,cosas como el ritmo,
cosas como la jerarquía visual,que es lo que la mayoría de personas
fallan mal, porque la jerarquía visualayuda a que tu leas fácilmente
la jerarquía, guía tu ojohacia donde tu quieres.
Si tu lo manejas bien,ayudas a que la lectura sea muy fluida.
El contexto en general de la pieza.
Muchos diseñadores fallan
por olvidar los fundamentos esencialesde diseño,
por olvidar que cuando se hacían las cosasa mano y cuando
se se sintió que se necesitaba esanecesidad,
cuando las personas que se sentabana escribir a mano los libros que no habían
imprenta y sabían que tenían que escribiruna obra tan grande,
se tenía que ver consistente y que por esoresolvieron crear la retícula.
Cuando un diseñador o una persona
que trata de componer algoolvida el uso de la retícula.
No va a solucionar de muy buena forma
el problema visual y lo que seaque esté haciendo no va a funcionar.
El diseño digital es muy, muy parecido alde los impresos en muchas cosas.
Si no lo has notado, más del 90 por cientodel diseño en web es tipografía.
Entonces vienen las bases del diseño web,de la diagramación de revistas.
Por eso la retícula en web son casi
la misma cosa que cuando tú vas a hacer
una revista y tienesque plantear tus retículo.
La retícula tienen dos partes.
Son columnas y entre cada columnahay un espacio en blanco.
Ese espacio tiene el nombre de media nil
y es consistente a través del contenedor.
Esto mismo pasa en una revista.
Se utiliza en las mismas columnas,con los mismos espacios en blanco.
Y ya es cuestión de cada unocolocar el número de columnas que quiera,
ya sea vertical u horizontalmente.
Para empezar,acomodar los módulos, las imágenes,
el texto y así empezar a crearcomposiciones que tengan
las características que antesya les había mencionado.
Ritmo, equilibrio, contexto, flexibilidad.
Ahora mismo, con los diferentes tamaños
de pantallas y dispositivos móvilesque hay en el mercado disponibles,
no es tan cerrado la forma enla que debemos utilizar las retícula.
El tamaño del contenedor.Hace unos años,
960 píxeles era el estándarde la industria,
pero con todos estos dispositivosy nuevas pantallas ya no es así.
Y cada uno de ustedes tiene el poderpara elegir el ancho de estos retícula.
Y cómo las quieren manejar?