SlideShare una empresa de Scribd logo
1 de 10
Anatomía de un sitio web
Encabezado, navegación, Feature
Area, Cuerpo/Contenido, Sidebar
Podemos partir de una
estructura general, que
permita estructurar el diseño
de nuestro sitio web.
Lo importante al final de
cuentas es que realmente se
adecúe a las necesidades de
diseño de nuestro cliente,
pero sobre todo a las del
usuario final.
El área del Encabezado o
Header, es un espacio
relativamente constante en
todas las páginas de nuestro
sitio web. Aquí se establece el
estilo general de diseño .
En esta área se coloca la marca
del cliente, y generalmente
invita a la acción, - busquedas,
combrar, registro etc.
Los encabezados permiten al
usuario identificar el sitio web
que visita, así como
visualmente unifica todas las
páginas del sitio.
Un punto clave en el diseño de
una interfaz, es saber
jerarquizar la información.
Para ello los diseñadores usan
un punto focal- un área en la
composición que permitirá
presentar un panorama del
contenido general del sitio
web que se visita.
Suele ser una zona que toma
gran importancia el el Home
del sitio, habitualmente
contiene animaciones,
fotografías, colores y
tipografías llamativas.
El cuerpo o contenido es el
área donde los usuarios
emplean más tiempo.
Es importante tomar en
cuenta varios factores.
Un diseño de un sitio web
puede llegar a ser “alto” por
lo cual es importante separar
los contenidos con espacios
blancos y subtitulos, que
permitan al usuario tener una
visión rápida del contenido del
sitio.
Utilizar hipervinculos en el
texto permitirá profundizar la
información, sin mostrarla
toda en una misma interfaz.
El ancho optimo de una linea
de texto es de 52 a 65
caracteres.
Esto evitará la fatiga visual.
En lineas de texto muy largas
el usuario podría tener
dificultades de lectura al
cambio de renglon, podría
perder el seguimiento.
En lineas muy cortas, el
usuario tendría que estar
constantemente cambiando
de renglón.
En esta área se incluye
información secundaria y links.
Se puede incluir submenus,
espacios publicitarios.
Entradas de información que
pueden dar pie a mostrar
información que dentro del
sitio se puede desarrollar con
mayor profundidad.
En este espacio se suele incluir
información de Copyright, así
como hiperviculos del
contenido general del sitio, un
mini site map.
http://3rayas.com/web/disenoIntefazDEMO/ejemplo/index.html
http://3rayas.com/web/disenoIntefazDEMO/ejemplo/index.html

Más contenido relacionado

La actualidad más candente

INTEGRIDAD DE ENTIDAD E INTEGRIDAD REFERENCIAL EN SQL SERVER Y ACCESS
INTEGRIDAD DE ENTIDAD E INTEGRIDAD REFERENCIAL EN SQL SERVER Y ACCESSINTEGRIDAD DE ENTIDAD E INTEGRIDAD REFERENCIAL EN SQL SERVER Y ACCESS
INTEGRIDAD DE ENTIDAD E INTEGRIDAD REFERENCIAL EN SQL SERVER Y ACCESSitsl
 
Heineken Publicidad
Heineken PublicidadHeineken Publicidad
Heineken PublicidadJManuelOchoa
 
Herramientas de corel
Herramientas de corelHerramientas de corel
Herramientas de corelangie barre
 
tablas en acces
tablas en accestablas en acces
tablas en accesebelinlema
 
La Arquitectura De Las Comunicaciones
La Arquitectura De Las ComunicacionesLa Arquitectura De Las Comunicaciones
La Arquitectura De Las ComunicacionesLilia Del Toro
 

La actualidad más candente (7)

INTEGRIDAD DE ENTIDAD E INTEGRIDAD REFERENCIAL EN SQL SERVER Y ACCESS
INTEGRIDAD DE ENTIDAD E INTEGRIDAD REFERENCIAL EN SQL SERVER Y ACCESSINTEGRIDAD DE ENTIDAD E INTEGRIDAD REFERENCIAL EN SQL SERVER Y ACCESS
INTEGRIDAD DE ENTIDAD E INTEGRIDAD REFERENCIAL EN SQL SERVER Y ACCESS
 
Heineken Publicidad
Heineken PublicidadHeineken Publicidad
Heineken Publicidad
 
Sql presentacion
Sql presentacionSql presentacion
Sql presentacion
 
La reprografia
La reprografiaLa reprografia
La reprografia
 
Herramientas de corel
Herramientas de corelHerramientas de corel
Herramientas de corel
 
tablas en acces
tablas en accestablas en acces
tablas en acces
 
La Arquitectura De Las Comunicaciones
La Arquitectura De Las ComunicacionesLa Arquitectura De Las Comunicaciones
La Arquitectura De Las Comunicaciones
 

Destacado

Estructura de mi sitio web ale
Estructura de mi sitio web aleEstructura de mi sitio web ale
Estructura de mi sitio web aleGarciaNathaly
 
Diseño web slideshare
Diseño web slideshareDiseño web slideshare
Diseño web slideshareCreario
 
Arquitectura de un sitio web
Arquitectura de un sitio webArquitectura de un sitio web
Arquitectura de un sitio webedgarcajun
 
Presentación sobre Diseño Web
Presentación sobre Diseño WebPresentación sobre Diseño Web
Presentación sobre Diseño WebMarcelo Freitas
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño WebLorena Guerrero
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño webciwmx
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página webadri9610
 

Destacado (11)

Estructura sitios web
Estructura sitios webEstructura sitios web
Estructura sitios web
 
Estructura de mi sitio web ale
Estructura de mi sitio web aleEstructura de mi sitio web ale
Estructura de mi sitio web ale
 
Anatomia de una pagina web
Anatomia de una pagina webAnatomia de una pagina web
Anatomia de una pagina web
 
Diseño web slideshare
Diseño web slideshareDiseño web slideshare
Diseño web slideshare
 
Arquitectura de un sitio web
Arquitectura de un sitio webArquitectura de un sitio web
Arquitectura de un sitio web
 
Presentación sobre Diseño Web
Presentación sobre Diseño WebPresentación sobre Diseño Web
Presentación sobre Diseño Web
 
Que es Diseño web
Que es Diseño webQue es Diseño web
Que es Diseño web
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño Web
 
Estructura y diseño de un sitio web
Estructura y diseño de un sitio webEstructura y diseño de un sitio web
Estructura y diseño de un sitio web
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página web
 

Similar a Estructura sitio web

Similar a Estructura sitio web (20)

Caracteristicas y partes_de_un_sitio_web
Caracteristicas y partes_de_un_sitio_webCaracteristicas y partes_de_un_sitio_web
Caracteristicas y partes_de_un_sitio_web
 
estructura y diseño web partes de una pagina web
estructura y diseño web partes de una pagina webestructura y diseño web partes de una pagina web
estructura y diseño web partes de una pagina web
 
Pagina web análisis de su estructura y diseño.
Pagina web análisis de su estructura y diseño.Pagina web análisis de su estructura y diseño.
Pagina web análisis de su estructura y diseño.
 
Estructura del diseño web
Estructura del diseño webEstructura del diseño web
Estructura del diseño web
 
Sobre disenno de_sitios_web
Sobre disenno de_sitios_webSobre disenno de_sitios_web
Sobre disenno de_sitios_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
 
Proyecto web
Proyecto webProyecto web
Proyecto web
 
Proyecto web
Proyecto webProyecto web
Proyecto web
 
Trabajo 10
Trabajo 10Trabajo 10
Trabajo 10
 
Diseño y web 2
Diseño y web 2Diseño y web 2
Diseño y web 2
 
Notas Taller Diseño Web para OSC´s
Notas Taller  Diseño Web para OSC´sNotas Taller  Diseño Web para OSC´s
Notas Taller Diseño Web para OSC´s
 
Páginas web
Páginas webPáginas web
Páginas web
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web Responsive
 
Jm checklist
Jm checklistJm checklist
Jm checklist
 
Documento pdf
Documento pdfDocumento pdf
Documento pdf
 
PAGINA WEB
PAGINA WEBPAGINA WEB
PAGINA WEB
 
Actividad baldit(2) (1)
Actividad baldit(2) (1)Actividad baldit(2) (1)
Actividad baldit(2) (1)
 
DiseñO Web
DiseñO WebDiseñO Web
DiseñO Web
 
Diseño web
Diseño webDiseño web
Diseño web
 
IA GUIDE
IA GUIDEIA GUIDE
IA GUIDE
 

Más de buciosinai

Medición y análisis
Medición y análisisMedición y análisis
Medición y análisisbuciosinai
 
Estretagias de comunicacion para diseño web
Estretagias de comunicacion para diseño webEstretagias de comunicacion para diseño web
Estretagias de comunicacion para diseño webbuciosinai
 
Redes Sociales
Redes SocialesRedes Sociales
Redes Socialesbuciosinai
 
Publicidad On-Line
Publicidad On-LinePublicidad On-Line
Publicidad On-Linebuciosinai
 
Comercio Electrónico
Comercio ElectrónicoComercio Electrónico
Comercio Electrónicobuciosinai
 
P.P.T. EN GOOGLE SINAI
P.P.T. EN GOOGLE SINAIP.P.T. EN GOOGLE SINAI
P.P.T. EN GOOGLE SINAIbuciosinai
 

Más de buciosinai (17)

Medición y análisis
Medición y análisisMedición y análisis
Medición y análisis
 
Estretagias de comunicacion para diseño web
Estretagias de comunicacion para diseño webEstretagias de comunicacion para diseño web
Estretagias de comunicacion para diseño web
 
Redes Sociales
Redes SocialesRedes Sociales
Redes Sociales
 
Publicidad On-Line
Publicidad On-LinePublicidad On-Line
Publicidad On-Line
 
Comercio Electrónico
Comercio ElectrónicoComercio Electrónico
Comercio Electrónico
 
Presentation1
Presentation1Presentation1
Presentation1
 
Presetacion2
Presetacion2Presetacion2
Presetacion2
 
Hola 2
Hola 2Hola 2
Hola 2
 
Curso web
Curso webCurso web
Curso web
 
Hola 2
Hola 2Hola 2
Hola 2
 
P.P.T. EN GOOGLE SINAI
P.P.T. EN GOOGLE SINAIP.P.T. EN GOOGLE SINAI
P.P.T. EN GOOGLE SINAI
 
Test ciudad
Test ciudadTest ciudad
Test ciudad
 
Presentation1
Presentation1Presentation1
Presentation1
 
Hola
HolaHola
Hola
 
Curso DiseñO
Curso DiseñOCurso DiseñO
Curso DiseñO
 
Sesion2
Sesion2Sesion2
Sesion2
 
Sesion1
Sesion1Sesion1
Sesion1
 

Estructura sitio web

  • 1. Anatomía de un sitio web Encabezado, navegación, Feature Area, Cuerpo/Contenido, Sidebar
  • 2. Podemos partir de una estructura general, que permita estructurar el diseño de nuestro sitio web. Lo importante al final de cuentas es que realmente se adecúe a las necesidades de diseño de nuestro cliente, pero sobre todo a las del usuario final.
  • 3. El área del Encabezado o Header, es un espacio relativamente constante en todas las páginas de nuestro sitio web. Aquí se establece el estilo general de diseño . En esta área se coloca la marca del cliente, y generalmente invita a la acción, - busquedas, combrar, registro etc. Los encabezados permiten al usuario identificar el sitio web que visita, así como visualmente unifica todas las páginas del sitio.
  • 4. Un punto clave en el diseño de una interfaz, es saber jerarquizar la información. Para ello los diseñadores usan un punto focal- un área en la composición que permitirá presentar un panorama del contenido general del sitio web que se visita. Suele ser una zona que toma gran importancia el el Home del sitio, habitualmente contiene animaciones, fotografías, colores y tipografías llamativas.
  • 5. El cuerpo o contenido es el área donde los usuarios emplean más tiempo. Es importante tomar en cuenta varios factores. Un diseño de un sitio web puede llegar a ser “alto” por lo cual es importante separar los contenidos con espacios blancos y subtitulos, que permitan al usuario tener una visión rápida del contenido del sitio. Utilizar hipervinculos en el texto permitirá profundizar la información, sin mostrarla toda en una misma interfaz.
  • 6. El ancho optimo de una linea de texto es de 52 a 65 caracteres. Esto evitará la fatiga visual. En lineas de texto muy largas el usuario podría tener dificultades de lectura al cambio de renglon, podría perder el seguimiento. En lineas muy cortas, el usuario tendría que estar constantemente cambiando de renglón.
  • 7. En esta área se incluye información secundaria y links. Se puede incluir submenus, espacios publicitarios. Entradas de información que pueden dar pie a mostrar información que dentro del sitio se puede desarrollar con mayor profundidad.
  • 8. En este espacio se suele incluir información de Copyright, así como hiperviculos del contenido general del sitio, un mini site map.