En Internet hay varios tipos de Sitios Web. Cada página web tiene su propio tema y sus propios objetivos. No va a ser lo mismo una página web empresarial, la cual tiene como objetivo informar a la persona sobre sus servicios, que una tienda en línea cuyo objetivo es vender sus productos. Sin embargo, casi todas poseen una secuencia de elementos en común: Una cabecera, el contenido o cuerpo, y un pie de página.
Es fundamental mencionar que la composición de una página web tiene un papel importante en la experiencia de navegación de las personas. Para asegurar que tu página web ofrezca una buena experiencia a las personas, las piezas individuales de tu sitio web deben trabajar bien juntas.
Por consiguiente, si te preguntas cómo debes hacer una página web, debes tomar en cuenta que los elementos de tu sitio web sería un buen comienzo. En este artículo te compartiré los elementos más importantes de una página web y su funcionalidad para hacer una página web genial y sobre todo funcional.
Tabla de contenidos
Composición de una página web
Una página web se compone principalmente de la estructura primaria, que le da la columna vertebral a un sitio web, los elementos del contenido de una web y el esquema que se refiere a la distribución del contenido en la web.
Estructura primaria:
- Encabezado.
- Menú.
- Imágenes.
- Contenido del sitio web.
- Pie de página.
Elementos principales de contenido:
- Logo.
- CTA o llamados a la acción.
- Formularios.
Esquema de una página web:
- Página de inicio.
- Productos y servicios.
- Blog.
- Contacto.
- Política de privacidad.
Estructura de una página web
Pese a la extensa variedad de páginas web que encontramos en la web, existen elementos que se repiten casi siempre, entonces es importante resaltar que una página web está formada por cabecera o header, cuerpo o body y pie de página o footer.
Estos elementos son muy importantes, por lo tanto todas las páginas web deben tenerlos para que funcionen de una manera correcta. Así que estos elementos forman la estructura de una página web, por lo tanto, es la columna vertebral de tu sitio web.
Encabezado
El encabezado o cabecera también conocido como Header es la parte superior en una página web. Por lo general, es lo primero que ven los usuarios una vez que ingresan a un sitio por lo cual debe diseñarse de la forma más clara posible. Generalmente se mantiene sencilla y el contenido debe estar escrito en una tipografía clara y legible. Regularmente el encabezado se puede apreciar en todas las subpáginas y tiene el diseño igual en cada una de ellas.
Los elementos que se encuentran en la cabecera son:
- Logotipo de la empresa
- Menú de navegación
- Cuadro de búsqueda
- Una descripción corta de tu sitio web
Comúnmente estos elementos varían en función de la plantilla de WordPress que tengas, pero son los más frecuentes.
Si nos referimos en lenguaje HTML, te darás cuenta que todo el contenido de la cabecera se puede ver entre las siguientes etiquetas:
<header>Contenido de la cabecera</header>Importante: Al momento de hacer una página web, se recomienda fijar la cabecera. ¿Qué significa esto? A medida que un visitante realiza scroll y navega a través de tu sitio web, la cabecera se debe mantener fija, de esta forma tu marca y los accesos fundamentales de tu página por ejemplo el menú, estarán siempre accesibles y a la vista.
También es común encontrar sliders en la cabecera, un slider es una presentación de diapositivas de fotografías de buena calidad y que representan la actividad de tu empresa, esto será lo primero que verán los usuarios en tu página Web. Es una idea muy buena que estas imágenes se encuentren acompañadas de texto, el cual ayudará al visitante a conocer más sobre el contenido de la página que esta visitando.
Menú
El menú es el mapa del sitio web que ayuda a los usuarios a localizar lo que están buscando, así sea la tienda en línea de tus productos, o cierta información acerca de tu empresa. Hay varios tipos de menús en una página web, los más frecuentes los puedes encontrar en el encabezado. Generalmente el menú tiene las subpáginas más relevantes, como la página de quiénes somos, de contacto y elementos fundamentales como la tienda y el blog.
El menú de navegación le dirá al visitante a que parte de la página web deberá dirigirse. Por este motivo es fundamental que se encuentre siempre visible. Tanto de manera extendida al navegar en pantalla completa como de manera contraída como se ve en los dispositivos móviles. Es importante que el menú tenga un buscador para que el visitante pueda encontrar más rápido un contenido en caso de que la página web sea enorme.
Realmente la navegación de tu sitio web por medio del menú, se debe estructurar de forma lógica e intuitiva y pensar detenidamente cuales subpáginas quieres mostrar. Esto quiere decir que debes incluir las categorías apropiadas en el menú dentro de la cabecera ya que es importante para ayudar a los usuarios a encontrar las páginas primordiales y así marcar la diferencia entre un sitio web con éxito y uno que no tiene los resultados que se requieren.
Imágenes
A pesar de que el contenido es primordial, lo que en realidad llama la atención de los visitantes son las imágenes que escojas. Por lo general, son lo primero que una persona ve después del encabezado, por lo cual son importantes para producir una excelente primera impresión. En especial, la primera imagen es la que genera la diferencia entre el éxito (por ejemplo, un visitante que se queda en tu sitio) y la derrota (un visitante que se va de tu sitio web).
La primera imagen, en conjunto con el encabezado y el menú, componen lo que usualmente se conoce como «above the fold», la cual es la sección de un sitio web que es visible para los visitantes a primera vista sin necesidad de moverse. En este sentido, las imágenes que escojas deben de mostrar lo que hace tu empresa o marca, ya sean productos o servicios, o sencillamente imágenes que simbolicen tu esencia, busca imágenes que en verdad te representen.
Contenido del sitio web
En el cuerpo de la página, iría el contenido principal de la página web. El contenido puede estar formado en una o más columnas. Esto dependerá de que nos encaje mejor con nuestro contenido. Algunas veces vemos el cuerpo dividido en 2 columnas. Por ejemplo una columna ocupa la mayoría del ancho, como unas 3/4 partes aproximadamente en el cual iría el contenido más importante. Y otra columna ocuparía el resto de ancho, como 1/4 aproximadamente. Esta parte se le conoce como sidebar.
Por contenido hacemos referencia a los recursos y textos en tu página web los cuales muestran de qué se trata y por qué es importante para los visitantes. El contenido de una página web abarca una gran gama de funcionalidades. Ya sea desde los párrafos que aclaran la misión de tu empresa o negocio, hasta sólo una palabra en todos los botones.
En la mayor parte de los sitios web, casi todo el contenido está escrito en fracciones de texto. No obstante, las imágenes y los videos son tan relevantes como los textos, ya que representan lo escrito.
Planifica detalladamente el contenido de tu sitio web para que te asegures de que todo usuario pueda entenderlo tan bien como tú. Recuerda que puedes actualizar el contenido de tu página web en el momento que tu quieras y mejorarlo en caso de que algo no funcione como lo habías planeado.
En HTML puedes encontrar rápidamente el contenido, éste lo puedes encontrar dentro de las siguientes etiquetas:
<body>Contenido del cuerpo</body>Pie de página
El pie de página, también se le conoce como footer y es la sección que cierra las páginas.
En pocas palabras, el pie de página lo podemos encontrar en la parte inferior de cualquier sitio web. Por lo general tiene un mapa del lugar, el cual ayuda a los usuarios para que puedan encontrar lo que están buscando. Es la mejor zona para vincular a contenido primordial que no pertenece ya sea al encabezado o al contenido principal, así como también información de contacto y de redes sociales.
Generalmente encontramos la información legal como (Política de Privacidad, Cookies, Política de devoluciones y Condiciones de uso), datos de contacto como teléfonos, dirección del negocio o enlaces a redes sociales, suscripción a newsletter, preguntas frecuentes, logo del negocio, etc.
En HTML el pie de página lo podemos encontrar en las siguientes etiquetas:
<footer>El contenido del pie de página</footer>Elementos de una página web
Aunque los próximos elementos de una página web no forman parte de la estructura principal, son fundamentales y los sitios web en su mayoría los integran para mejorar el funcionamiento y conseguir tus objetivos con tu página web.
Logo
Si quieres construir una marca, entonces el logotipo es algo fundamental. El logo de tu marca ayuda a representar a tu negocio y la hace memorable tanto para los clientes ya existentes como para los clientes más frecuentes. Por lo general los logotipos dentro de una página web los podemos ver en el encabezado, ya sea en la parte superior izquierda, en el centro o algunas veces de lado derecho aunque no es muy usual y están enlazados a la página de inicio.
Si ya tienes un logotipo, debes agregarlo en tu encabezado y asegurarte de que se encuentre vinculado a tu página de inicio. Si quieres tener un logotipo, puedes utilizar un generador de logotipos o puedes hacerlo con un diseñador profesional.
CTA o llamados a la acción
Si haces una página web, posiblemente te encuentres tratando de obtener resultados con ella, ya sea vender productos, promocionar tus servicios o atraer visibilidad a tu marca. Sea como sea la finalidad, tienes que alentar a tus usuarios para que lleguen al lugar designado, y para esto sirven los llamados a la acción. Un CTA es un texto corto formulado como una llamada a la acción y su objetivo es intuir a los usuarios a dar el siguiente paso.
Mira este ejemplo de CTA, imagínate leyendo un artículo sobre marketing digital cuando de repente te aparece esto:
Los CTAs, o denominados a la acción tienen la posibilidad de situar en un botón o como un link directo a tu texto. Deben de ser breves, tener un verbo imperativo e incluir cierto sentido de urgencia como “comprar ahora”. Puedes agregar tus llamados a la acción en diferentes puntos de vista importantes de tu sitio web, por ejemplo, ya sea junto a la descripción de tal producto o de manera directa en el encabezado de tu página web. Sigue estas recomendaciones para mejorar los CTAs, y verás como tu sitio web comenzará a crecer.
Formularios
Los formularios en línea por lo general se usan para reunir información. Sin embargo, también se pueden usar para otros fines, por ejemplo como que un formulario de contacto permita a los usuarios comunicarse contigo de una manera más directa desde tu sitio web.
A grandes rasgos, un formulario de contacto puede ser muy agresivo para colocarlo en la página de inicio, pero puede ser perfecto en una página de contacto. Esto va a depender mucho del tipo de página web que tengas, puedes colocar un formulario de registro o un formulario de pago a tu sitio web. También si tu página web es One Page, el formulario sí o sí debe de ir en la parte posterior, pero como mencioné anteriormente esto dependerá del estilo que tengas en tu página web.
Esquema de una página web
Además de la estructura de una página web, tenemos el esquema de la página web, esto se refiere a la distribución del contenido en sus secciones.
Las piezas de una página web como las que estamos hablando pueden ordenarse de varias formas, esto dependerá del patrón de diseño que escojas para tu sitio web. Existen varias estructuras de sitios web. La estructura más frecuente se basa de una página de inicio, con la información más relevante y otras subpáginas con las secciones secundarias.
También hay otras estructuras, como los sitios web de una sola página o One Page, donde toda la información está a simple vista, y el usuario tiene que moverse hacia abajo para encontrarla. Sea como sea la estructura que decidas, lo más importante que debes tomar en cuenta es que la experiencia de navegación debe ser dinámica e intuitiva.
Página de inicio
Si hablamos de las piezas fundamentales de una página web, seguramente la página de inicio es una de ellas. Todos los diversos tipos de páginas web poseen una página en común la cual es la página de inicio.
La página de inicio constantemente está en el dominio principal y no en un directorio. Por ejemplo, la página de inicio o nombre de tu sitio web será tudominio.com y no tudominio.com/contacto.
Al ser la primera impresión que tendrán los usuarios de tu sitio web, tu página de inicio debe transmitir tu mensaje primordial para que pueda mantener a tus usuarios interesados. Una correcta página de Inicio, puede decidir que el visitante se quede más o menos tiempo o que de inmediato la abandone.
Una de las recomendaciones más importantes para tener éxito con tu sitio web, es conservar la primer página limpia y bien estructurada. Conserva solamente la información más importante como tu logotipo, tu tipo de negocio, tu eslogan o lema y un botón que invite a los usuarios a inspeccionar más tu sitio web.
Se suele agregar indicadores de éxito como el número de clientes, países en los que operas, años de experiencia, etc. Todo esto es para mostrar que tu empresa es la mejor. También ofertas y testimonios o colaboraciones, son elementos habituales en la página de inicio colocando reseñas de Google o logos de empresas con las que has colaborado.
Existen estudios que demuestran que un visitante permanece sólo unos segundos en un sitio web y si no ve nada que le llame la atención en ese lapso de tiempo se irá de la página. Cuando nos referimos a una buena página de Inicio, buscamos un buen diseño con el contenido bien formulado, tiempos de carga bastante rápidos y claro, que sea un diseño web responsivo, ya que actualmente el uso de dispositivos móviles para navegar por Internet ha crecido de manera notable.
Productos y Servicios
El contenido primordial del sitio web suele estar centrado en forma de catálogo en productos clasificados por categorías. En el momento que haces el contenido de una página web, lo ideal podría ser integrar información más detallada sobre los productos que vendes o los servicios que ofreces en una página en concreto.
En esta parte de la página debes agregar todo lo referente con tus productos o servicios: los resultados positivos de tus productos, características principales, público objetivo, el precio, costos de envío, etc.
Claro que no te puedes olvidar del gran valor que aporta una buena llamada a la acción en esta parte de tu sitio web. Textos como «Añadir al carrito», «¡Lo quiero!», «Reserva ahora», entre otros, te ayudarán a dirigir a tus usuarios hacia el objetivo final.
Blog
Si hay una sección importante en cualquier tipo de sitio web, esa es la sección del blog. Un blog es una colección de entradas y publicaciones en relación con tu empresa. Su objetivo es mantener informados a los visitantes con contenidos relacionados a tu negocio y al mismo tiempo poder atraer un tráfico de Long Tail.
Cada vez más es más común que las páginas web usen esta herramienta como parte de su estrategia de email marketing y SEO. Un blog podría ser desarrollado como un sitio web único o vincularse como una subpágina en el menú principal.
Aunque posiblemente sea un factor opcional de un sitio web, el hacer un blog es una manera perfecta de compartir información descriptiva con tu público. La mayoría de clientes valoran este contenido adicional, y en realidad un blog puede tener un impacto positivo en la imagen de tu negocio. Además, con cada publicación en tu blog, se indexan otras páginas bajo tu dominio, lo cual puede llegar a optimizar tu clasificación en los motores de búsqueda (SEO) y de esta manera atraer más audiencia. Además sirve de vínculo entre nuestra página web y nuestras redes sociales y así de esta forma atraer visitas desde dichos medios.
Elementos que no pueden faltar en tu blog:
- Buscador: Es cierto que no todas las plantillas tienen un buscador, pero tú se lo puedes agregar.
- Formulario de registro: Integrar un formulario de suscripción o registro en un blog es una manera de obtener leads de buena calidad. Aunque no sean concusmidores, ya posees su cuenta de correo electrónico para poder enviarle la información que publicas y, poco a poco, puedes acercarlos al proceso de compra.
- Categorías y etiquetas: Otro de los recursos que se recomienda integrar en esta parte de tu página web es una sección con las categorías y etiquetas de la información de tu blog. Esta es una buena manera de organizar el contenido y mejorar la usabilidad de tu sitio web.
Contacto
El número de teléfono, correo electrónico, redes sociales, la dirección y horarios de abertura son recursos básicos que tienen que estar presentes en cada una de las páginas de contacto.
Una de las metas que suele seguir una página web de un negocio, es obtener nuevos clientes potenciales, por tal motivo es importante que el visitante que entre a nuestra página web pueda contactarnos fácilmente.
Con este fin tenemos la posibilidad de ofrecer al visitante botones y links a lo largo de nuestra página web, que lo conduzcan a nuestra página de contacto. Esta página de contacto debe tener un formulario simple en el que la persona rellene solamente los campos requeridos y relevantes. Si el usuario rellena más campos de lo normal, puede ser que la persona decida no rellenar tal formulario.
También es común ver un mapa indicando la ubicación de nuestro negocio.
Elementos que no pueden faltar en tu página de contacto:
- Formulario de contacto: Si es posible darás a tus consumidores la posibilidad de contactarte las 24 horas del día, esto ayudará demasiado a tu imagen.
- Dirección de correo profesional: Aunque cada vez es más común, no es raro encontrarte con correos como barberiadongregorio@gmail.com. Por consiguiente, realiza las direcciones de correo personalizadas con tu dominio y demuestra que eres todo un profesional.
Política de privacidad
Posiblemente esta es una de las páginas menos vistas de un sitio web, sin embargo con el GDPR en Europa (e inclusive anterior a su aprobación) uno de los requisitos primordiales es proveer a los visitantes toda la información vinculada con el procesamiento de los datos recopilados por medio de tu sitio web.
Aunque en Latinoamérica, no aplica la GDPR varios países como México la exigen de acuerdo al IFAI exigen un aviso de privacidad.
Esta parte de tu sitio web no tiene que ir precisamente en el menú principal, pero si es necesario incluirla. Por lo general se puede encontrar en el pie de página o footer, así como en los avisos de cookies o una vez que agregas algún formulario de suscripción o de registro.
En resumen
Comúnmente cuando hablamos de las partes de una página web hacemos referencia a la composición de nuestra página, esto quiere decir, al encabezado (header), al cuerpo (body) y al pie de página (footer).
No es raro hablar de todas las partes de una página web para referimos a las diferentes páginas que se encuentran dentro de un sitio web. Debido a esto también hemos visto en qué radica cada una de estas páginas y los recursos más frecuentes que las conforman.
Al momento de crear tu página web toma en cuenta toda esta información para que tenga una estructura bien organizada, sea intuitiva para tus clientes y consigas los objetivos que deseas obtener.
