SlideShare una empresa de Scribd logo
1 de 11
Estructura web
• Lo que define una página web y
su diseño es la forma de
organizar los elementos que la
componen
• Hay miles formas diferentes,
pero son pocas las que le dan
sentido a nuestro trabajo
• Ahora les dare unos ejemplos de
como estructurar su pagina web
Estructura del
diseño web
Empezaremos por el Contenedor
gran mayoría de las páginas web tienen divisiones o
secciones similares
Por lo general en la parte superior de la página se
encuentre un encabezado,
seguido de un cuerpo principal que suele estar a sus
costados por una columna, lateral tanto a la izquierda
como a la derecha o dos columnas laterales seguidas
al final de la página por un pie de página.
Se debe tener en cuenta que
este esquema sufre variaciones, aunque
normalmente son pequeñas.
Estructuras
necesarias
para el diseño
web
siguiendo por el encabezado
Para identificar y acceder fácilmente a la página
principal.
Además del logotipo, el encabezado también puede
incluir el nombre del sitio, un eslogan o una breve
descripción del mismo.
Es importante que el encabezado sea visualmente
atractivo y que refleje la identidad de la marca o el sitio
web.
También se puede utilizar para mostrar información
adicional, como el número de teléfono de contacto o
los enlaces a las redes sociales del sitio.
En resumen, el encabezado es una parte fundamental
del diseño web, ya que contribuye a crear una
sensación de unidad y coherencia en el sitio, y facilita
la identificación y navegación de los usuarios.
• El encabezado de un sitio web suele contener una serie de
franjas de diferentes grosores, donde la faja superior
incluye enlaces generales de la página, como acceso a
usuarios registrados, registros de usuarios nuevos, acceso
a perfiles, salidas, ayudas y buscadores internos.
• La zona más ancha generalmente se encuentra ocupada por
el título de la página, nombre de empresa, slogan, etc.
• La zona inferior del encabezado se emplea para ubicar los
enlaces de navegación y las etiquetas de navegación, uno
de los elementos más importantes a la hora de ayudar a los
usuarios a encontrar las páginas componentes del sitio
web. Dependiendo de la complejidad del sitio, puede
encontrarse solo uno de estos sistemas de navegación o los
dos.
• La navegación del sitio web utiliza menús con enlaces
internos que facilitan a los visitantes encontrar la página
que están buscando.
• La buena navegación es un elemento esencial de un sitio
fácil de usar y existen diferentes tipos de navegación en el
sitio web, como la navegación global y la navegación dentro
de cada sección
El
encabezad
o
• La navegación
• La navegación y el menú que la contiene son de gran importancia en
un sitio web, ya que facilitan la exploración y la navegación de los
usuarios. Los menús horizontales son el tipo más común y se
encuentran debajo o junto al encabezado del sitio, conteniendo
opciones generales como "Acerca de", "Productos", "Precios", etc.
• [1]. Los menús verticales pueden utilizarse como complementos o
submenús de los horizontales y deben ser visibles en el primer
pantallazo al entrar al sitio
• Además de los menús horizontales y verticales, también es importante
considerar la instalación de un buscador interno. Los usuarios suelen
buscar este tipo de elementos en la parte superior de alguna de las
columnas laterales, aunque en algunos casos, puede encontrarse en la
parte superior de la página[1].
• En resumen, la navegación y el menú que la contiene son cruciales para
la exploración del sitio por parte de los usuarios. Los menús
horizontales son el tipo más común y se encuentran en la parte superior
del sitio, mientras que los menús verticales pueden utilizarse como
complementos o submenús. Además, la instalación de un buscador
interno puede facilitar la exploración del sitio para los usuarios.
La
navegació
n
Contenido
principal
• Contenido Principal
• • Lo más importante y fundamental de
una buena página. Lo que mantiene al
visitante cautivo e interesado. Si el
contenido es malo o poco interesante,
abandonará la página en pocos
segundos. Para eso, debe estar
centralizado y enfocado y a la primera
vista.
• El mejor lugar debe ser para los
contenidos. Para Google, el contenido
es el rey.
El área de contenido es la parte principal de la página web,
donde se encuentran los elementos más relevantes e
importantes para los usuarios. Aunque el diseño de esta zona
puede variar según el tipo de contenido y la cantidad de
información, hay algunas reglas importantes que deben
seguirse:
• Títulmejorar la experiencia de navegación en la página web.
o : El título debe estar entre etiquetas, ya que contiene las
palabras clave que los usuarios utilizarán en sus búsquedas
y es fundamental para que los buscadores encontrar la
página correctamente.
• Disposición : La disposición de los contenidos debe ser
clara y fácil de seguir, permitiendo que los usuarios accedan
a la información que buscan sin problemas.
Tipo de contenido : El tipo de contenido, como texto, imágenes
o vídeos, debe ser adecuado a la función y objetivo de la
página web.
Cantidad de contenido : La cantidad de información debe ser
suficiente para satisfacer las necesidades de los usuarios y
proporcionar una experiencia de usuario adecuada.
Estilo : El estilo del contenido debe ser adecuado al objetivo y
al público objetivo de la página web, utilizando un lenguaje
claro y accesible.
Optimización : El contenido debe estar optimizado para
motores de búsqueda, utilizando palabras clave relevantes y
estructurando la información de manera que sea fácil de
ingresar
Accesibilidad : El contenido debe ser accesible a todos los
usuarios, incluyendo aquellos con discapacidades visuales o
motoras, utilizando etiquetas y estructuras adecuadas.
Diseño responsivo : El contenido debe ser adaptable a
diferentes dispositivos y resoluciones de pantalla, permitiendo
que los usuarios accedan a la información de manera óptima
Interacción : Si el contenido incluye elementos interactivos,
como formularios o botones, deben ser fáciles de encontrar y
utilizar
Diseño visual : El contenido debe estar acompañado de
imágenes, gráficos o vídeos que lo complementen y faciliten la
comprensión.
Reglas
importante
s
Columnas
de
exploración
• Columnas de exploración
En el diseño moderno de páginas web, una de
las divisiones del cuerpo principal de la página
consiste en una o dos columnas de
exploración, las cuales se utilizan para ubicar
elementos importantes como enlaces externos,
navegación interna, publicidad, información
adicional y contenidos secundarios. Si se
emplea una única columna, es indiferente para
los usuarios, pero en el caso de que se
requiera el empleo de dos columnas, pueden
ubicarse una a cada lado del cuerpo principal
de la página o ambos a uno de los lados,
siendo también indiferente si se ubican a la
derecha o la la izquierda del contenido
principal. Los usuarios suelen la información
de contacto en este tipo de columnas, por lo
que resulta uno de los mejores lugares para
ubicar los datos de contacto.
El pie de
pagina
Y para ir finalizando
El pie de página es una sección también importante en
el diseño de una página web, que se encuentra en la
parte inferior de la misma.
En esta sección se pueden incluir elementos
importantes como el autor, copyright, acceso a
diversas políticas del sitio y asuntos legales, datos de
contacto, enlaces a sitios relacionados, enlaces
internos, etc. Además, el pie de página es un lugar
ideal para incluir un mapa del sitio web, que ayuda a
los visitantes a encontrar lo que están buscando, y
para destacar elementos específicos como los
testimonios de los clientes, las páginas en las redes
sociales o la prensa.
El diseño del pie de página debe ser limpio y claro, y
debe adaptarse a los dispositivos móviles para evitar
que los usuarios tengan que realizar mucho scroll para
ver toda la información
Y por último
el espacio
negativo
• El espacio negativo, también conocido
como espacio blanco, es un elemento
esencial en el diseño de páginas web. Es
todo lo que no tiene información de ningún
tipo, pero que cumple un rol importante
para la web, ya que nos ayuda a tener
espacios de respiración, a equilibrar y dar
equilibrio a todo el diseño.
Para aplicar el espacio negativo de manera
efectiva en el diseño de páginas web, es
importante considerar los niveles de espacio
negativo, como el microespacio entre
elementos pequeños como líneas, palabras
letras y el microespacio entre bloques o
elementos más grandes
Además, es importante evitar llenar todos los
espacios con contenido, ya que esto puede
saturar la página y hacerla ilegible e
innavegable.

Más contenido relacionado

Similar a estructura y diseño web partes de una pagina web

08 Anatomía de un sitio web.
08 Anatomía de un sitio web.08 Anatomía de un sitio web.
08 Anatomía de un sitio web.sinaibucio
 
Anatomía de un Sitio Web
Anatomía de un Sitio WebAnatomía de un Sitio Web
Anatomía de un Sitio Webbuciosinai
 
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_webmontserratcova
 
Presentación evolución de la web sebastian vargas
Presentación evolución de la web sebastian vargasPresentación evolución de la web sebastian vargas
Presentación evolución de la web sebastian vargasSebastian Vargas
 
Diseño de navegación web
Diseño de navegación webDiseño de navegación web
Diseño de navegación webAlexis Morillo
 
Las características y las partes que debe tener un sitio web
Las características y las partes  que debe tener un sitio web Las características y las partes  que debe tener un sitio web
Las características y las partes que debe tener un sitio web HUGOJAREDSANCHEZMARTINEZ
 
características y las partes que debe tener un sitio web
 características y las partes que debe tener un sitio web características y las partes que debe tener un sitio web
características y las partes que debe tener un sitio webabigailhernandez123
 
Diseño web samanta
Diseño web samanta Diseño web samanta
Diseño web samanta samantaaaaaa
 
DISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdfDISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdfLauLopez16
 
Elementos y recomendaciones generales
Elementos y recomendaciones generalesElementos y recomendaciones generales
Elementos y recomendaciones generalesga12007
 
Investigacion de paginas_web(2)i
Investigacion de paginas_web(2)iInvestigacion de paginas_web(2)i
Investigacion de paginas_web(2)iMaryferGaitan
 

Similar a estructura y diseño web partes de una pagina web (20)

Menu de Navegacion y footer
Menu  de Navegacion y footerMenu  de Navegacion y footer
Menu de Navegacion y footer
 
Actividad baldit(2) (1)
Actividad baldit(2) (1)Actividad baldit(2) (1)
Actividad baldit(2) (1)
 
08 Anatomía de un sitio web.
08 Anatomía de un sitio web.08 Anatomía de un sitio web.
08 Anatomía de un sitio web.
 
Anatomía de un Sitio Web
Anatomía de un Sitio WebAnatomía de un Sitio Web
Anatomía de un Sitio Web
 
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
 
Presentación evolución de la web sebastian vargas
Presentación evolución de la web sebastian vargasPresentación evolución de la web sebastian vargas
Presentación evolución de la web sebastian vargas
 
Diseño de navegación web
Diseño de navegación webDiseño de navegación web
Diseño de navegación web
 
Las características y las partes que debe tener un sitio web
Las características y las partes  que debe tener un sitio web Las características y las partes  que debe tener un sitio web
Las características y las partes que debe tener un sitio web
 
características y las partes que debe tener un sitio web
 características y las partes que debe tener un sitio web características y las partes que debe tener un sitio web
características y las partes que debe tener un sitio web
 
Anatomia de una pagina web
Anatomia de una pagina webAnatomia de una pagina web
Anatomia de una pagina web
 
Diseño web samanta
Diseño web samanta Diseño web samanta
Diseño web samanta
 
IA GUIDE
IA GUIDEIA GUIDE
IA GUIDE
 
DISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdfDISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdf
 
Elementos y recomendaciones generales
Elementos y recomendaciones generalesElementos y recomendaciones generales
Elementos y recomendaciones generales
 
Sitios web
Sitios webSitios web
Sitios web
 
Investigacion de paginas_web(2)i
Investigacion de paginas_web(2)iInvestigacion de paginas_web(2)i
Investigacion de paginas_web(2)i
 
Sitio web
Sitio webSitio web
Sitio web
 
Sitio web
Sitio webSitio web
Sitio web
 
Widison
WidisonWidison
Widison
 
Fundamentos DiseñO Web
Fundamentos DiseñO WebFundamentos DiseñO Web
Fundamentos DiseñO Web
 

estructura y diseño web partes de una pagina web

  • 1.
  • 2. Estructura web • Lo que define una página web y su diseño es la forma de organizar los elementos que la componen • Hay miles formas diferentes, pero son pocas las que le dan sentido a nuestro trabajo • Ahora les dare unos ejemplos de como estructurar su pagina web
  • 3. Estructura del diseño web Empezaremos por el Contenedor gran mayoría de las páginas web tienen divisiones o secciones similares Por lo general en la parte superior de la página se encuentre un encabezado, seguido de un cuerpo principal que suele estar a sus costados por una columna, lateral tanto a la izquierda como a la derecha o dos columnas laterales seguidas al final de la página por un pie de página. Se debe tener en cuenta que este esquema sufre variaciones, aunque normalmente son pequeñas.
  • 4. Estructuras necesarias para el diseño web siguiendo por el encabezado Para identificar y acceder fácilmente a la página principal. Además del logotipo, el encabezado también puede incluir el nombre del sitio, un eslogan o una breve descripción del mismo. Es importante que el encabezado sea visualmente atractivo y que refleje la identidad de la marca o el sitio web. También se puede utilizar para mostrar información adicional, como el número de teléfono de contacto o los enlaces a las redes sociales del sitio. En resumen, el encabezado es una parte fundamental del diseño web, ya que contribuye a crear una sensación de unidad y coherencia en el sitio, y facilita la identificación y navegación de los usuarios.
  • 5. • El encabezado de un sitio web suele contener una serie de franjas de diferentes grosores, donde la faja superior incluye enlaces generales de la página, como acceso a usuarios registrados, registros de usuarios nuevos, acceso a perfiles, salidas, ayudas y buscadores internos. • La zona más ancha generalmente se encuentra ocupada por el título de la página, nombre de empresa, slogan, etc. • La zona inferior del encabezado se emplea para ubicar los enlaces de navegación y las etiquetas de navegación, uno de los elementos más importantes a la hora de ayudar a los usuarios a encontrar las páginas componentes del sitio web. Dependiendo de la complejidad del sitio, puede encontrarse solo uno de estos sistemas de navegación o los dos. • La navegación del sitio web utiliza menús con enlaces internos que facilitan a los visitantes encontrar la página que están buscando. • La buena navegación es un elemento esencial de un sitio fácil de usar y existen diferentes tipos de navegación en el sitio web, como la navegación global y la navegación dentro de cada sección El encabezad o
  • 6. • La navegación • La navegación y el menú que la contiene son de gran importancia en un sitio web, ya que facilitan la exploración y la navegación de los usuarios. Los menús horizontales son el tipo más común y se encuentran debajo o junto al encabezado del sitio, conteniendo opciones generales como "Acerca de", "Productos", "Precios", etc. • [1]. Los menús verticales pueden utilizarse como complementos o submenús de los horizontales y deben ser visibles en el primer pantallazo al entrar al sitio • Además de los menús horizontales y verticales, también es importante considerar la instalación de un buscador interno. Los usuarios suelen buscar este tipo de elementos en la parte superior de alguna de las columnas laterales, aunque en algunos casos, puede encontrarse en la parte superior de la página[1]. • En resumen, la navegación y el menú que la contiene son cruciales para la exploración del sitio por parte de los usuarios. Los menús horizontales son el tipo más común y se encuentran en la parte superior del sitio, mientras que los menús verticales pueden utilizarse como complementos o submenús. Además, la instalación de un buscador interno puede facilitar la exploración del sitio para los usuarios. La navegació n
  • 7. Contenido principal • Contenido Principal • • Lo más importante y fundamental de una buena página. Lo que mantiene al visitante cautivo e interesado. Si el contenido es malo o poco interesante, abandonará la página en pocos segundos. Para eso, debe estar centralizado y enfocado y a la primera vista. • El mejor lugar debe ser para los contenidos. Para Google, el contenido es el rey.
  • 8. El área de contenido es la parte principal de la página web, donde se encuentran los elementos más relevantes e importantes para los usuarios. Aunque el diseño de esta zona puede variar según el tipo de contenido y la cantidad de información, hay algunas reglas importantes que deben seguirse: • Títulmejorar la experiencia de navegación en la página web. o : El título debe estar entre etiquetas, ya que contiene las palabras clave que los usuarios utilizarán en sus búsquedas y es fundamental para que los buscadores encontrar la página correctamente. • Disposición : La disposición de los contenidos debe ser clara y fácil de seguir, permitiendo que los usuarios accedan a la información que buscan sin problemas. Tipo de contenido : El tipo de contenido, como texto, imágenes o vídeos, debe ser adecuado a la función y objetivo de la página web. Cantidad de contenido : La cantidad de información debe ser suficiente para satisfacer las necesidades de los usuarios y proporcionar una experiencia de usuario adecuada. Estilo : El estilo del contenido debe ser adecuado al objetivo y al público objetivo de la página web, utilizando un lenguaje claro y accesible. Optimización : El contenido debe estar optimizado para motores de búsqueda, utilizando palabras clave relevantes y estructurando la información de manera que sea fácil de ingresar Accesibilidad : El contenido debe ser accesible a todos los usuarios, incluyendo aquellos con discapacidades visuales o motoras, utilizando etiquetas y estructuras adecuadas. Diseño responsivo : El contenido debe ser adaptable a diferentes dispositivos y resoluciones de pantalla, permitiendo que los usuarios accedan a la información de manera óptima Interacción : Si el contenido incluye elementos interactivos, como formularios o botones, deben ser fáciles de encontrar y utilizar Diseño visual : El contenido debe estar acompañado de imágenes, gráficos o vídeos que lo complementen y faciliten la comprensión. Reglas importante s
  • 9. Columnas de exploración • Columnas de exploración En el diseño moderno de páginas web, una de las divisiones del cuerpo principal de la página consiste en una o dos columnas de exploración, las cuales se utilizan para ubicar elementos importantes como enlaces externos, navegación interna, publicidad, información adicional y contenidos secundarios. Si se emplea una única columna, es indiferente para los usuarios, pero en el caso de que se requiera el empleo de dos columnas, pueden ubicarse una a cada lado del cuerpo principal de la página o ambos a uno de los lados, siendo también indiferente si se ubican a la derecha o la la izquierda del contenido principal. Los usuarios suelen la información de contacto en este tipo de columnas, por lo que resulta uno de los mejores lugares para ubicar los datos de contacto.
  • 10. El pie de pagina Y para ir finalizando El pie de página es una sección también importante en el diseño de una página web, que se encuentra en la parte inferior de la misma. En esta sección se pueden incluir elementos importantes como el autor, copyright, acceso a diversas políticas del sitio y asuntos legales, datos de contacto, enlaces a sitios relacionados, enlaces internos, etc. Además, el pie de página es un lugar ideal para incluir un mapa del sitio web, que ayuda a los visitantes a encontrar lo que están buscando, y para destacar elementos específicos como los testimonios de los clientes, las páginas en las redes sociales o la prensa. El diseño del pie de página debe ser limpio y claro, y debe adaptarse a los dispositivos móviles para evitar que los usuarios tengan que realizar mucho scroll para ver toda la información
  • 11. Y por último el espacio negativo • El espacio negativo, también conocido como espacio blanco, es un elemento esencial en el diseño de páginas web. Es todo lo que no tiene información de ningún tipo, pero que cumple un rol importante para la web, ya que nos ayuda a tener espacios de respiración, a equilibrar y dar equilibrio a todo el diseño. Para aplicar el espacio negativo de manera efectiva en el diseño de páginas web, es importante considerar los niveles de espacio negativo, como el microespacio entre elementos pequeños como líneas, palabras letras y el microespacio entre bloques o elementos más grandes Además, es importante evitar llenar todos los espacios con contenido, ya que esto puede saturar la página y hacerla ilegible e innavegable.