• Share on Google+

grillas everywhere

Muchas cosas usan grillas, no las vemos, pero están ahí, sosteniendo el diseño, estas son usadas por diseñadores de interiores, industriales, urbanistas, arquitectos, diseñadores de impresión, ux, web, moda, etc… Las grillas en el diseño web proporcionan organización visual, continuidad, relación de piezas entre si, estética, control del proyecto y comodidad para el usuario. Por otra parte, también nos a ayuda en la producción ya que no se comienza de cero, reduciendo tiempos en el desarrollo. Existen frameworks de grillas como Bootstrap960 Grid System y Blueprint.

Un acercamiento al Uso de grillas en Diseño Web

Uso de grillas en Diseño Web

Márgenes
Los márgenes definen el límite del contenido del sitio, estos pueden no ser iguales en todo el sitio (pero normalmente son consistentes entre las páginas).

Rejas
Las rejas dividen el espacio interior de la página en partes uniformes, es el espacio en “blanco” entre las grillas. Estás pueden ser organizadas de forma horizontal, vertical o ambas.

Grillas
Este es el lugar donde se coloca el contenido ya sean textos y/o imágenes. Estos determinan la ubicación y el tamaño, pero debemos saber que si tenemos una grafica que se sale de una grilla, no significa que no se pueda hacer (mas adelante lo menciono).

¿Si diseño mis sitios con grillas, se va a ver igual? que FOME.

¡No! esta es una pregunta que tenemos por desconocimiento de esta técnica, en este layout tenemos las grillas, esto es sólo una parte del diseño en general, estas no son para rellenar con algo, sino para ayudar a la organización de los espacios. Si tenemos esta parte resuelta tendremos tiempo para centrarnos en otras cosas como el color, texturas, tipografías, etc.. (Ver ejemplo: cada diseño tiene una estructura de grillas similar (3 columnas), donde la comunicación y el diseño visual son distintos.

flourish

knowledgepharmacy

Cabrillo Coastal

Salirse de la grilla.

Otro ejemplo para demostrar lo mencionado anteriormente (salirse de la grilla, siempre y cuando la comunicación lo amerite).

Highrise

La página de tarifas de Highrise es un buen ejemplo. El plan “Plus” es el plan más popular y conveniente, por lo que para llamar la atención le han dado más importancia aumentándolo de tamaño con respecto a los otros.

Consideraciones

Una vez que tengamos lista nuestras grillas, nosotros como diseñadores somos quienes tomamos la decisión de cómo salir de esta cuando esto lo amerite. Esto en ningún caso significa que estamos usando malas prácticas. Los elementos pueden cruzar desde una columna a otra columna, hasta las podemos extender del inicio al final de la grillas.  “Personalmente creo que esta técnica no es necesaria para proyectos chicos.”

 

  • Responder
    Author
    IPhone 3/4/4S Grid PSD | Miguel Salazar

    […]  Uso de Grillas en el diseño web y app […]