Grillas

7,259 views
6,926 views

Published on

Published in: Design, Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,259
On SlideShare
0
From Embeds
0
Number of Embeds
82
Actions
Shares
0
Downloads
47
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Grillas

  1. 1. Diseñando con Grillas
  2. 2. Patricio Rodríguez M. Antes de pensar en contenedores, estilos y tags…definamos la grilla constructiva
  3. 3. <ul><li>&quot;Una Grilla CSS debe ser fácil de entender, usar y modificar, económica en el uso del código y flexible para adaptarse a la mayor cantidad de necesidades de diagramación&quot; </li></ul>
  4. 4. Patricio Rodríguez M.
  5. 5. <ul><li>Durante los años '50 las grillas fueron una parte fundamental de una corriente de diseño conocida como el Estilo Tipográfico Internacional </li></ul><ul><li>o Estilo Suizo . La premisa de este estilo está en la búsqueda de la mera función a través de la legibilidad, la objetividad y la simpleza para cada pieza visual </li></ul>
  6. 6. Patricio Rodríguez M.
  7. 7. <ul><li>Hoy, este estilo continúa influenciando el trabajo </li></ul><ul><li>de muchos diseñadores web modernos. En </li></ul><ul><li>los Estados Unidos, el mejor ejemplo lo podemos encontrar en el blog de Khoi Vinh , director de diseño del New York Times Online . </li></ul><ul><li>En Latinoamérica, diarios en la Web como Clarín </li></ul><ul><li>de Argentina, recientemente rediseñado, demuestran claramente una inclinación al uso de </li></ul><ul><li>grillas tipográficas para su armado. </li></ul>
  8. 8. Patricio Rodríguez M.
  9. 9. <ul><li>Las ventajas de diseñar con una grilla de base </li></ul><ul><li>son evidentes. El armazón de columnas y filas </li></ul><ul><li>resultante, contrariamente a lo que se </li></ul><ul><li>piensa, no limita la creatividad, sino que la anima. </li></ul><ul><li>La grilla permite una disposición natural y segura de los elementos </li></ul>
  10. 10. Patricio Rodríguez M.
  11. 11. <ul><li>Composición de una grilla </li></ul><ul><li>Como su nombre lo indica, la grilla es una malla de columnas y filas separadas por espacios. </li></ul><ul><li>Este espacio entre columnas, conocido </li></ul><ul><li>como gutter , es muy útil para sugerir la idea </li></ul><ul><li>de que el diseño respira y de que sus elementos </li></ul><ul><li>no están pegados unos con otros. </li></ul>
  12. 12. Patricio Rodríguez M.
  13. 13. <ul><li>Modos </li></ul><ul><li>En cada columna y/o fila, ubicaremos el contenido </li></ul><ul><li>disponible, ya sea texto o imágenes. </li></ul><ul><li>Si, por ejemplo, tenemos una grilla con doce columnas, podemos unir tres columnas en el lado </li></ul><ul><li>izquierdo para formar una barra de navegación </li></ul><ul><li>y dejar las nueve restantes para el </li></ul><ul><li>contenido. </li></ul>
  14. 14. Patricio Rodríguez M.
  15. 15. Patricio Rodríguez M.
  16. 16. Patricio Rodríguez M. pasos para definir una grilla
  17. 17. <ul><li>Para construir una grilla, primero debemos conocer los elementos que vamos a colocar en la página. </li></ul>
  18. 18. <ul><li>Conocer de antemano el tamaño de los elementos es muy importante, ya que a partir de esto empezaremos a jugar con el ancho de las columnas de nuestra grilla para acomodarlos. </li></ul>
  19. 19. Patricio Rodríguez M.
  20. 20. <ul><li>Otro requisito es definir el ancho del sitio. </li></ul><ul><li>Podemos tener en mente diseñar para pantallas con resoluciones de 1024 x 768 píxeles, por lo que un canvas o lienzo de trabajo de unos 900 píxeles de ancho es suficiente. </li></ul>
  21. 21. <ul><li>También podemos basarnos en una grilla de doce </li></ul><ul><li>columnas con tres supercolumnas. </li></ul><ul><li>Esta alternativa nos </li></ul><ul><li>permite columnas más amplias para textos e imágenes. </li></ul>Patricio Rodríguez M.
  22. 22. <ul><li>subdividir el espacio </li></ul>Patricio Rodríguez M.
  23. 23. <ul><li>ubicar los bloques del contenido. </li></ul><ul><li>En negro y sobre la grilla, perfectamente alineados, </li></ul><ul><li>los elementos que requiere el diseño. Como se ve, </li></ul><ul><li>todo se podría modificarse fácilmente. </li></ul>Patricio Rodríguez M.
  24. 24. Patricio Rodríguez M. Propuesta. basado en la explicación del uso de la grilla, trabajar el contenido de sus layouts en formato de grilla constructiva Jueves 17 de septiembre

×