SlideShare una empresa de Scribd logo
1 de 14
La logística y  la jerarquía visual debe tenerse en cuenta en el momento del diseño en La web, en el primer pantallazo.  Acá la imaginación no sirve, el diseño inicial  debe mostrar todo lo que se pretende mostrar. RETICULAS PARA PANTALLA RETICULAS PARA PANTALLA
PÁGINAS DE INICIO
Retícula visual: Trasmite sensación de continuidad y permite asimilar rápidamente el contenido y su distribución.
LA RETICULA DE PANTALLA DEBE RECOGER TODOS AQUELLOS FACTORES QUE PUEDAN INFLUIR EN LA CONTINUIDAD, LA IDENTIFICACIÓN Y L AORIENTACIÓN.
Guía para disponer y codificar los elementos funcionales, como son las barras de navegación y las bandas localizadoras. RETÍCULA FUNCIONAL Y JERARQUICA.
PÁGINAS PRINCIPALES
PÁGINAS PRINCIPALES
RETÍCULA FUNCIONAL Y JERÁQUICA.
RETÍCULA CROMÁTICA Codificación de las funciones y zonas por colores.
RETÍCULA DE MOVIMIENTO Y TIEMPO Pauta de acción y velocidad de los objetos móviles.
RETÍCULA DE REFERENCIA. Imágenes fijas con texto e ilustración cuyos ajustes no puede modificar el usuario.
Son elementos que desempeñan la misma función  que los botones, pero poseen el interés añadido de proporcionar una respuesta y ofrecer una amplia gama de posibilidades al diseño. LOS ROLLOVERS
Este modo de disponer los elementos del menú ahorra cantidad y espacio en pantalla y ofrece una visión más rápida de los temas principales. MENUS DESPLAZATORIOS

Más contenido relacionado

Similar a Estructuras de la pantalla

Vi reticulas para pantalla
Vi reticulas para pantallaVi reticulas para pantalla
Vi reticulas para pantallayariyurany
 
Retículas para pantalla
Retículas para pantallaRetículas para pantalla
Retículas para pantallaAnaMariaAraque
 
Arquigrafia en la arquitectura
Arquigrafia en la arquitecturaArquigrafia en la arquitectura
Arquigrafia en la arquitecturaalexatostado1
 
Ux2012 - Patrones de Interfaz (by Jennifer Tidwell)
Ux2012 - Patrones de Interfaz (by Jennifer Tidwell)Ux2012 - Patrones de Interfaz (by Jennifer Tidwell)
Ux2012 - Patrones de Interfaz (by Jennifer Tidwell)Victor Pezzetti
 
Procesos de diseño
Procesos de diseñoProcesos de diseño
Procesos de diseñoBryan Muñoz
 
Retículas para pantalla
Retículas para pantalla Retículas para pantalla
Retículas para pantalla Paulo Gutierrez
 
OBJETIVOS DE DREAMWEAVER
OBJETIVOS DE DREAMWEAVEROBJETIVOS DE DREAMWEAVER
OBJETIVOS DE DREAMWEAVERAntonio Galicia
 
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011byroncorrales
 
Exposicion equip 3
Exposicion equip 3Exposicion equip 3
Exposicion equip 3FRISLY5
 
Wireframes, Definiciones.
Wireframes, Definiciones.Wireframes, Definiciones.
Wireframes, Definiciones.Rodrigo Vera
 
1ra parte sección 7
1ra parte sección 71ra parte sección 7
1ra parte sección 7flakitasmartp
 
Metodologia
MetodologiaMetodologia
Metodologiamelyh
 

Similar a Estructuras de la pantalla (17)

Vi reticulas para pantalla
Vi reticulas para pantallaVi reticulas para pantalla
Vi reticulas para pantalla
 
Retículas para pantalla
Retículas para pantallaRetículas para pantalla
Retículas para pantalla
 
Arquigrafia en la arquitectura
Arquigrafia en la arquitecturaArquigrafia en la arquitectura
Arquigrafia en la arquitectura
 
Ux2012 - Patrones de Interfaz (by Jennifer Tidwell)
Ux2012 - Patrones de Interfaz (by Jennifer Tidwell)Ux2012 - Patrones de Interfaz (by Jennifer Tidwell)
Ux2012 - Patrones de Interfaz (by Jennifer Tidwell)
 
Procesos de diseño
Procesos de diseñoProcesos de diseño
Procesos de diseño
 
Retículas para pantalla
Retículas para pantalla Retículas para pantalla
Retículas para pantalla
 
OBJETIVOS DE DREAMWEAVER
OBJETIVOS DE DREAMWEAVEROBJETIVOS DE DREAMWEAVER
OBJETIVOS DE DREAMWEAVER
 
Fundamentos DiseñO Web
Fundamentos DiseñO WebFundamentos DiseñO Web
Fundamentos DiseñO Web
 
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
 
Diseo web
Diseo webDiseo web
Diseo web
 
Exposicion equip 3
Exposicion equip 3Exposicion equip 3
Exposicion equip 3
 
Wireframes, Definiciones.
Wireframes, Definiciones.Wireframes, Definiciones.
Wireframes, Definiciones.
 
1ra parte sección 7
1ra parte sección 71ra parte sección 7
1ra parte sección 7
 
IDA Workshop #3 Diseño de Interfaz UI
IDA Workshop #3 Diseño de Interfaz UIIDA Workshop #3 Diseño de Interfaz UI
IDA Workshop #3 Diseño de Interfaz UI
 
Reticula
ReticulaReticula
Reticula
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Metodologia
MetodologiaMetodologia
Metodologia
 

Más de Adrianagz

Reglas básicas para pantalla
Reglas básicas para pantallaReglas básicas para pantalla
Reglas básicas para pantallaAdrianagz
 
Soportes impresos y digitales.
Soportes impresos y digitales.Soportes impresos y digitales.
Soportes impresos y digitales.Adrianagz
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicosAdrianagz
 
Mensaje publicitario
Mensaje publicitarioMensaje publicitario
Mensaje publicitarioAdrianagz
 
Mensaje publicitario
Mensaje publicitarioMensaje publicitario
Mensaje publicitarioAdrianagz
 
Elementos del diseño
Elementos del diseñoElementos del diseño
Elementos del diseñoAdrianagz
 

Más de Adrianagz (6)

Reglas básicas para pantalla
Reglas básicas para pantallaReglas básicas para pantalla
Reglas básicas para pantalla
 
Soportes impresos y digitales.
Soportes impresos y digitales.Soportes impresos y digitales.
Soportes impresos y digitales.
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicos
 
Mensaje publicitario
Mensaje publicitarioMensaje publicitario
Mensaje publicitario
 
Mensaje publicitario
Mensaje publicitarioMensaje publicitario
Mensaje publicitario
 
Elementos del diseño
Elementos del diseñoElementos del diseño
Elementos del diseño
 

Último

plande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdfplande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdfenelcielosiempre
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADauxsoporte
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdfDemetrio Ccesa Rayme
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfMaritzaRetamozoVera
 
Ley 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularLey 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularMooPandrea
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptxdeimerhdz21
 
Éteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reaccionesÉteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reaccionesLauraColom3
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Lourdes Feria
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
Ecosistemas Natural, Rural y urbano 2021.pptx
Ecosistemas Natural, Rural y urbano  2021.pptxEcosistemas Natural, Rural y urbano  2021.pptx
Ecosistemas Natural, Rural y urbano 2021.pptxolgakaterin
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoFundación YOD YOD
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxMaritzaRetamozoVera
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Carlos Muñoz
 

Último (20)

plande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdfplande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdf
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdf
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
 
Ley 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularLey 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circular
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
Éteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reaccionesÉteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reacciones
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
Ecosistemas Natural, Rural y urbano 2021.pptx
Ecosistemas Natural, Rural y urbano  2021.pptxEcosistemas Natural, Rural y urbano  2021.pptx
Ecosistemas Natural, Rural y urbano 2021.pptx
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativo
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
 

Estructuras de la pantalla

  • 1.
  • 2. La logística y la jerarquía visual debe tenerse en cuenta en el momento del diseño en La web, en el primer pantallazo. Acá la imaginación no sirve, el diseño inicial debe mostrar todo lo que se pretende mostrar. RETICULAS PARA PANTALLA RETICULAS PARA PANTALLA
  • 4. Retícula visual: Trasmite sensación de continuidad y permite asimilar rápidamente el contenido y su distribución.
  • 5. LA RETICULA DE PANTALLA DEBE RECOGER TODOS AQUELLOS FACTORES QUE PUEDAN INFLUIR EN LA CONTINUIDAD, LA IDENTIFICACIÓN Y L AORIENTACIÓN.
  • 6. Guía para disponer y codificar los elementos funcionales, como son las barras de navegación y las bandas localizadoras. RETÍCULA FUNCIONAL Y JERARQUICA.
  • 9. RETÍCULA FUNCIONAL Y JERÁQUICA.
  • 10. RETÍCULA CROMÁTICA Codificación de las funciones y zonas por colores.
  • 11. RETÍCULA DE MOVIMIENTO Y TIEMPO Pauta de acción y velocidad de los objetos móviles.
  • 12. RETÍCULA DE REFERENCIA. Imágenes fijas con texto e ilustración cuyos ajustes no puede modificar el usuario.
  • 13. Son elementos que desempeñan la misma función que los botones, pero poseen el interés añadido de proporcionar una respuesta y ofrecer una amplia gama de posibilidades al diseño. LOS ROLLOVERS
  • 14. Este modo de disponer los elementos del menú ahorra cantidad y espacio en pantalla y ofrece una visión más rápida de los temas principales. MENUS DESPLAZATORIOS