Grilla estructura
-
Upload
guest0cab7c70 -
Category
Design
-
view
2.725 -
download
4
description
Transcript of Grilla estructura
![Page 2: Grilla estructura](https://reader030.fdocuments.ec/reader030/viewer/2022020710/5497d513b479594c4d8b52bc/html5/thumbnails/2.jpg)
Grilla
- 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
- Organización reticular (a modo de reja - para contener elementos)
- (Dis. Editorial) Los campos se separan entre sí por espacios intermedios. En web no es una condición indispensable, ni imprescindible.
utilidad
Mg. Gabriela Tallarico – [email protected]
![Page 4: Grilla estructura](https://reader030.fdocuments.ec/reader030/viewer/2022020710/5497d513b479594c4d8b52bc/html5/thumbnails/4.jpg)
Estructuras básicas
![Page 5: Grilla estructura](https://reader030.fdocuments.ec/reader030/viewer/2022020710/5497d513b479594c4d8b52bc/html5/thumbnails/5.jpg)
Estructuras básicas
![Page 6: Grilla estructura](https://reader030.fdocuments.ec/reader030/viewer/2022020710/5497d513b479594c4d8b52bc/html5/thumbnails/6.jpg)
Estructuras básicas
![Page 7: Grilla estructura](https://reader030.fdocuments.ec/reader030/viewer/2022020710/5497d513b479594c4d8b52bc/html5/thumbnails/7.jpg)
Estructuras básicas
![Page 8: Grilla estructura](https://reader030.fdocuments.ec/reader030/viewer/2022020710/5497d513b479594c4d8b52bc/html5/thumbnails/8.jpg)
Grilla en el diseño web
- tratar de automatizar/standarizar lo máximo posible el proceso de la construcción de la estructura de cualquier sitio.
- mantener la coherencia visual entre todas las vistas del sitio web.
- para facilitar el uso, el entendimiento y su modificación, procurando economía en el uso de código y flexibilidad para adaptarse a la mayor cantidad de necesidades de diagramación.
objetivo
Mg. Gabriela Tallarico – [email protected]
![Page 9: Grilla estructura](https://reader030.fdocuments.ec/reader030/viewer/2022020710/5497d513b479594c4d8b52bc/html5/thumbnails/9.jpg)
Grilla en el diseño web
ejemplo
![Page 10: Grilla estructura](https://reader030.fdocuments.ec/reader030/viewer/2022020710/5497d513b479594c4d8b52bc/html5/thumbnails/10.jpg)
Grilla en el diseño web
ejemplo
![Page 11: Grilla estructura](https://reader030.fdocuments.ec/reader030/viewer/2022020710/5497d513b479594c4d8b52bc/html5/thumbnails/11.jpg)
Grilla en el diseño web
1. Marcar la caja contenedora externa (liquid o fix)
2. Identificar módulos o unidades de contenidos (principal diferencia con gráfica papel).
3. Trazar las líneas verticales principales y horizontales.
4. Construir cajas contenedoras entre las líneas establecidas.
construcción