SlideShare une entreprise Scribd logo
1  sur  15
RETICULAS PARA PANTALLAS En diseño, las retículas sirven de guía para el posicionamiento de los módulos y de esta manera, generar nuevas direcciones y consecuentemente un diseño. TIPOS DE RETICULAS Bueno, para empezar ¿qué es una retícula? La retícula en el diseño es una guía que nos sirve para distribuir los elementos y la alineación, todas sin excepción cuentan con las mismas partes básicas sólo que algunas alcanzan cierta complejidad de acuerdo a las necesidades de la información, también estas se pueden combinar.
Manuscrita La más sencilla de todas, se usa para textos largos porque están contenidos en un bloque grande delimitado por un margen y tiene un espacio para los títulos y la numeración. El ejemplo es el más cercano que encontré, pero creo que en si no se siguió una retícula...No muy recomendable para utilizarlo en una web, es difícil seguir la lectura y lo hace tedioso.
Columnas Es muy flexible y se pueden separar distintos tipos de información, es unas de las retículas más utilizadas en revistas y también en el diseño web, porque puede utilizarse varias columnas para texto amplio e imágenes grandes y también pequeñas. En el primer ejemplo utiliza de columnas y también por módulos, es muy agradable por qué se ve más limpio, atractivo y los elementos están claramente diferenciados.
Modular Útil cuando es algo muy complejo, es parecida a la de columnas solo que las divide en filas creando así una matriz de celdas que se denominan módulos, en cada uno de ellos se puede colocar información o en varios agrupados. Son flexibles y precisos pero en exceso puede crear confusión.En esta web utilizaron este tipo de retícula para hacer un menú de los juegos que tienen, con muy buenos resultados.
Jerárquica Esta la he visto que la ocupan en gran medida en el diseño web, la información se organiza de forma intuitiva en proporción a los elementos y no en intervalos regulares y repetidos como sucede con las otras, es por eso que es muy variable.
Jerárquica La retícula que está en voga es la jerárquica porque podemos acomodar la información por orden de importancia, generalmente poniendo lo más importante a manera de resumen o por novedad en un recuadro de forma llamativa que abarque todo el espacio y los menús o palabras clave en otras columnas de menor tamaño y alineación.
El diseño web va más allá del diseño tradicional pues existen muchos limitadores relacionados con el medio donde se presentan las páginas: internet. conocemos las características fundamentales del diseño en la web.
Otro aspecto a tener en cuenta es que las páginas web son visualizadas en unas aplicaciones específicas, los navegadores web, que imponen grandes limitaciones al diseño de las mismas. la ventana de un navegador es eminentemente rectangular, con unas medidas concretas (dadas por la resolución empleada por el usuario en su monitor) y con unas capacidades de interpretación de colores que varían mucho según el ordenador usado, el sistema operativo, el monitor y la tarjeta gráfica.
TIPOGRAFIA La elección y el uso de la tipografía es quizás el elemento más difícil dentro del proceso de diseño. La tipografía asume un doble papel tanto como comunicador visual y como verbal la tipografía nos ayuda a distinguir visualmente grupo de textos y de esta manera ayudan al usuario a predecir qué tipo de información encontraran en ciertas áreas de la pagina. Lo que hacemos al diseñar páginas web es básicamente “pintar” el texto, no solo aplicando color al texto sino al combinarlo con otros bloques de texto y con el fondo de la pagina. El ojo viajara de bloque en bloque a lo largo de la pagina y es  gracia a estos bloques tipográficos que podemos alcanzar una buena jerarquía.
ELECCIÓN DE LA PALETA DE FUENTES
TAMAÑO DE LAS FUENTES El tamaño de la letra debe elegirse teniendo en cuenta la naturaleza de la composición y la distancia a la que se va a leer.
Interlineado
Alineación de los textos
COLOR EN LA WEB
COLOR A la hora de aplicar colores deberemos tener en cuenta una serie de reglas. No hay que olvidar que el medio sobre el que trabajamos será la pantalla, y en éste sentido podemos tener la certeza de que en cada ordenador se verá un poco diferente. A nivel de usabilidad y accesibilidad lo más importante será tener cuidado con el contraste entre el cuerpo de letra y el fondo.

Contenu connexe

Tendances

Maquetacion editorial
Maquetacion editorialMaquetacion editorial
Maquetacion editorial
Luis Frias
 
Reticulas en-la-maquetación
Reticulas en-la-maquetaciónReticulas en-la-maquetación
Reticulas en-la-maquetación
David Espinosa
 
Maquetacion y reticulas
Maquetacion  y reticulasMaquetacion  y reticulas
Maquetacion y reticulas
Erika Nieto
 
Retícula de composición editorial
Retícula de composición editorialRetícula de composición editorial
Retícula de composición editorial
luiart
 
Layout 2 final
Layout 2 finalLayout 2 final
Layout 2 final
paulacom4
 
Diagramación o Maquetación
Diagramación o Maquetación Diagramación o Maquetación
Diagramación o Maquetación
Nathaly Correa
 
Fundamentos de diagramación Sesión 1
Fundamentos de diagramación Sesión 1Fundamentos de diagramación Sesión 1
Fundamentos de diagramación Sesión 1
eme2525
 

Tendances (19)

Tipos de reticulas
Tipos de reticulasTipos de reticulas
Tipos de reticulas
 
Maquetacion editorial
Maquetacion editorialMaquetacion editorial
Maquetacion editorial
 
Reticulas en-la-maquetación
Reticulas en-la-maquetaciónReticulas en-la-maquetación
Reticulas en-la-maquetación
 
Diseño editorial: Retículas
Diseño editorial: RetículasDiseño editorial: Retículas
Diseño editorial: Retículas
 
"Maquetación"
"Maquetación" "Maquetación"
"Maquetación"
 
Unidad 4 - Retículas
Unidad 4 - RetículasUnidad 4 - Retículas
Unidad 4 - Retículas
 
Maquetacion y reticulas
Maquetacion  y reticulasMaquetacion  y reticulas
Maquetacion y reticulas
 
Diagramación con Retículas
Diagramación con RetículasDiagramación con Retículas
Diagramación con Retículas
 
T3 pa2 suntaxi_jesseniadg
T3 pa2 suntaxi_jesseniadgT3 pa2 suntaxi_jesseniadg
T3 pa2 suntaxi_jesseniadg
 
DIAGRAMACIÓN. Fundamentos y principios básicos.
DIAGRAMACIÓN. Fundamentos y principios básicos.DIAGRAMACIÓN. Fundamentos y principios básicos.
DIAGRAMACIÓN. Fundamentos y principios básicos.
 
Principiios del diseño editorial
Principiios del diseño editorialPrincipiios del diseño editorial
Principiios del diseño editorial
 
Retícula de composición editorial
Retícula de composición editorialRetícula de composición editorial
Retícula de composición editorial
 
RETÌCULAS
RETÌCULASRETÌCULAS
RETÌCULAS
 
Curso de auto cad
Curso de auto cadCurso de auto cad
Curso de auto cad
 
Layout 2 final
Layout 2 finalLayout 2 final
Layout 2 final
 
Diagramación o Maquetación
Diagramación o Maquetación Diagramación o Maquetación
Diagramación o Maquetación
 
Fundamentos de diagramación Sesión 1
Fundamentos de diagramación Sesión 1Fundamentos de diagramación Sesión 1
Fundamentos de diagramación Sesión 1
 
Layout1
Layout1Layout1
Layout1
 
Layout1
Layout1Layout1
Layout1
 

Similaire à Presentacion power reticulas para pantallas

Retículas para pantallas
Retículas para pantallasRetículas para pantallas
Retículas para pantallas
Sebastian Mora
 
Principios
PrincipiosPrincipios
Principios
niko a
 
Importancia del diseno_en_web (2)
Importancia del diseno_en_web (2)Importancia del diseno_en_web (2)
Importancia del diseno_en_web (2)
alexpulupa
 
OBJETIVOS DE DREAMWEAVER
OBJETIVOS DE DREAMWEAVEROBJETIVOS DE DREAMWEAVER
OBJETIVOS DE DREAMWEAVER
Antonio Galicia
 

Similaire à Presentacion power reticulas para pantallas (20)

Reticulas de diseño
Reticulas de diseñoReticulas de diseño
Reticulas de diseño
 
Importancia del diseno en la web
Importancia del diseno en la webImportancia del diseno en la web
Importancia del diseno en la web
 
DiseñO Web
DiseñO WebDiseñO Web
DiseñO Web
 
Investigaacion
InvestigaacionInvestigaacion
Investigaacion
 
Retículas para pantallas
Retículas para pantallasRetículas para pantallas
Retículas para pantallas
 
Principios elementales de maquetación WEB
Principios elementales de maquetación WEBPrincipios elementales de maquetación WEB
Principios elementales de maquetación WEB
 
Elaboración de documentos web mediante lenguajes de marcas
Elaboración de documentos web mediante lenguajes de marcasElaboración de documentos web mediante lenguajes de marcas
Elaboración de documentos web mediante lenguajes de marcas
 
Principios
PrincipiosPrincipios
Principios
 
Framework de programacion de paginas web
Framework de programacion de paginas webFramework de programacion de paginas web
Framework de programacion de paginas web
 
Trabajo de-investigacion
Trabajo de-investigacionTrabajo de-investigacion
Trabajo de-investigacion
 
Importancia del diseno_en_web (2)
Importancia del diseno_en_web (2)Importancia del diseno_en_web (2)
Importancia del diseno_en_web (2)
 
Alberto
AlbertoAlberto
Alberto
 
Alberto
AlbertoAlberto
Alberto
 
OBJETIVOS DE DREAMWEAVER
OBJETIVOS DE DREAMWEAVEROBJETIVOS DE DREAMWEAVER
OBJETIVOS DE DREAMWEAVER
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Informatica daniela
Informatica danielaInformatica daniela
Informatica daniela
 
Ux Arquitectura de Información
Ux Arquitectura de InformaciónUx Arquitectura de Información
Ux Arquitectura de Información
 
Presentacion de dreamweaver
Presentacion de dreamweaverPresentacion de dreamweaver
Presentacion de dreamweaver
 
Tecnología 7°
Tecnología 7° Tecnología 7°
Tecnología 7°
 
T2 pa3 suntaxijesseniadg
T2 pa3 suntaxijesseniadgT2 pa3 suntaxijesseniadg
T2 pa3 suntaxijesseniadg
 

Plus de adrianamontano2 (8)

Periodismo digital
Periodismo digitalPeriodismo digital
Periodismo digital
 
Espacios en el mensaje
Espacios en el mensajeEspacios en el mensaje
Espacios en el mensaje
 
Reticulas para pantallas
Reticulas para pantallasReticulas para pantallas
Reticulas para pantallas
 
Espacios en el mensaje
Espacios en el mensajeEspacios en el mensaje
Espacios en el mensaje
 
Espacios en el mensaje
Espacios en el mensajeEspacios en el mensaje
Espacios en el mensaje
 
Espacios en el Mensaje
Espacios en el MensajeEspacios en el Mensaje
Espacios en el Mensaje
 
Presentacion power reticulas para pantallas
Presentacion power reticulas para pantallasPresentacion power reticulas para pantallas
Presentacion power reticulas para pantallas
 
Presentacion power reticulas para pantallas
Presentacion power reticulas para pantallasPresentacion power reticulas para pantallas
Presentacion power reticulas para pantallas
 

Dernier

EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 

Dernier (11)

Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 

Presentacion power reticulas para pantallas

  • 1. RETICULAS PARA PANTALLAS En diseño, las retículas sirven de guía para el posicionamiento de los módulos y de esta manera, generar nuevas direcciones y consecuentemente un diseño. TIPOS DE RETICULAS Bueno, para empezar ¿qué es una retícula? La retícula en el diseño es una guía que nos sirve para distribuir los elementos y la alineación, todas sin excepción cuentan con las mismas partes básicas sólo que algunas alcanzan cierta complejidad de acuerdo a las necesidades de la información, también estas se pueden combinar.
  • 2. Manuscrita La más sencilla de todas, se usa para textos largos porque están contenidos en un bloque grande delimitado por un margen y tiene un espacio para los títulos y la numeración. El ejemplo es el más cercano que encontré, pero creo que en si no se siguió una retícula...No muy recomendable para utilizarlo en una web, es difícil seguir la lectura y lo hace tedioso.
  • 3. Columnas Es muy flexible y se pueden separar distintos tipos de información, es unas de las retículas más utilizadas en revistas y también en el diseño web, porque puede utilizarse varias columnas para texto amplio e imágenes grandes y también pequeñas. En el primer ejemplo utiliza de columnas y también por módulos, es muy agradable por qué se ve más limpio, atractivo y los elementos están claramente diferenciados.
  • 4. Modular Útil cuando es algo muy complejo, es parecida a la de columnas solo que las divide en filas creando así una matriz de celdas que se denominan módulos, en cada uno de ellos se puede colocar información o en varios agrupados. Son flexibles y precisos pero en exceso puede crear confusión.En esta web utilizaron este tipo de retícula para hacer un menú de los juegos que tienen, con muy buenos resultados.
  • 5. Jerárquica Esta la he visto que la ocupan en gran medida en el diseño web, la información se organiza de forma intuitiva en proporción a los elementos y no en intervalos regulares y repetidos como sucede con las otras, es por eso que es muy variable.
  • 6. Jerárquica La retícula que está en voga es la jerárquica porque podemos acomodar la información por orden de importancia, generalmente poniendo lo más importante a manera de resumen o por novedad en un recuadro de forma llamativa que abarque todo el espacio y los menús o palabras clave en otras columnas de menor tamaño y alineación.
  • 7. El diseño web va más allá del diseño tradicional pues existen muchos limitadores relacionados con el medio donde se presentan las páginas: internet. conocemos las características fundamentales del diseño en la web.
  • 8. Otro aspecto a tener en cuenta es que las páginas web son visualizadas en unas aplicaciones específicas, los navegadores web, que imponen grandes limitaciones al diseño de las mismas. la ventana de un navegador es eminentemente rectangular, con unas medidas concretas (dadas por la resolución empleada por el usuario en su monitor) y con unas capacidades de interpretación de colores que varían mucho según el ordenador usado, el sistema operativo, el monitor y la tarjeta gráfica.
  • 9. TIPOGRAFIA La elección y el uso de la tipografía es quizás el elemento más difícil dentro del proceso de diseño. La tipografía asume un doble papel tanto como comunicador visual y como verbal la tipografía nos ayuda a distinguir visualmente grupo de textos y de esta manera ayudan al usuario a predecir qué tipo de información encontraran en ciertas áreas de la pagina. Lo que hacemos al diseñar páginas web es básicamente “pintar” el texto, no solo aplicando color al texto sino al combinarlo con otros bloques de texto y con el fondo de la pagina. El ojo viajara de bloque en bloque a lo largo de la pagina y es gracia a estos bloques tipográficos que podemos alcanzar una buena jerarquía.
  • 10. ELECCIÓN DE LA PALETA DE FUENTES
  • 11. TAMAÑO DE LAS FUENTES El tamaño de la letra debe elegirse teniendo en cuenta la naturaleza de la composición y la distancia a la que se va a leer.
  • 14. COLOR EN LA WEB
  • 15. COLOR A la hora de aplicar colores deberemos tener en cuenta una serie de reglas. No hay que olvidar que el medio sobre el que trabajamos será la pantalla, y en éste sentido podemos tener la certeza de que en cada ordenador se verá un poco diferente. A nivel de usabilidad y accesibilidad lo más importante será tener cuidado con el contraste entre el cuerpo de letra y el fondo.