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

(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
Planning & publishing of website
Planning & publishing of website Planning & publishing of website
Planning & publishing of website Archana Jha
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first courseVlad Posea
 
Introducción a ORMs
Introducción a ORMsIntroducción a ORMs
Introducción a ORMsmaxfontana90
 
How to create backlinks
How to create backlinksHow to create backlinks
How to create backlinksJrgenZender
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño webciwmx
 
On-Page Optimization | SEO On page
On-Page Optimization | SEO On pageOn-Page Optimization | SEO On page
On-Page Optimization | SEO On pageMd Faruk Khan
 
Front-end technologies for Wonderful User Experience through Websites
Front-end technologies for Wonderful User Experience through WebsitesFront-end technologies for Wonderful User Experience through Websites
Front-end technologies for Wonderful User Experience through WebsitesReady Bytes Software labs
 
CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)Matteo Ziviani
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basicsEliran Eliassy
 

La actualidad más candente (20)

Web Development
Web DevelopmentWeb Development
Web Development
 
Fundamentos DiseñO Web
Fundamentos DiseñO WebFundamentos DiseñO Web
Fundamentos DiseñO Web
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Planning & publishing of website
Planning & publishing of website Planning & publishing of website
Planning & publishing of website
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
css.ppt
css.pptcss.ppt
css.ppt
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 
Html 5
Html 5Html 5
Html 5
 
Html basics
Html basicsHtml basics
Html basics
 
Introducción a ORMs
Introducción a ORMsIntroducción a ORMs
Introducción a ORMs
 
SEO Strategy Guide [2019]
 SEO Strategy Guide [2019] SEO Strategy Guide [2019]
SEO Strategy Guide [2019]
 
How to create backlinks
How to create backlinksHow to create backlinks
How to create backlinks
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
 
On-Page Optimization | SEO On page
On-Page Optimization | SEO On pageOn-Page Optimization | SEO On page
On-Page Optimization | SEO On page
 
Technical SEO Audit
Technical SEO AuditTechnical SEO Audit
Technical SEO Audit
 
Front-end technologies for Wonderful User Experience through Websites
Front-end technologies for Wonderful User Experience through WebsitesFront-end technologies for Wonderful User Experience through Websites
Front-end technologies for Wonderful User Experience through Websites
 
Html
HtmlHtml
Html
 
CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)
 
Html intro
Html introHtml intro
Html intro
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 

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
 
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 (10)

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