Diseño con grillas

GRILLAS Y RETICULAS PARA WEB

{ Taller
Diseño Gráﬁco 6
DISEÑANDO CON GRILLAS

TALLER DISEÑO GRÁFICO VI DUOC UC SEPTIEMBRE2010
lunes 27 de septiembre de 2010


{ ANTES DE PENSAR EN CONTENEDORES, ESTILOS
Y TAGS…DEFINAMOS LA GRILLA CONSTRUCTIVA



"Una Grilla CSS debe ser fácil de entender, usar
y modiﬁcar, económica en el uso del código y
ﬂexible para adaptarse a la mayor cantidad de
necesidades de diagramación"


PERFIL DE USUARIOS

{ ¿CUAL ES
SU UTILIDAD?

TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010

PERFIL DE USUARIOS

{
- Criterio normalizado de presentación de elementos
y/o recursos.
- Aporta practicidad, armoniza la estética.
Permite establecer patrones de regularidad visual.
- Divide el espacio en campos o espacios más
pequeños


PERFIL DE USUARIOS


PERFIL DE USUARIOS

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


PERFIL DE USUARIOS

ESTILO
SUIZO

PERFIL DE USUARIOS

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.


PERFIL DE USUARIOS

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


PERFIL DE USUARIOS

COMPOSICIÓN
DE UNA GRILLA


PERFIL DE USUARIOS

{
Como su nombre lo indica, la grilla es una
malla de columnas y ﬁlas 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.


PERFIL DE USUARIOS

{
En cada columna y/o ﬁla, 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.


PERFIL DE USUARIOS

{ PASOS PARA
CONSTRUIR UNA GRILLA


PERFIL DE USUARIOS

{ primero debemos conocer los
elementos que vamos a colocar
en la página.


PERFIL DE USUARIOS

{
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.


PERFIL DE USUARIOS

{
Otro requisito es deﬁnir 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 960 píxeles de ancho es
suﬁciente.


PERFIL DE USUARIOS

Podemos basarnos en una
grilla de doce
columnas con tres
supercolumnas.

Esta alternativa nos
permite columnas más
amplias para textos e
imágenes.


PERFIL DE USUARIOS

subdividir el espacio


PERFIL DE USUARIOS

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 modiﬁcarse
fácilmente.


PERFIL DE USUARIOS

{ OBJETIVO
DE LAS GRILLAS


PERFIL DE USUARIOS

1.tratar de automatizar/standarizar lo máximo posible el
proceso de la construcción de la estructura de cualquier
sitio.
2.mantener la coherencia visual entre todas las vistas del
sitio web.
3.para facilitar el uso, el entendimiento y su modiﬁcación,
procurando economía en el uso de código y ﬂexibilidad
para adaptarse a la mayor cantidad de necesidades de
diagramación.


PERFIL DE USUARIOS

grid.mindplay.dk


Diseño con grillas

Más contenido relacionado

La actualidad más candente

Similar a Diseño con grillas

Más de iConstruye

Último

Diseño con grillas