Grillas
Descargar como PPT, PDF2 recomendaciones1,733 vistas
El documento describe los beneficios de diseñar páginas web usando una grilla. Explica que una grilla divide el espacio en columnas y filas para facilitar la organización de contenido de manera natural y flexible. También detalla los pasos para definir una grilla efectiva, incluyendo conocer los elementos a colocar, establecer el ancho total, y dividir el espacio en columnas para ubicar bloques de contenido.
Grillas
- 2. Patricio Rodríguez M. Antes de pensar en contenedores, estilos y tags…definamos la grilla constructiva
- 3. "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"
- 5. Durante los años '50 las grillas fueron una parte fundamental de una corriente de diseño conocida como el Estilo Tipográfico Internacional 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
- 7. Hoy, este estilo continúa influenciando el trabajo de muchos diseñadores web modernos. En los Estados Unidos, el mejor ejemplo lo podemos encontrar en el blog de Khoi Vinh , director de diseño del New York Times Online . En Latinoamérica, diarios en la Web como Clarín de Argentina, recientemente rediseñado, demuestran claramente una inclinación al uso de grillas tipográficas para su armado.
- 9. Las ventajas de diseñar con una grilla de base son evidentes. El armazón de columnas y filas resultante, contrariamente a lo que se piensa, no limita la creatividad, sino que la anima. La grilla permite una disposición natural y segura de los elementos
- 11. Composición de una grilla Como su nombre lo indica, la grilla es una malla de columnas y filas separadas por espacios. Este espacio entre columnas, conocido como gutter , es muy útil para sugerir la idea de que el diseño respira y de que sus elementos no están pegados unos con otros.
- 13. Modos En cada columna y/o fila, ubicaremos el contenido disponible, ya sea texto o imágenes. Si, por ejemplo, tenemos una grilla con doce columnas, podemos unir tres columnas en el lado izquierdo para formar una barra de navegación y dejar las nueve restantes para el contenido.
- 16. Patricio Rodríguez M. pasos para definir una grilla
- 17. Para construir una grilla, primero debemos conocer los elementos que vamos a colocar en la página.
- 18. 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.
- 20. Otro requisito es definir el ancho del sitio. 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.
- 21. También podemos basarnos en una grilla de doce columnas con tres supercolumnas. Esta alternativa nos permite columnas más amplias para textos e imágenes. Patricio Rodríguez M.
- 22. subdividir el espacio Patricio Rodríguez M.
- 23. ubicar los bloques del contenido. En negro y sobre la grilla, perfectamente alineados, los elementos que requiere el diseño. Como se ve, todo se podría modificarse fácilmente. Patricio Rodríguez M.
- 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