SlideShare una empresa de Scribd logo
CARACTERíSTICAS DIGITALES DE COMPOSICIÓN
                         Retículas para Pantalla
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.
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.
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.
Retícula Funcional y Jerárquica




 Dispone de barras de navegación y bandas localizadoras para guiar al usuario, y
 codificar los elementos funcionales.
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.
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.
Retícula de Referencia




  Wikipedia mantiene siempre un carácter inamovible de su presentación.
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.
Barra de Navegación Horizontal en la Parte Superior
Barra de Navegación Horizontal en la Parte Inferior
Barra de Navegación Horizontal en la Parte Superior
Barra de Navegación Vertical en el Centro
Barra de Navegación Horizontal y Vertical
Barra de Navegación Vertical
Navegación en Toda la Pantalla
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.
Diagrama de Red
Diagrama de Árbol
Reticulas para Pantalla
Reticulas para Pantalla
Reticulas para Pantalla

Más contenido relacionado

Destacado

Reglas para Pantalla
Reglas para PantallaReglas para Pantalla
Reglas para PantallaDianeLadino
 
Reticulas para Pantalla
Reticulas para Pantalla Reticulas para Pantalla
Reticulas para Pantalla DianeLadino
 
Fundamentos del diseño
Fundamentos del diseño  Fundamentos del diseño
Fundamentos del diseño
DianeLadino
 
Fundamentos del Diseño
Fundamentos del Diseño   Fundamentos del Diseño
Fundamentos del Diseño
DianeLadino
 
Caracteristicas Digitales de Composición
Caracteristicas Digitales de ComposiciónCaracteristicas Digitales de Composición
Caracteristicas Digitales de ComposiciónDianeLadino
 
Monitoreo Manual de Redes Sociales
Monitoreo Manual de Redes SocialesMonitoreo Manual de Redes Sociales
Monitoreo Manual de Redes Sociales
DianeLadino
 
Presentacion espacio publicitario
Presentacion  espacio  publicitarioPresentacion  espacio  publicitario
Presentacion espacio publicitario
los libertadores
 
Caracteristicas Digitales de Composición
Caracteristicas Digitales de ComposiciónCaracteristicas Digitales de Composición
Caracteristicas Digitales de ComposiciónDianeLadino
 
Espacio en el mensaje publicitario
Espacio en el mensaje publicitarioEspacio en el mensaje publicitario
Espacio en el mensaje publicitario
Andrés Lozano
 
01 partes de un anuncio
01 partes de un anuncio01 partes de un anuncio
01 partes de un anuncio
César Juárez
 
Cap 12 Estrategias creativas y procesos creativos
Cap 12 Estrategias creativas y procesos creativosCap 12 Estrategias creativas y procesos creativos
Cap 12 Estrategias creativas y procesos creativosMilton Coca
 
El Anuncio Publicitario
El Anuncio PublicitarioEl Anuncio Publicitario
El Anuncio Publicitario
Chris Ztar
 
ANÁLISIS DE UN ANUNCIO PUBLICITARIO
ANÁLISIS DE UN ANUNCIO PUBLICITARIOANÁLISIS DE UN ANUNCIO PUBLICITARIO
ANÁLISIS DE UN ANUNCIO PUBLICITARIO
Maria Diez Ajo
 
Guía para analizar anuncios publicitarios ( imágenes)
Guía para analizar anuncios publicitarios ( imágenes)Guía para analizar anuncios publicitarios ( imágenes)
Guía para analizar anuncios publicitarios ( imágenes)
luilop
 
AnáLisis Publicitario Coca Cola
AnáLisis Publicitario Coca ColaAnáLisis Publicitario Coca Cola
AnáLisis Publicitario Coca Colaalbatecnoloxia
 
Elementos en el Mensaje Publicitario
Elementos en el Mensaje PublicitarioElementos en el Mensaje Publicitario
Elementos en el Mensaje Publicitario
DianeLadino
 
Mensaje Publicitario
Mensaje PublicitarioMensaje Publicitario
Mensaje Publicitarioguestf11445
 

Destacado (19)

Reglas para Pantalla
Reglas para PantallaReglas para Pantalla
Reglas para Pantalla
 
Reticulas para Pantalla
Reticulas para Pantalla Reticulas para Pantalla
Reticulas para Pantalla
 
Fundamentos del diseño
Fundamentos del diseño  Fundamentos del diseño
Fundamentos del diseño
 
Fundamentos del Diseño
Fundamentos del Diseño   Fundamentos del Diseño
Fundamentos del Diseño
 
Caracteristicas Digitales de Composición
Caracteristicas Digitales de ComposiciónCaracteristicas Digitales de Composición
Caracteristicas Digitales de Composición
 
Monitoreo Manual de Redes Sociales
Monitoreo Manual de Redes SocialesMonitoreo Manual de Redes Sociales
Monitoreo Manual de Redes Sociales
 
Presentacion espacio publicitario
Presentacion  espacio  publicitarioPresentacion  espacio  publicitario
Presentacion espacio publicitario
 
Caracteristicas Digitales de Composición
Caracteristicas Digitales de ComposiciónCaracteristicas Digitales de Composición
Caracteristicas Digitales de Composición
 
Espacio en el mensaje publicitario
Espacio en el mensaje publicitarioEspacio en el mensaje publicitario
Espacio en el mensaje publicitario
 
El Layout
El LayoutEl Layout
El Layout
 
01 partes de un anuncio
01 partes de un anuncio01 partes de un anuncio
01 partes de un anuncio
 
Cap 12 Estrategias creativas y procesos creativos
Cap 12 Estrategias creativas y procesos creativosCap 12 Estrategias creativas y procesos creativos
Cap 12 Estrategias creativas y procesos creativos
 
El Anuncio Publicitario
El Anuncio PublicitarioEl Anuncio Publicitario
El Anuncio Publicitario
 
ANÁLISIS DE UN ANUNCIO PUBLICITARIO
ANÁLISIS DE UN ANUNCIO PUBLICITARIOANÁLISIS DE UN ANUNCIO PUBLICITARIO
ANÁLISIS DE UN ANUNCIO PUBLICITARIO
 
Elementos del Anuncio Publicitario
Elementos del Anuncio PublicitarioElementos del Anuncio Publicitario
Elementos del Anuncio Publicitario
 
Guía para analizar anuncios publicitarios ( imágenes)
Guía para analizar anuncios publicitarios ( imágenes)Guía para analizar anuncios publicitarios ( imágenes)
Guía para analizar anuncios publicitarios ( imágenes)
 
AnáLisis Publicitario Coca Cola
AnáLisis Publicitario Coca ColaAnáLisis Publicitario Coca Cola
AnáLisis Publicitario Coca Cola
 
Elementos en el Mensaje Publicitario
Elementos en el Mensaje PublicitarioElementos en el Mensaje Publicitario
Elementos en el Mensaje Publicitario
 
Mensaje Publicitario
Mensaje PublicitarioMensaje Publicitario
Mensaje Publicitario
 

Similar a Reticulas para Pantalla

Retículas Para Pantalla
Retículas Para PantallaRetículas Para Pantalla
Retículas Para Pantalla
marfon1280
 
Retícula para pantalla
Retícula para pantallaRetícula para pantalla
Retícula para pantallaYudyliher
 
stefany gomez
stefany gomezstefany gomez
stefany gomez
Fani Gomez
 
Unidad 2 edicion de presentaciones electronicas
Unidad 2 edicion de presentaciones electronicasUnidad 2 edicion de presentaciones electronicas
Unidad 2 edicion de presentaciones electronicas
Gerardo Alonso
 
Unidad 2 edicion de presentaciones electronicas
Unidad 2 edicion de presentaciones electronicasUnidad 2 edicion de presentaciones electronicas
Unidad 2 edicion de presentaciones electronicas
Gerardo Alonso
 
Introducción a presentaciones audiovisuales
Introducción a presentaciones audiovisualesIntroducción a presentaciones audiovisuales
Introducción a presentaciones audiovisuales
lookingforlove
 
Taaniiaaa liizeetthg
Taaniiaaa liizeetthgTaaniiaaa liizeetthg
Taaniiaaa liizeetthg
taanyyaaLiizeeth
 
Retículas para pantalla
Retículas para pantallaRetículas para pantalla
Retículas para pantallablogsandra10
 
Lalalalala lalalalala lalalala
Lalalalala lalalalala lalalalaLalalalala lalalalala lalalala
Lalalalala lalalalala lalalalaNicolas Roman
 
Illustrator reference
Illustrator referenceIllustrator reference
Illustrator reference
Jefferson Chaux
 
Parte vi. experto en diseño gráfico publicitario
Parte vi. experto en diseño gráfico publicitarioParte vi. experto en diseño gráfico publicitario
Parte vi. experto en diseño gráfico publicitarioFátima Martín Abril
 
2012 caracteristicas pag web
2012 caracteristicas pag web2012 caracteristicas pag web
2012 caracteristicas pag webRamos_David
 
Unidad II
Unidad IIUnidad II
Manual de Aby
Manual de AbyManual de Aby
Manual de Aby
Aby Hernandez
 
Retícula para pantalla
Retícula para pantallaRetícula para pantalla
Retícula para pantallamonipt
 
Procedimiento de power point..valentina 8 1
Procedimiento de power point..valentina 8 1Procedimiento de power point..valentina 8 1
Procedimiento de power point..valentina 8 1
morenovillamizar
 

Similar a Reticulas para Pantalla (20)

Retículas Para Pantalla
Retículas Para PantallaRetículas Para Pantalla
Retículas Para Pantalla
 
Retícula para pantalla
Retícula para pantallaRetícula para pantalla
Retícula para pantalla
 
stefany gomez
stefany gomezstefany gomez
stefany gomez
 
Unidad 2 edicion de presentaciones electronicas
Unidad 2 edicion de presentaciones electronicasUnidad 2 edicion de presentaciones electronicas
Unidad 2 edicion de presentaciones electronicas
 
Unidad 2 edicion de presentaciones electronicas
Unidad 2 edicion de presentaciones electronicasUnidad 2 edicion de presentaciones electronicas
Unidad 2 edicion de presentaciones electronicas
 
Taaniiaaa liizeetth
Taaniiaaa liizeetthTaaniiaaa liizeetth
Taaniiaaa liizeetth
 
Introducción a presentaciones audiovisuales
Introducción a presentaciones audiovisualesIntroducción a presentaciones audiovisuales
Introducción a presentaciones audiovisuales
 
Jgso (1)
Jgso (1)Jgso (1)
Jgso (1)
 
Taaniiaaa liizeetthg
Taaniiaaa liizeetthgTaaniiaaa liizeetthg
Taaniiaaa liizeetthg
 
Taaniiaaa liizeetth
Taaniiaaa liizeetthTaaniiaaa liizeetth
Taaniiaaa liizeetth
 
Taaniiaaa liizeetth
Taaniiaaa liizeetthTaaniiaaa liizeetth
Taaniiaaa liizeetth
 
Retículas para pantalla
Retículas para pantallaRetículas para pantalla
Retículas para pantalla
 
Lalalalala lalalalala lalalala
Lalalalala lalalalala lalalalaLalalalala lalalalala lalalala
Lalalalala lalalalala lalalala
 
Illustrator reference
Illustrator referenceIllustrator reference
Illustrator reference
 
Parte vi. experto en diseño gráfico publicitario
Parte vi. experto en diseño gráfico publicitarioParte vi. experto en diseño gráfico publicitario
Parte vi. experto en diseño gráfico publicitario
 
2012 caracteristicas pag web
2012 caracteristicas pag web2012 caracteristicas pag web
2012 caracteristicas pag web
 
Unidad II
Unidad IIUnidad II
Unidad II
 
Manual de Aby
Manual de AbyManual de Aby
Manual de Aby
 
Retícula para pantalla
Retícula para pantallaRetícula para pantalla
Retícula para pantalla
 
Procedimiento de power point..valentina 8 1
Procedimiento de power point..valentina 8 1Procedimiento de power point..valentina 8 1
Procedimiento de power point..valentina 8 1
 

Último

capitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdfcapitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdf
ProfesorCiencias2
 
Teoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintoresTeoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintores
EduardoGM8
 
Desarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdfDesarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdf
marianamadronero578
 
Movimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela ArquitecturaMovimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela Arquitectura
LeonardoDantasRivas
 
DIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaDIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en linea
EduarRamos7
 
informecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docxinformecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docx
IsabellaCortes7
 
La Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por KarinaLa Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por Karina
KarinaRodriguezG2
 
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptxVERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
ingridavila20
 
Propuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseñoPropuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseño
Mariano Salgado
 
etiqueta que se utiliza en un restaurante .pdf
etiqueta que se utiliza en  un restaurante  .pdfetiqueta que se utiliza en  un restaurante  .pdf
etiqueta que se utiliza en un restaurante .pdf
Vhope6
 
Arquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en LatinoaméricaArquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en Latinoamérica
imariagsg
 
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdfInfografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
salazar1611ale
 
Patrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunPatrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en Cancun
DianaArtemizaCP
 
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfEstilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
JosueJuanez1
 
Figuras bidimensionales en el diseño.pptx
Figuras bidimensionales en el diseño.pptxFiguras bidimensionales en el diseño.pptx
Figuras bidimensionales en el diseño.pptx
LuisFernandoOcampoGa
 

Último (15)

capitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdfcapitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdf
 
Teoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintoresTeoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintores
 
Desarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdfDesarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdf
 
Movimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela ArquitecturaMovimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela Arquitectura
 
DIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaDIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en linea
 
informecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docxinformecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docx
 
La Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por KarinaLa Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por Karina
 
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptxVERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
 
Propuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseñoPropuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseño
 
etiqueta que se utiliza en un restaurante .pdf
etiqueta que se utiliza en  un restaurante  .pdfetiqueta que se utiliza en  un restaurante  .pdf
etiqueta que se utiliza en un restaurante .pdf
 
Arquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en LatinoaméricaArquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en Latinoamérica
 
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdfInfografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
 
Patrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunPatrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en Cancun
 
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfEstilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
 
Figuras bidimensionales en el diseño.pptx
Figuras bidimensionales en el diseño.pptxFiguras bidimensionales en el diseño.pptx
Figuras bidimensionales en el diseño.pptx
 

Reticulas para Pantalla

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