SlideShare una empresa de Scribd logo
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 accesibilidad
Armando 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)
María Del Rosario Espíndola
 
Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)
alvarofrias2012
 
Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)Trabajo practico n° 4.(informatica)
Trabajo practico n° 4.(informatica)
María Del Rosario Espíndola
 
Atributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLEAtributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLE
MELISSA 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 dw
nydnicolas
 
Tema 1
Tema 1Tema 1
Tema 1
yren69
 
Tutorial wordpress - Parte III
Tutorial wordpress - Parte IIITutorial wordpress - Parte III
Tutorial wordpress - Parte III
Pablo Hamada
 
Trabajo practico nº4
Trabajo practico nº4Trabajo practico nº4
Trabajo practico nº4
danavarro2012
 
Partes de una pagina web
Partes de una pagina webPartes de una pagina web
Partes de una pagina web
Lic. Oney Begambre
 
Diseñamos el blog
Diseñamos el blogDiseñamos el blog
Diseñamos el blog
Francisco Muñoz de la Peña
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
malatest
 
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
mararreola1
 
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
leydis-martinez
 
Solana andole 4
Solana andole 4Solana andole 4
Solana andole 4
'Sool Andoole
 

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

Diseño Web Responsivo
Diseño Web ResponsivoDiseño Web Responsivo
Diseño Web Responsivo
AureaCode
 
Web Fonts: Rendereo y suavizado
Web Fonts: Rendereo y suavizadoWeb Fonts: Rendereo y suavizado
Web Fonts: Rendereo y suavizado
Sergio Nouvel Castro
 
Tema 8 - Uso de la tipografía en web
Tema 8 - Uso de la tipografía en webTema 8 - Uso de la tipografía en web
Tema 8 - Uso de la tipografía en web
Pamela Rodriguez
 
Tema 5
Tema 5Tema 5
Tema 5
jarioss
 
Curso Diseñando para la Web, parte 2
Curso Diseñando para la Web, parte 2Curso Diseñando para la Web, parte 2
Curso Diseñando para la Web, parte 2
Sergio Nouvel Castro
 
Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]
Aaron Gustafson
 
Reglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y colorReglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y color
jonbethan
 
Tipografía en diseño web
Tipografía en diseño webTipografía en diseño web
Tipografía en diseño web
Adriana Tienda
 
Tendencias de diseño web 2015 - 2016
Tendencias de diseño web 2015 - 2016Tendencias de diseño web 2015 - 2016
Tendencias de diseño web 2015 - 2016
Adriana Tienda
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Adriana Tienda
 
2. ¿Qué es un Hosting y como contratarlo
2.  ¿Qué es un Hosting y como contratarlo 2.  ¿Qué es un Hosting y como contratarlo
2. ¿Qué es un Hosting y como contratarlo
IMAGINA EDUCATION SLU
 
Tipografia web
Tipografia webTipografia web
Tipografia web
aldiablo
 
Procediments de disseny digital
Procediments de disseny digitalProcediments de disseny digital
Procediments de disseny digital
Jose - Tecnologia INS Joan Mercader
 
Organizador grafico
Organizador graficoOrganizador grafico
Organizador grafico
Leonel Ibarra
 
Flat design
Flat designFlat design
Flat design
Adriana Tienda
 
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
Igalia
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
Tendencias de diseño web 2014 - 2015
Tendencias de diseño web 2014 - 2015Tendencias de diseño web 2014 - 2015
Tendencias de diseño web 2014 - 2015
Adriana Tienda
 
Presentación Campamentos Urbanos Madrid
Presentación Campamentos Urbanos MadridPresentación Campamentos Urbanos Madrid
Presentación Campamentos Urbanos Madrid
IMAGINA EDUCATION SLU
 
Color + Tipografia en la web
Color + Tipografia en la webColor + Tipografia en la web
Color + Tipografia en la webguest8667c2
 

Destacado (20)

Diseño Web Responsivo
Diseño Web ResponsivoDiseño Web Responsivo
Diseño Web Responsivo
 
Web Fonts: Rendereo y suavizado
Web Fonts: Rendereo y suavizadoWeb Fonts: Rendereo y suavizado
Web Fonts: Rendereo y suavizado
 
Tema 8 - Uso de la tipografía en web
Tema 8 - Uso de la tipografía en webTema 8 - Uso de la tipografía en web
Tema 8 - Uso de la tipografía en web
 
Tema 5
Tema 5Tema 5
Tema 5
 
Curso Diseñando para la Web, parte 2
Curso Diseñando para la Web, parte 2Curso Diseñando para la Web, parte 2
Curso Diseñando para la Web, parte 2
 
Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]
 
Reglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y colorReglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y color
 
Tipografía en diseño web
Tipografía en diseño webTipografía en diseño web
Tipografía en diseño web
 
Tendencias de diseño web 2015 - 2016
Tendencias de diseño web 2015 - 2016Tendencias de diseño web 2015 - 2016
Tendencias de diseño web 2015 - 2016
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
2. ¿Qué es un Hosting y como contratarlo
2.  ¿Qué es un Hosting y como contratarlo 2.  ¿Qué es un Hosting y como contratarlo
2. ¿Qué es un Hosting y como contratarlo
 
Tipografia web
Tipografia webTipografia web
Tipografia web
 
Procediments de disseny digital
Procediments de disseny digitalProcediments de disseny digital
Procediments de disseny digital
 
Organizador grafico
Organizador graficoOrganizador grafico
Organizador grafico
 
Flat design
Flat designFlat design
Flat design
 
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Tendencias de diseño web 2014 - 2015
Tendencias de diseño web 2014 - 2015Tendencias de diseño web 2014 - 2015
Tendencias de diseño web 2014 - 2015
 
Presentación Campamentos Urbanos Madrid
Presentación Campamentos Urbanos MadridPresentación Campamentos Urbanos Madrid
Presentación Campamentos Urbanos Madrid
 
Color + Tipografia en la web
Color + Tipografia en la webColor + Tipografia en la web
Color + Tipografia en la web
 

Similar a Reticulas para pantalla[1]

Reticulas para pantalla
Reticulas para pantallaReticulas para pantalla
Reticulas para pantalla
salolaya
 
Webby awards
Webby awards Webby awards
Elaboracindepginasweb 110830201414-phpapp01
Elaboracindepginasweb 110830201414-phpapp01Elaboracindepginasweb 110830201414-phpapp01
Elaboracindepginasweb 110830201414-phpapp01
Beree Ramirez
 
Elaboracindepginasweb 110830201414-phpapp01
Elaboracindepginasweb 110830201414-phpapp01Elaboracindepginasweb 110830201414-phpapp01
Elaboracindepginasweb 110830201414-phpapp01
Beree Ramirez
 
Retículas para pantalla
Retículas para pantalla Retículas para pantalla
Retículas para pantalla
Paulo Gutierrez
 
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
paoloarevaloortiz
 
Retículos para pantalla
Retículos para pantallaRetículos para pantalla
Retículos para pantalla
durrego
 
Reticulas para Pantalla
Reticulas para Pantalla Reticulas para Pantalla
Reticulas para Pantalla
DianeLadino
 
Reticulas para Pantalla
Reticulas para Pantalla Reticulas para Pantalla
Reticulas para Pantalla
DianeLadino
 
Tarimas
TarimasTarimas
Tarimas
Jesus Benitez
 
Digitaldixit.com - Web Design Proposal
Digitaldixit.com - Web Design ProposalDigitaldixit.com - Web Design Proposal
Digitaldixit.com - Web Design Proposal
noradriana.com
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
Andrea G M
 
Elementos de la web
Elementos de la webElementos de la web
Elementos de la web
PatriciaBarrientos22
 
Menu y footer
Menu y footerMenu y footer
Menu y footer
Yadith Gomez Nolasco
 
Menusfooter
MenusfooterMenusfooter
Menu de Navegacion y footer
Menu  de Navegacion y footerMenu  de Navegacion y footer
Menu de Navegacion y footer
Yadith Gomez Nolasco
 
Proyecto final weebly
Proyecto final weeblyProyecto final weebly
Proyecto final weebly
Carmen Perea
 
Leccion 10 dream
Leccion 10 dreamLeccion 10 dream
Leccion 10 dream
Flor Aguilar
 
Parte webby 1
Parte webby 1Parte webby 1
Parte webby 1
Jaime Andres Aricapa
 
Retículas para pantalla
Retículas para pantallaRetículas para pantalla
Retículas para pantalla
flacorpsemuh
 

Similar a Reticulas para pantalla[1] (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 jonbethan

Caracteri..
Caracteri..Caracteri..
Caracteri..
jonbethan
 
Reglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y colorReglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y color
jonbethan
 
Retículas.. (1)
Retículas.. (1)Retículas.. (1)
Retículas.. (1)
jonbethan
 
El formato
El formatoEl formato
El formato
jonbethan
 
El layout
El layoutEl layout
El layout
jonbethan
 
Espacio en el mensaje publicitario
Espacio en el mensaje publicitarioEspacio en el mensaje publicitario
Espacio en el mensaje publicitario
jonbethan
 
Diseño y composición para pantalla 1
Diseño y composición  para pantalla 1Diseño y composición  para pantalla 1
Diseño y composición para pantalla 1
jonbethan
 
Retículas para pantalla 1
Retículas para pantalla 1Retículas para pantalla 1
Retículas para pantalla 1
jonbethan
 
El formato
El formatoEl formato
El formato
jonbethan
 
El layout
El layoutEl layout
El layout
jonbethan
 
Espacio en el mensaje publicitario
Espacio en el mensaje publicitarioEspacio en el mensaje publicitario
Espacio en el mensaje publicitario
jonbethan
 
Diseño y composición para pantalla 1
Diseño y composición  para pantalla 1Diseño y composición  para pantalla 1
Diseño y composición para pantalla 1
jonbethan
 

Más de jonbethan (12)

Caracteri..
Caracteri..Caracteri..
Caracteri..
 
Reglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y colorReglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y color
 
Retículas.. (1)
Retículas.. (1)Retículas.. (1)
Retículas.. (1)
 
El formato
El formatoEl formato
El formato
 
El layout
El layoutEl layout
El layout
 
Espacio en el mensaje publicitario
Espacio en el mensaje publicitarioEspacio en el mensaje publicitario
Espacio en el mensaje publicitario
 
Diseño y composición para pantalla 1
Diseño y composición  para pantalla 1Diseño y composición  para pantalla 1
Diseño y composición para pantalla 1
 
Retículas para pantalla 1
Retículas para pantalla 1Retículas para pantalla 1
Retículas para pantalla 1
 
El formato
El formatoEl formato
El formato
 
El layout
El layoutEl layout
El layout
 
Espacio en el mensaje publicitario
Espacio en el mensaje publicitarioEspacio en el mensaje publicitario
Espacio en el mensaje publicitario
 
Diseño y composición para pantalla 1
Diseño y composición  para pantalla 1Diseño y composición  para pantalla 1
Diseño y composición para pantalla 1
 

Reticulas para pantalla[1]

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