Your SlideShare is downloading. ×
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Grillas
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Grillas

6,626

Published on

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

No Downloads
Views
Total Views
6,626
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
43
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Diseñando con 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"
  • 4. Patricio Rodríguez M.
  • 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
  • 6. Patricio Rodríguez M.
  • 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.
  • 8. Patricio Rodríguez M.
  • 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
  • 10. Patricio Rodríguez M.
  • 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.
  • 12. Patricio Rodríguez M.
  • 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.
  • 14. Patricio Rodríguez M.
  • 15. Patricio Rodríguez M.
  • 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.
  • 19. Patricio Rodríguez M.
  • 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

×