Vamos a ver en este post la estructura general de una página web y los elementos específicos que habitualmente se encuentran según la zona de la página de la que estemos hablando.
Con este post vas a tener una idea global de los elementos y estructuras que debes tener en cuenta a la hora de crear las diferentes páginas de tu sitio web. Vamos a analizar también los recursos más habituales que se utilizan en páginas web corporativas y tiendas online.
Si lo que quieres es saber qué es una página web, para qué sirve y cómo funciona, aquí tienes un enlace que te puede ayudar: Qué es una página web
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE ESTRUCTURA Y ELEMENTOS DE UNA WEB
- 1.- Diferencia entre sitio web y página web
- 2.- Partes o estructura de una página web
-
3.- Elementos de una página web
- 3.1.- Elementos dentro de la cabecera o header de la web
- 3.2.- Elementos dentro del cuerpo de la página web
- 3.3.- Elementos dentro del footer o pie
1.- Diferencia entre sitio web y página web
La primera cuestión que debemos tener presente es que no es lo mismo un sitio web que una página web.
Un sitio web está formado por muchas páginas web. Un sitio web es la manera que debemos utilizar para referirnos a una web completa. Es decir, mi sitio web tiendaonlinemurcia.es está formado por la página web de inicio, la de contacto, servicios, etc.
Cada página web tendrá una URL diferente, que siempre comenzará con el nombre de dominio.
La página de contacto tiene la URL: https://www.tiendaonlinemurcia.es/contacto-joaquin-barbera-diseno-tienda-online/
2.- Partes o estructura de una página web
Todas las páginas de la web se dividen o estructuran en 3 partes fundamentales. La cabecera o header, el cuerpo y el pie o footer
Aunque, también es cierto que hay excepciones. Existen páginas especiales en las cuales no se muestra la cabecera o el footer, como suele ocurrir en las conocidas como landing pages o páginas de aterrizaje.
Estructura de una página web
2.1.- Cabecera o header
La cabecera o header de una página web se sitúa en su parte superior y se muestra en todas las páginas web del sitio. Cómo antes he comentado, puede haber algunas excepciones, como suele ocurrir con las landing pages o páginas de desembarco.
El header o cabecera suele tener anchura completa. Es decir, que siempre ocupa el ancho completo de la pantalla en la cual se está visualizando. A excepción de las páginas web tipo box o caja. Por el contrario el contenido de la página no suele tener anchura completa, aunque puede haber algunos elementos en su interior que si la tengan.
En el header o cabecera encontraremos varios elementos. Pero uno, fundamental, que es el menú de navegación de la web. A través de este elemento podremos acceder a todas las páginas del sitio web.
Más adelante veremos detenidamente otros elementos que suelen mostrarse en el header o cabecera de la web como son el logo, datos de contacto, iconos de redes sociales, etc.
Cupón: horizonweb
2.1.1.- Tipos de cabeceras según su visibilidad
En cuanto a su visibilidad, existen 2 tipos fundamentales de header o cabeceras:
i.- Cabecera o header estándar: en una página web con header o cabecera estándar, cuando hacemos scroll hacia abajo para ir viendo el contenido de la página la cabecera desaparecerá.
ii.- Cabecera o header flotante: hoy en día es muy habitual ver cabeceras o header que no desaparecen aunque hagamos scroll hacia abajo en la página. Este tipo de headers o cabeceras se denominan flotantes, fijos, pegajosos o sticky.
El motivo de estos headers flotantes es que van a permitir que el menú de navegación, incluido dentro de dicho header, siempre esté visible. A pesar, de hacer scroll hacia abajo.
Yo recomiendo este tipo de headers flotantes ya que el menú de navegación es tal vez la parte más importante de la web, ya que a través de éste, el usuario puede acceder a todas las páginas de la web y tener el menú de navegación siempre visible es algo muy positivo para mejorar la experiencia de usuario.
2.1.2.- Tipos de cabecera según los bloques que la conforman
Existen diferentes tipos de cabeceras o headers atendiendo al número de bloques que lo conforman.
i.- Cabecera de un solo bloque: en este tipo de cabecera el header solo dispone de un bloque, que contiene el menú y el logo.
ii.- Cabecera de dos bloques: en este tipo de cabecera el header está formado por dos bloque. Uno principal, con una dimensión en alto mayor y habitualmente situado más abajo. Uno secundario, con una dimensión en altura menor y habitualmente situado en la parte superior.
El bloque principal, habitualmente se sitúan logo, menú y barra de búsqueda (en caso de tienda online) y en el bloque secundario se suelen poner iconos de redes sociales, datos de contacto como email y teléfono e ítems de menú menos relevantes.
Ejemplo de header formado por dos bloques. El bloque superior o secundario tiene color de fondo azul. El bloque inferior o principal tiene color de fondo blanco
2.2.- Cuerpo
El cuerpo de la página está limitado en la parte superior con el header o cabecera y en la parte inferior con el footer o pie.
Cada página del sitio web tiene un contenido diferente. A diferencia del header y footer, cuyo contenido se repite en todas las páginas de la web.
En el cuerpo se incluye el contenido específico de la página del sitio cuya url se muestra en la barra de direcciones del navegador.
2.2.1.- Secciones
Las secciones son las diferentes partes en que se puede dividir el contenido incluido en el cuerpo de una página.
Las secciones se caracterizan por tener un determinado fondo (color de fondo, imagen de fondo, etc.) que las diferencia unas de otras.
Las secciones se utilizan para separar visualmente diferentes contenidos de una misma página. Además, servirá al visitante para mejorar su experiencia de usuario en páginas de mucho contenido.
Ejemplo de 2 secciones de una página web
SUPER DESCUENTO DIVI
El pie o footer es la parte inferior de una página web. Se sitúa bajo el cuerpo y su contenido se repite en todas las páginas del sitio web. Es decir, que todas las páginas de la web tienen el mismo footer o pie, salvo algunas excepciones como landing pages o páginas por el estilo donde específicamente se elimina el header y footer.
El pie o footer puede estar formado por uno o dos bloques.
i.- Bloque superior: bloque situado en la parte superior del footer y habitualmente con una dimensión en altura superior al de la barra inferior o créditos de la web.
En este bloque se suele poner información relevante como información de contacto, enlaces a información legal, enlaces a páginas de cuenta de usuario (en tiendas online), logos de certificados de seguridad o formas de pago, iconos redes sociales, etc.
ii.- Barra inferior / créditos web: bloque de menor dimensión en altura que el bloque superior. En esta barra se suele poner el autor del diseño de la web o el nombre de la web. En algunos casos también se incluyen los iconos de redes sociales en que está presente la empresa.
Ejemplo de pie o footer de una página web
Cupón: horizonweb
3.- Elementos de una página web
Vamos a ver ahora una serie de elementos habituales en una página web. Iremos viendo dichos elementos clasificados por zonas en las que están ubicados. Es decir, según estén en header, cuerpo o footer.
3.1.- Elementos dentro de la cabecera o header de la web
En primer lugar, veremos los elementos que se suelen encontrar en la cabecera o header de la página web.
3.1.1- El logo
El logo es un elemento importante en varios sentidos. En primer lugar representa nuestra marca personal o de empresa.
El logo se mostrará en todas las páginas del sitio web y por tanto permitirá saber al usuario cuando ha abandonado el sitio web. Por este motivo, es un elemento importante en la experiencia de usuario en cuanto a la navegación.
Además, el logo ha de estar enlazado con la página de inicio o home del sitio web. Es decir, cada vez que un usuario haga clic en el logo, le navegador lo debe dirigir a la home o página inicial de nuestro sitio web.
3.1.1.2.- Diferentes Posiciones del logo
El logo se puede encontrar situado en diferentes posiciones dentro del header o cabecera de la web. Casi siempre se suele colocar en el mismo bloque en el que se sitúa el menú de navegación principal del sitio web.
i.- logo izquierda: la forma más habitual es encontrar el logo situado en la parte izquierda del header y el menú de navegación a la derecha. Es la forma clásica.
ii.- logo centrado: también es frecuente encontrar el logo, centrado y justo encima del menú de navegación. Este sistema se utiliza mucho cuando tenemos muchos elementos o ítems de menú y el logo situado a la izquierda pudiera provocar la generación de 2 líneas de menú.
Ejemplo de página web con el logo centrado
NOTA: Situar el logo encima de la barra de menú provaca que el espacio de visualización de contenido se más pequeño que si el logo se situara a la izquierda el menú. Por este motivo, si utilizas un logo centrado, te recomiendo que configures tu plantilla para que al hacer scroll hacia abajo, el logo desaparezca.
iii.- logo en línea: el logo en línea también es un logo centrado, pero que en vez de situarse encima del menú, se sitúa en la misma línea del menú y centrado horizontalmente. Es decir, el logo quedaría entre dos ítems de menú y en la misma línea.
El menú de navegación es sin duda uno de los principales elementos de un sitio web. Si un sitio web fuera un libro, el menú de navegación sería el índice.
A través del menú de navegación el usuario podrá acceder a todas la páginas disponibles que nos interesa pueda visitar.
El menú de navegación debe mostrarse en todas las páginas del sitio web, para mejorar la experiencia de usuario.
El menú está formado por ítems o elementos de menú, que son enlaces a las páginas del sitio web que nos interesa que el usuario pueda visitar.
Hoy en día nos encontramos dos principales tipologías diferentes de menús de navegación, en lo que se refiere a su estructura visual.
Cupón: horizonweb
Antiguamente solo había un formato de menú de navegación, pero la irrupción de los dispositivos móviles está abriendo nuevas opciones.
El formato habitual para un menú de navegación es el que incluye los diferentes elementos o ítems de menú en la barra principal del header.
Hoy en día solemos ver por internet otros formatos de menú de navegación diferentes para las webs.
Seguramente habrás visto en algunos sitios web (en modo escritorio, no en móviles) que en vez de mostrarse los elementos del menú se muestra un icono formado por varias líneas horizontales, conocido como icono tipo hamburguer o hamburguesa. Si haces clic en dicho icono se muestran los diferentes elementos o ítems del menú.
Estos elementos del menú se pueden mostrar de diferentes formas. Por ejemplo, hay un formato donde al hacer clic en el icono tipo hamburguesa se muestran los elementos del menú en una barra lateral deslizante. Existe otro formato donde al hacer clic en el icono tipo hamburguesa, se muestran todos los elementos del menú a pantalla completa en una capa superpuesta.
Hoy en día también se suelen ver páginas de inicio o home con una gran imagen que invade todo el header o cabecera de la web. Los items o elementos del menú son la única parte de la cabecera que se muestra sobre la imagen. De esta manera conseguimos una primera imagen de la web tremendamente impactante
Ejemplo de página de inicio con imagen sobre el header o cabecera
Los formatos clásicos de menús de navegación no tienen cabida en móviles, ya que los elementos del menú no cabrían uno junto al otro en el espacio de header disponible en un dispositivo móvil.
En dispositivos móviles se mostrará un icono tipo hamburguesa en vez de los elementos del menú. Cuando el visitante haga clic en el icono se mostrarán los diferentes elementos del menú.
Es imprescindible que el menú en móviles no se muestre de la manera tradicional. Eso indicaría que la web no está optimizada para dispositivos móviles.
Es habitual usar la barra superior del menú o barra secundaria para ubicar elementos de menú no esenciales o de menor importancia que los ubicados en la barra principal del menú.
Por ejemplo, en tiendas online se suele ubicar en la barra principal del menú las categorías de la tienda online y en la barra superior pestañas como: nosotros, contacto, etc.
Es habitual encontrar en la cabecera o header de la web elementos de contacto como el teléfono o el email e iconos de redes sociales.
Esta información habitualmente se sitúa en el bloque o barra superior del header, que es la barra secundaria.
Es interesante disponer de la información en el header o cabecera, ya que así, en todo momento el visitante tendrá a “tiro de piedra” los datos para contactar. La principal pega es que al tener la dirección de email tan expuesta, podemos recibir bastante correo SPAM.
También es habitual ver los iconos de las redes sociales en las que está presente la empresa. Estos iconos enlazan a la página principal de la empresa en cada red social en la que está presente. Lo cierto, es que yo no soy 100% favorable a esta opción en algunos tipos de sitios web, ya que ¿interesa que una persona que está visitando nuestra web se vaya hacia nuestras redes sociales?
Cupón: horizonweb
3.1.5.- Selector de idiomas
En los sitios web que están traducidos a varios idiomas, se suele colocar en el header lo que se conoce como el selector de idiomas. Habitualmente aparece una banderita junto al texto del idioma a seleccionar, aunque a veces no se muestra la bandera.
Al hacer clic sobre un idioma, el contenido se traduce al idioma seleccionado.
Selector de idiomas de una página web
3.1.6.- Barra de búsqueda en ecommerce
En las tiendas online, también se suele ubicar en la cabecera una barra de búsqueda de productos de la tienda. Aunque esta barra también puede aparecer en el sidebar o barra lateral de la web cuando el visitante está visualizando alguna categoría de la tienda online
3.1.7.- Carrito en tiendas online
También en las tiendas online, suele aparecer en el header un icono correspondiente al carrito del ecommerce.
Al hacer clic en el carrito, se mostrará una página en la que aparecerán los productos que el visitante a añadido al carrito y podrá proceder al check out o realización del pedido.
Carrito en el header de la web
3.2.- Elementos dentro del cuerpo de la página web
Aparte de contenido de texto e imágenes aisladas, en una página web se suelen ver diferentes recursos especiales. Vamos a ver algunos de los más utilizados.
3.2.1.- Contenido
El contenido es todo aquello incluido en cada página de la web y que está situado entre el header o cabecera y el footer o pie.
3.2.2.- Elementos de contenido web
Además, de texto e imágenes, en los sitios web de hoy en día se suelen encontrar muchos elementos especiales en el contenido de cada página.
Habitualmente, este tipo de recursos se generan en la web con la ayuda de un page builder o constructor de páginas.
En mi caso, yo utilizo el Divi builder, que vienen incluido en la plantilla Divi, sin duda, mi constructor preferido para WordPress.
Vamos a ver los recursos más importantes
El breadcrumbs se suele situar en la parte superior del contenido de cada página e indica al visitante su posición exacta en la navegación del sitio web.
Por ejemplo, un breadcrumbs como este:
Servicios > tiendas online > Woocommerce
Indicaría al visitante que está en la página de “Woocommerce” dentro de “tiendas online” y a su vez dentro de “Servicios”.
También es habitual que cada uno de los elementos del breadcrumb enlace con la página respectiva
Es cierto, que en sitios web pequeños, donde hay un menú muy sencillo, no se hace necesario disponer de este recurso. Pero, en sitios web con una estructura de menú complejo, se hace casi imprescindible.
Ejemplo de migas de pan en una web
3.2.2.2.- Slider
Un slider es un visor en el cual se van mostrando los diferentes slides. Los slides habitualmente son imágenes y texto, aunque también podrían ser vídeos.
Los diferentes slides van alternándose en el slider según el tiempo configurado en las opciones del slider.
También es habitual ver elementos de navegación como flechas en los extremos del slider y puntos en la parte inferior de éste. Al hacer clic en una flecha se mostrará el siguiente slide. Cada punto representa a un slide, y al hacer clic en un punto se mostrará el slide correspondiente.
Es muy habitual el uso de este recurso en tiendas online.
Hoy en día, se suelen configurar los sliders para que no se muestren en dispositivos móviles, ya que éstos provocan una carga más lenta de la página en la que éste está incluido.
No recomiendo poner más de 3 o 4 slides en un slider, ya que cuantos más slides tenga el slider más tardará en cargar la página. Además, el visitante no suele ver más de 2 o 3 slides.
Aquí tienes varios ejemplos de slider
3.2.2.3.- Carrusel de imágenes
Un carrusel de imágenes es algo similar a un slider, pero con la diferencia de que en cada slide o elemento que muestra el carrusel se muestran varias imágenes y no solo una como sucedía en el slider.
Los elementos de navegación del carrusel de imágenes suelen ser los mismos que los del slider.
Este recurso se utiliza mucho en tiendas online para mostrar productos de una tipología, marcas de productos, etc.
3.2.2.4.- Iconos
Sin duda, los iconos son un recurso muy utilizado en los sitios web. Es una forma sencilla, limpia, ilustrativa y visual de mostrar características y servicios en una página.
Además, los iconos cargan mucho más rápido que las imágenes, por lo que desde hace mucho han sido unos recursos muy adecuados para crear contenido en sitios web.
Aquí tienes ejemplos de iconos
3.2.2.5.- Botones
Los botones son al fin y al cabo enlaces, pero con un diseño atractivo que llame a la acción al visitante. Los botones son elementos de interacción con el visitante.
Los botones son elementos imprescindibles, hoy en día, en un sitio web. Con los botones llamamos la atención sobre las acciones que queremos que el visitante realice en nuestro sitio web.
Habitualmente se incluyen opciones de diseño tipo “hover”. Es decir, acciones en el diseño que se producen en el botón cuando el visitante coloca el puntero del ratón sobre el botón. Puede ser un cambio de tamaño en el botón, un cambio de color, etc.
Aquí tiene ejemplos de botones
Cupón: horizonweb
3.2.2.6.- Conmutadores o botones desplegables
Los conmutadores o botones desplegables son un elemento muy interesante en diseño web. En el conmutador solo se muestra un título. Pero cuando se hace clic sobre éste, se despliega el contenido de este.
Son elementos muy interesantes, porque nos permiten añadir mucho contenido, pero que este quede limpio y visual.
Google leerá el contenido del botón desplegable aunque esté cerrado. Por lo que es un recurso muy interesante para aunar SEO (que implica una cantidad significativa de texto) con limpieza visual, ya que el texto no se muestra en primera instancia.
Aquí tienes ejemplos de conmutadores
3.2.2.7.- Acordeón
El acordeón está formado por un conjunto de botones desplegables o conmutadores, con la peculiaridad de que entre los conmutadores que forman el acordeón solo puede haber uno desplegado.
Cuando desplegamos un elemento del acordeón se cerrará el que esté desplegado en ese momento. Por lo que solo se mostrará un elemento del acordeón desplegado.
Este recurso se suele utilizar mucho para la sección de preguntas frecuentes o FAQs del sitio web.
Aquí tienes ejemplos de acordeón
3.2.2.8.- Contadores
Los contadores son elementos visuales dinámicos, que muestran valores en movimiento y aportan dinamismo a la web. Existen muchos tipos de contadores diferentes.
Hay algunos que muestran barras horizontales dinámicas, otros están formados por círculos dinámicos. También existen contadores que solo muestran dígitos en movimiento, sin barras ni círculos.
Los contadores pueden representar valores porcentuales, valores monetarios, cantidades, etc.
Ejemplos de contadores de barras
Ejemplos de contadores numéricos
Ejemplos de contadores circulares
DESCUENTO DIVI + REGALO
3.2.2.9.- Formulario de contacto
El formulario de contacto es un elemento clave en cualquier sitio web. El formulario permite una comunicación vía email entre el visitante y la persona que gestiona el sitio web.
El formulario está formado por una serie de campos, que el visitante ha de rellenar. Cuando se envía el formulario, se enviará un email a la persona que gestiona la web con todos los datos rellenados por el visitante del sitio.
Los campos del formulario pueden ser obligatorios de rellenar o no. Esto va a depender de la configuración que realicemos en el formulario.
Existen muchos tipos de campos diferentes, como: campos de texto, checkbox, radio button, campos de fecha, áreas de texto, etc.
Si disponemos de certificado SSL en nuestro sitio web, estos datos viajarán por internet codificados y por tanto no podrán ser descifrados por ninguna persona que los pudiera interceptar.
En el formulario se suele incluir un elemento denominado Captcha, que sirve para evitar recibir correos tipo SPAM.
No solo se utiliza el formulario de contacto en la página de contacto. Dependiendo del sitio web, puede ser necesario incluir formularios personalizados en varias páginas del sitio web.
Formulario de contacto con Captcha
3.2.2.10.- Galería de imágenes
Una galería de imágenes está formada por un conjunto de imágenes, en general, de pequeño tamaño, ampliables a través de una capa emergente u overlay. Cuando hacemos clic en una imagen esta se amplía en una capa emergente junto a unos elementos de navegación como:
i.- flechas de navegación: las flechas sirven para ir navegando por las diferentes imágenes que conforman la galería, sin salir de la capa superpuesta u overlay.
ii.- Aspa: el aspa suele aparecer en la parte superior derecha de la capa emergente y sirve para cerrar la capa y volver a la visión normal de la galería.
Este recurso se utiliza mucho para presentar imágenes relacionadas entre sí.
Ejemplo de galería de imágenes
3.2.2.11.- Recomendaciones
Éste es un recurso ampliamente utilizado en blogs, tiendas online y webs corporativas de hoy en día.
Una recomendación es un bloque, en el cual un cliente que ha probado un determinado servicio o producto que se ofrece en la web, hace una recomendación positiva de su experiencia.
Habitualmente en el bloque de recomendación se muestra la imagen de la persona que realiza la recomendación, el texto propio de la recomendación y su nombre. En algunas ocasiones, también se muestra un enlace a su sitio web e incluso su puesto de trabajo.
Las recomendaciones sirven para reforzar la confianza del cliente hacia los servicios o productos que ofrecemos a través de nuestro sitio web.
Ejemplo de recomendación en una web
La barra lateral o sidebar, desde hace mucho tiempo, ha sido un recurso propio de los blogs en internet. Aunque, también es cierto, que hay algunos bloggers que en la actualidad no usan este tipo de barras en sus blogs.
También es muy utilizado en tiendas online.
En la barra lateral se incluyen elementos que sirve para ayudar al visitante a encontrar lo que está buscando.
Si hablamos de una tienda online, pues, se suelen colocar filtros de atributos, filtros de precios, barras de búsqueda y otros elementos que ayuden al cliente a encontrar el producto que buscan.
En el caso de los blogs, se suele utilizar una barra de búsqueda de artículos, filtros de categorías, últimos posts y otros elementos que ayuden al visitante a encontrar la entrada de blog que están buscando.
En el caso de wordpress, estos elementos que se añaden a la barra lateral se denominan Widgets.
Ejemplo de barra lateral o Sidebar en página web
3.2.4.- Botón de volver arriba
Cuando hacemos scroll hacia abajo en el contenido de una página, en algunos sitios webs, se muestra una flecha apuntando a la cabecera o header de la página.
Si hacemos clic en el botón, el contenido que se visualiza en el navegador se desplazará hasta la parte superior y se nos mostrará la parte superior de la página, como si volviéramos a acceder a ella.
Este tipo de recurso es muy interesante en sitios web que tienen páginas con mucho contenido, ya que evitan que el usuario tenga que volver a la posición en la página a través del scroll del navegador o la ruleta del ratón.
Botón de volver arriba
En el footer o pie de una página web también hay una serie de elementos característicos que habitualmente se suelen utilizar.
El footer se suele dividir en dos bloques, uno de más altura situado en la parte superior del footer y otro más estrecho situado debajo.
En la partes superior del footer se suelen ubicar diferentes bloques informativos. Esta parte superior del footer se suele dividir en 2, 3 o incluso 4 columnas.
En cada columna se suele colocar un bloque informativo, que en el caso de utilizar WordPress se denominan Widgets.
3.3.2.- Información legal
Uno de los bloques habituales que se sitúan en la partes superior del footer, es un bloque con enlaces a la información legal de la web.
Habitualmente se colocan aquí, enlaces al Aviso Legal, Política de Privacidad y Política de cookies. Si se trata de una tienda online, también se suele ubicar aquí un enlace a las condiciones de compra.
3.3.3.- Datos de contacto
También se suele utilizar en la parte superior del footer un bloque informativo con los datos de contacto de la empresa, como el teléfono, email y dirección.
En muchas ocasiones se recurre a pequeños iconos que se sitúan a la izquierda de cada dato de contacto.
También es habitual encontrar en el footer enlaces a las redes sociales en que está presente la empresa.
Se suelen colocar iconos con un enlace que dirigen al cliente a la página de la empresa de cada una de las redes sociales.
3.3.5- Los créditos de la página
Se denomina créditos a la barra inferior del footer, donde se suele ubicar el nombre de la empresa que ha desarrollado la web.
También es habitual encontrar simplemente el nombre de la empresa.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
