SlideShare una empresa de Scribd logo
1 de 10
RETICULA
   PARA
 PANTALLA

En    la   imagen      se
observa la barra de
acceso en la parte
superior y en el lado
izquierdo             los
contenidos que tiene
la pagina para entrar a
los diferentes sitios en
donde se encontrarán
los    servicios     que
ofrece este espacio
virtual.
RETICULA DE
 PANTALLA




Aquí la presentación del
sitio   en    la   pantalla
cambia de manera que se
utilizan otro estilo que se
adaptan de acuerdo a los
elementos diseñados con
el    fin    de     mostrar
directamente             el
contenido de la pagina
antes de dirigirse a los
demás enlaces que tiene.
RETICULA DE
    PANTALLA


Este     estilo    es     mas
llamativo gracias a la
visualización de los colores
y el tipo de fondo que se
utiliza   en    la    pantalla
principal del sitio. Este tipo
de presentación tiene la
barra de navegación en la
parte superior y la barra
de contenidos en la parte
derecha de la pantalla.
PANTALLA
      DE
   RETICULA

Es importante identificar
los servicios que ofrece
el sitio web. En esta
imagen vemos que se ha
creado la pagina principal
con     la    barra     de
navegación en la parte
inferior la cual el fondo
negro con las letras
blancas      resalta     la
información     de    esta
misma y además hace
contraste con la imagen.
RETICULA
     VISUAL

Este estilo es poco usual en la
web, pero permite asimilar el
contenido y distribuirlo.
RETICULA
   VISUAL




En esta imagen se
observa el cambio
de colores pero el
diseño sigue siendo
el mismo.
RETICULA
    VISUAL
En estas tres imágenes vemos
la continuidad de la pagina web,
lo único que va cambiando son
los espacios textuales a medida
que se va teniendo acceso a los
demás enlaces de la pagina.
PAGINAS
     INICIALES

Cumplen con la función
de llevar al internauta
a    una   introducción
respecto al sitio que va
ingresar, permitiéndole
tener una visualización
de la web y mostrando
en cada uno de los
espacios la pagina los
servicios, publicidad y
demás contenidos de
interés.
NORMAS
BASICAS:MENUS
  Y VINCULOS


 Permiten el fácil acceso a los
 diferentes contenidos de la web,
 tan solo dando un click en los
 diferentes menús y vínculos.
 Una alternativa consiste en
 emplear iconos gráficos, que
 representan la ventaja der ser
 fácilmente reconocibles.

Más contenido relacionado

La actualidad más candente

Evaluando usabilidad y accesibilidad
Evaluando usabilidad y accesibilidadEvaluando usabilidad y accesibilidad
Evaluando usabilidad y accesibilidadArmando Vs
 
Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)solanagp
 
Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)alvarofrias2012
 
Atributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLEAtributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLEMELISSA MORNEO
 
Uso de tablas imganes y textos en dw
Uso de tablas imganes y textos en dwUso de tablas imganes y textos en dw
Uso de tablas imganes y textos en dwnydnicolas
 
Tema 1
Tema 1Tema 1
Tema 1yren69
 
Tutorial wordpress - Parte III
Tutorial wordpress - Parte IIITutorial wordpress - Parte III
Tutorial wordpress - Parte IIIPablo Hamada
 
Trabajo practico nº4
Trabajo practico nº4Trabajo practico nº4
Trabajo practico nº4danavarro2012
 
Capitulo 2 Trabajo Colaborativo El Internet Explorer marianoarreola
Capitulo 2 Trabajo Colaborativo  El Internet Explorer   marianoarreolaCapitulo 2 Trabajo Colaborativo  El Internet Explorer   marianoarreola
Capitulo 2 Trabajo Colaborativo El Internet Explorer marianoarreolamararreola1
 
Como hacer una pagina web en wix leydis
Como hacer una pagina web en wix leydisComo hacer una pagina web en wix leydis
Como hacer una pagina web en wix leydisleydis-martinez
 

La actualidad más candente (16)

Evaluando usabilidad y accesibilidad
Evaluando usabilidad y accesibilidadEvaluando usabilidad y accesibilidad
Evaluando usabilidad y accesibilidad
 
Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)
 
Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)
 
Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)
 
Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)
 
Atributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLEAtributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLE
 
Uso de tablas imganes y textos en dw
Uso de tablas imganes y textos en dwUso de tablas imganes y textos en dw
Uso de tablas imganes y textos en dw
 
Tema 1
Tema 1Tema 1
Tema 1
 
Tutorial wordpress - Parte III
Tutorial wordpress - Parte IIITutorial wordpress - Parte III
Tutorial wordpress - Parte III
 
Trabajo practico nº4
Trabajo practico nº4Trabajo practico nº4
Trabajo practico nº4
 
Partes de una pagina web
Partes de una pagina webPartes de una pagina web
Partes de una pagina web
 
Diseñamos el blog
Diseñamos el blogDiseñamos el blog
Diseñamos el blog
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
 
Capitulo 2 Trabajo Colaborativo El Internet Explorer marianoarreola
Capitulo 2 Trabajo Colaborativo  El Internet Explorer   marianoarreolaCapitulo 2 Trabajo Colaborativo  El Internet Explorer   marianoarreola
Capitulo 2 Trabajo Colaborativo El Internet Explorer marianoarreola
 
Como hacer una pagina web en wix leydis
Como hacer una pagina web en wix leydisComo hacer una pagina web en wix leydis
Como hacer una pagina web en wix leydis
 
Solana andole 4
Solana andole 4Solana andole 4
Solana andole 4
 

Destacado

Retículas en Pantalla
Retículas en PantallaRetículas en Pantalla
Retículas en Pantallaapvargasf
 
RETÍCULAS PARA PANTALLA
RETÍCULAS PARA PANTALLARETÍCULAS PARA PANTALLA
RETÍCULAS PARA PANTALLAjennyramosm
 
Reticulas de pantalla
Reticulas de pantallaReticulas de pantalla
Reticulas de pantallabiviana28
 
1ra parte sección 7
1ra parte sección 71ra parte sección 7
1ra parte sección 7flakitasmartp
 
Unidad 4 - Retículas
Unidad 4 - RetículasUnidad 4 - Retículas
Unidad 4 - RetículasFidel Romero
 

Destacado (7)

Retículas en Pantalla
Retículas en PantallaRetículas en Pantalla
Retículas en Pantalla
 
RETÍCULAS PARA PANTALLA
RETÍCULAS PARA PANTALLARETÍCULAS PARA PANTALLA
RETÍCULAS PARA PANTALLA
 
Reticulas de pantalla
Reticulas de pantallaReticulas de pantalla
Reticulas de pantalla
 
Generaciones
GeneracionesGeneraciones
Generaciones
 
1ra parte sección 7
1ra parte sección 71ra parte sección 7
1ra parte sección 7
 
Ejemplos de Retículas
Ejemplos de RetículasEjemplos de Retículas
Ejemplos de Retículas
 
Unidad 4 - Retículas
Unidad 4 - RetículasUnidad 4 - Retículas
Unidad 4 - Retículas
 

Similar a Diseño de retículas visuales para páginas iniciales

Similar a Diseño de retículas visuales para páginas iniciales (20)

Reticulas para pantalla
Reticulas para pantallaReticulas para pantalla
Reticulas para pantalla
 
Webby awards
Webby awards Webby awards
Webby awards
 
Elaboracindepginasweb 110830201414-phpapp01
Elaboracindepginasweb 110830201414-phpapp01Elaboracindepginasweb 110830201414-phpapp01
Elaboracindepginasweb 110830201414-phpapp01
 
Elaboracindepginasweb 110830201414-phpapp01
Elaboracindepginasweb 110830201414-phpapp01Elaboracindepginasweb 110830201414-phpapp01
Elaboracindepginasweb 110830201414-phpapp01
 
Retículas para pantalla
Retículas para pantalla Retículas para pantalla
Retículas para pantalla
 
Introducción tamaños y tipos de paginas
Introducción tamaños y tipos de paginasIntroducción tamaños y tipos de paginas
Introducción tamaños y tipos de paginas
 
Retículos para pantalla
Retículos para pantallaRetículos para pantalla
Retículos para pantalla
 
Reticulas para Pantalla
Reticulas para Pantalla Reticulas para Pantalla
Reticulas para Pantalla
 
Reticulas para Pantalla
Reticulas para Pantalla Reticulas para Pantalla
Reticulas para Pantalla
 
Tarimas
TarimasTarimas
Tarimas
 
Digitaldixit.com - Web Design Proposal
Digitaldixit.com - Web Design ProposalDigitaldixit.com - Web Design Proposal
Digitaldixit.com - Web Design Proposal
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Elementos de la web
Elementos de la webElementos de la web
Elementos de la web
 
Menu y footer
Menu y footerMenu y footer
Menu y footer
 
Menusfooter
MenusfooterMenusfooter
Menusfooter
 
Menu de Navegacion y footer
Menu  de Navegacion y footerMenu  de Navegacion y footer
Menu de Navegacion y footer
 
Proyecto final weebly
Proyecto final weeblyProyecto final weebly
Proyecto final weebly
 
Leccion 10 dream
Leccion 10 dreamLeccion 10 dream
Leccion 10 dream
 
Parte webby 1
Parte webby 1Parte webby 1
Parte webby 1
 
Retículas para pantalla
Retículas para pantallaRetículas para pantalla
Retículas para pantalla
 

Más de salolaya

Diseño del blog
Diseño del blogDiseño del blog
Diseño del blogsalolaya
 
Caracteri..
Caracteri..Caracteri..
Caracteri..salolaya
 
Reglas para pantalla tipografia y color
Reglas para pantalla tipografia y colorReglas para pantalla tipografia y color
Reglas para pantalla tipografia y colorsalolaya
 
Reglas para pantalla tipografia y color
Reglas para pantalla tipografia y colorReglas para pantalla tipografia y color
Reglas para pantalla tipografia y colorsalolaya
 
Caracteri..
Caracteri..Caracteri..
Caracteri..salolaya
 
Espacio en el_mensaje_publicitario
Espacio en el_mensaje_publicitarioEspacio en el_mensaje_publicitario
Espacio en el_mensaje_publicitariosalolaya
 
Fundament..
Fundament..Fundament..
Fundament..salolaya
 
Reglas para pantalla tipografia y color
Reglas para pantalla tipografia y colorReglas para pantalla tipografia y color
Reglas para pantalla tipografia y colorsalolaya
 
Enciclopedismo
EnciclopedismoEnciclopedismo
Enciclopedismosalolaya
 
Caracteristicas digitales de composición
Caracteristicas digitales de composiciónCaracteristicas digitales de composición
Caracteristicas digitales de composiciónsalolaya
 
Caracteristicas digitales de composición
Caracteristicas digitales de composiciónCaracteristicas digitales de composición
Caracteristicas digitales de composiciónsalolaya
 
Espacio en el mensaje publicitario
Espacio en el mensaje publicitarioEspacio en el mensaje publicitario
Espacio en el mensaje publicitariosalolaya
 
Fundamentos para el diseño digital
Fundamentos para el diseño digitalFundamentos para el diseño digital
Fundamentos para el diseño digitalsalolaya
 
Fundamentos para el diseño digital
Fundamentos para el diseño digitalFundamentos para el diseño digital
Fundamentos para el diseño digitalsalolaya
 
Fundamentos para el diseño digital
Fundamentos para el diseño digitalFundamentos para el diseño digital
Fundamentos para el diseño digitalsalolaya
 

Más de salolaya (16)

Diseño del blog
Diseño del blogDiseño del blog
Diseño del blog
 
Diseño1
Diseño1Diseño1
Diseño1
 
Caracteri..
Caracteri..Caracteri..
Caracteri..
 
Reglas para pantalla tipografia y color
Reglas para pantalla tipografia y colorReglas para pantalla tipografia y color
Reglas para pantalla tipografia y color
 
Reglas para pantalla tipografia y color
Reglas para pantalla tipografia y colorReglas para pantalla tipografia y color
Reglas para pantalla tipografia y color
 
Caracteri..
Caracteri..Caracteri..
Caracteri..
 
Espacio en el_mensaje_publicitario
Espacio en el_mensaje_publicitarioEspacio en el_mensaje_publicitario
Espacio en el_mensaje_publicitario
 
Fundament..
Fundament..Fundament..
Fundament..
 
Reglas para pantalla tipografia y color
Reglas para pantalla tipografia y colorReglas para pantalla tipografia y color
Reglas para pantalla tipografia y color
 
Enciclopedismo
EnciclopedismoEnciclopedismo
Enciclopedismo
 
Caracteristicas digitales de composición
Caracteristicas digitales de composiciónCaracteristicas digitales de composición
Caracteristicas digitales de composición
 
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
 
Fundamentos para el diseño digital
Fundamentos para el diseño digitalFundamentos para el diseño digital
Fundamentos para el diseño digital
 
Fundamentos para el diseño digital
Fundamentos para el diseño digitalFundamentos para el diseño digital
Fundamentos para el diseño digital
 
Fundamentos para el diseño digital
Fundamentos para el diseño digitalFundamentos para el diseño digital
Fundamentos para el diseño digital
 

Diseño de retículas visuales para páginas iniciales

  • 1.
  • 2. RETICULA PARA PANTALLA En la imagen se observa la barra de acceso en la parte superior y en el lado izquierdo los contenidos que tiene la pagina para entrar a los diferentes sitios en donde se encontrarán los servicios que ofrece este espacio virtual.
  • 3. RETICULA DE PANTALLA Aquí la presentación del sitio en la pantalla cambia de manera que se utilizan otro estilo que se adaptan de acuerdo a los elementos diseñados con el fin de mostrar directamente el contenido de la pagina antes de dirigirse a los demás enlaces que tiene.
  • 4. RETICULA DE PANTALLA Este estilo es mas llamativo gracias a la visualización de los colores y el tipo de fondo que se utiliza en la pantalla principal del sitio. Este tipo de presentación tiene la barra de navegación en la parte superior y la barra de contenidos en la parte derecha de la pantalla.
  • 5. PANTALLA DE RETICULA Es importante identificar los servicios que ofrece el sitio web. En esta imagen vemos que se ha creado la pagina principal con la barra de navegación en la parte inferior la cual el fondo negro con las letras blancas resalta la información de esta misma y además hace contraste con la imagen.
  • 6. RETICULA VISUAL Este estilo es poco usual en la web, pero permite asimilar el contenido y distribuirlo.
  • 7. RETICULA VISUAL En esta imagen se observa el cambio de colores pero el diseño sigue siendo el mismo.
  • 8. RETICULA VISUAL En estas tres imágenes vemos la continuidad de la pagina web, lo único que va cambiando son los espacios textuales a medida que se va teniendo acceso a los demás enlaces de la pagina.
  • 9. PAGINAS INICIALES Cumplen con la función de llevar al internauta a una introducción respecto al sitio que va ingresar, permitiéndole tener una visualización de la web y mostrando en cada uno de los espacios la pagina los servicios, publicidad y demás contenidos de interés.
  • 10. NORMAS BASICAS:MENUS Y VINCULOS Permiten el fácil acceso a los diferentes contenidos de la web, tan solo dando un click en los diferentes menús y vínculos. Una alternativa consiste en emplear iconos gráficos, que representan la ventaja der ser fácilmente reconocibles.