1. CARACTERíSTICAS DIGITALES DE COMPOSICIÓN
Retículas para Pantalla

2. Retículas Para Pantallas
A la hora de crear una nueva página web, el diseñador
tiene que enfrentar un mundo de posibilidades creativas
para lograr el objetivo comunicativo.
Siempre se debe tener en cuenta la logística y la
jerarquía visual, para definir la diagramación idónea de
acuerdo al tipo de contenido y recursos gráficos.
La diferencia entre el diseño para la pantalla y un impreso
(a pesar que el contenido sigue siendo el mismo), está en
definir un buen sistema reticular bien estructurado, para
aprovechar las facilidades que ofrecen las pantallas
digitales en comparación con los impresos en términos de
presentación, animación, color, columnas de texto, etc.

3. Retícula Visual
Ofrece la sensación de continuidad y permite asimilar rápidamente el contenido
y su distribución. En este caso, Hotmail siempre presenta la misma plantilla de
color azul y columnas de navegación, así se el usuario se dirija a cualquier
pestaña o herramienta de la misma.

4. Retícula Ampliada
Se caracteriza por la sensación de continuidad, la identificación y la
orientación. Esta página continúa en cada tema con la misma plantilla, la barra
de navegación, y facilita volver al Home en cada pestaña con el botón
REGRESAR en la parte superior izquierda.

5. Retícula Funcional y Jerárquica
Dispone de barras de navegación y bandas localizadoras para guiar al usuario, y
codificar los elementos funcionales.

6. Retícula Cromática y Sonido
Coloresnorma.com presenta una codificación de las funciones identificadas por
zonas de colores para cada pestaña interactiva y de información. Además, al
hacer clic sobre los temas no solo cambia de color sino también reproduce un
sonido característico. Esta página también propone una retícula visual.

8. Retícula de Movimiento y Tiempo
El objeto de la caja central de la página realiza un constante movimiento
(pauta de acción y velocidad), que atrae la atención de los usuarios para que
interactúen e informen.

9. Retícula de Referencia
Wikipedia mantiene siempre un carácter inamovible de su presentación.

10. Estructura Para Pantalla
Una maquetación ordenada y lógica genera su propia
identidad visual.
A continuación verán un ejemplo de cada 0tipo de Barra de
Navegación.

11. Barra de Navegación Horizontal en la Parte Superior

12. Barra de Navegación Horizontal en la Parte Inferior

13. Barra de Navegación Horizontal en la Parte Superior

14. Barra de Navegación Vertical en el Centro

15. Barra de Navegación Horizontal y Vertical

16. Barra de Navegación Vertical

17. Navegación en Toda la Pantalla

18. Diagramas
Diagrama de Flujo: Sirve para ver un primer modelo reticular
y determinar cómo distribuir la información (como el texto y
las imágenes) en pantalla, como vincular las distintas
páginas y qué cantidad de páginas se necesitan.
Diagrama de Escalera: El usuario únicamente puede seguir
una ruta predefinida, son posibilidad de decidir libremente
qué información desea visualizar.
Diagrama de Red: Permite al usuario moverse directamente
de una página a otra.
Diagrama de Árbol: Este modela permite la ramificación en
varios submenús.
Ejemplos a continuación de los 2 últimos diagramas descritos.

19. Diagrama de Red

20. Diagrama de Árbol