Estructura básica de una página web: Diseño, Elementos y Partes [+Wireframes]

Tener una estructura óptima de una página web es muy importante para su diseño y posterior conversión, ya que nos ayudará a conseguir los objetivos que queremos lograr con la web.

Ahora mismo estarás diciendo: Vale Bego, para hacer un diseño de la estructura de mi web necesitaré un menú, un cuerpo, un pie de página, y poco más”.

Pero no, si todas las páginas de este mundo son iguales y no están diseñadas para una que el usuario tenga una buena experiencia, ¿cómo pretendemos que nuestra página web sea una ventaja competitiva en nuestro negocio?

Por esto mismo, hoy quiero enseñarte la estructura jerárquica que debe tener tu sitio web, así como sus partes y elementos para lograr que tus funnels de venta y estrategias conviertan sí o sí.

¿Qué estructura debe de tener una página en función del objetivo? ¡Descubre los diferentes tipos de estructuras de páginas con sus Wireframes! Clic para tuitear

Para ello, he diseñado unos wireframes con la estructura básica de las páginas más comunes que tiene una web.

Estos bocetos los he hecho para versión ordenador, pero debes de tener en cuenta el término “MOBILE FIRST”, ya que hay que diseñar primero para móvil, pero he pensado que para el usuario medio sería más fácil entender el artículo con el boceto realizado en esta versión.

Estructura general de una página de Inicio o Home

Ya sabes que la página de inicio es la más importante y la primera que va a ver el usuario cuando realice una búsqueda directa.

En esta página lo que deberemos mostrar a simple vista va a ser nuestra propuesta de valor donde expliquemos qué hacemos y transmitamos por qué deben contratarnos en una sola frase para, o bien que nos contraten, o bien que entren en el funnel que hemos creado con nuestro CTA o llamada a la acción.

TALLER 100% ONLINE Y GRATUITO

¿Quieres aprender a hacer tu página web profesional?

Descubre cómo crear una web de forma totalmente práctica:
taller diseño

Como no quiero contarte mucho rollo, prefiero que veas el ejemplo del diseño de la estructura en el wireframe que he creado, podría variar en función del tipo de página web y negocio. En este caso lo he enfocado a una home de marca personal.

Los elementos que debe de tener son:

  • Logotipo y menú.
  • Imagen de producto, empresa o fotografía personal.
  • Encabezados (H1, H2, H3…).
  • Botones de llamadas a la acción.
  • Texto que ayude al usuario a entender nuestro proyecto.
  • Etc.

Estructura de una landing de Servicios

Siguiendo con el ejemplo de marca personal, voy a enseñarte la estructura de una página de servicios (que también podría servir para una empresa).

Como te voy a repetir a lo largo de todo el artículo, esto es un ejemplo de la estructura de la página que yo he inventado en mi cabeza, pero cada sitio web es un mundo, por lo que serán todas distintas.

Los elementos básicos que deberá tener son:

  • Fotografía de la persona o logotipo de la empresa.
  • Beneficios que aporta nuestro servicio o producto.
  • Contenido visual que nos haga ver lo que estamos vendiendo.
  • Testimonios o historias de éxito.
  • Llamadas a la acción o botones.
  • Preguntas frecuentes.
  • Etc.

Estructura de una landing de Captación o Squeeze Page

Una squeeze page es una página donde se pretende captar un email para realizar acciones de email marketing, por lo que debemos de llamar la atención al usuario para que sienta la necesidad de dejar su email y recibir lo que estemos regalando o promocionando.

Debemos de hacerlo tentador y tener detrás una buena estrategia para retener al suscriptor y que no se dé de baja nada más recibir el primer email.

Los elementos que contendrá esta página de captación son:

  • Título llamativo apelando a la ventaja.
  • Call to action, formulario o botón.
  • Beneficios de dejar el email o de obtener el producto, infoproducto o regalo que le estemos ofreciendo.
  • Testimonios o historias de éxito.
  • Formulario o botón para quien haya hecho scroll en la página.
Cabe destacar que esta página también podría ser solo con la primera sección en la que captemos el email, no necesariamente debe de ser tan larga. Esto va a depender de las necesidades de cada squeeze page.

Estructura de una página con una Oferta

En vez de centrarme en una típica oferta de producto que vemos en un e-commerce en la que simplemente ponemos un cartel de “Oferta”, me he querido centrar en una OTO (One Time Offer), en la que se oferta algo único por un tiempo limitado.

Una OTO se tratará de una oferta especial que no podrá adquirirse más adelante, por lo que se transmite el “ahora o nunca”.

Esta oferta podemos hacerla en el carrito mediante una casilla con la oferta complementaria (bump offer), pero la he hecho para el caso de que se necesite realizar una página exclusiva para la oferta.

Lo ideal de esta página es que, si ya han comprado un producto, no tengan que volver a rellenar sus datos de compra, sino que directamente se les añada a lo que ya se han llevado. Es una increíble forma de incrementar el carrito de la compra sin invertir muchos esfuerzos.

Esta página va a necesitar:

  • Contador de tiempo indicando cuando acaba la oferta.
  • Un título muy llamativo y tentador (con ultimátum de compra) que invite a añadir el producto.
  • Un vídeo o imagen (vídeo mejor) de lo que estemos vendiendo.
  • Botón para añadir al carrito o a la cesta de compra.

Estructura de una página de Producto [E-commerce]

En un e-commerce la página de producto es una de las partes más importantes del proceso de compra, ya que si llega un usuario a nuestro producto a través de un buen posicionamiento SEO, y la página en la que aterriza es horrible, abandonará.

Hay muchas formas de diseñar esta página, y según los elementos y tipo de producto se hará de una forma u otra, pero yo me he centrado en la básica que tendríamos en un WordPress.

Los elementos básicos que deberá incluir son estos:

  • Fotografías o imágenes del producto.
  • Título, descripción corta y descripción larga.
  • Valoraciones y testimonios para dar credibilidad.
  • Reductores de ansiedad tales como “envío gratuito”, “pago seguro”, “calidad garantizada”, etc.
  • Un vídeo sería un plus extra a añadir en la página, para dar más confianza en la compra del producto.
  • Utilizar las técnicas de cross selling y up selling o ventas cruzadas con productos relacionados.
  • Un footer con las direcciones de la empresa, redes sociales y breve descripción para dar credibilidad a la web.

Estructura de una página de Blog

Un blog es una buenísima forma de vendernos a nosotros mismos o nuestros productos mostrando nuestros conocimientos o experiencia en el sector, pero también podemos jugar con los elementos de alrededor del contenido para monetizar más aún el proyecto.

Por eso, considero esenciales los siguientes elementos:

  • Contenido visual para el artículo (todo texto aburre).
  • Contenido de valor del propio artículo.
  • Banners persuasivos sobre lo que vendamos.
  • Lead magnet o content upgrade para captar a los lectores.
  • Artículos relacionados para aumentar el tiempo de permanencia en nuestra web y reducir la tasa de rebote.
  • Comentarios para que haya interacción social.

Estructura de una página de Gracias

La página de gracias es la que viene después de la compra de un producto o servicio y pueden servir para construir relaciones.

Podemos hacerla de diferentes maneras, pero este ejemplo de Wireframe me gusta especialmente por la forma de retener al usuario con un vídeo (algo muy beneficioso para el SEO) y porque podemos persuadir como queramos dentro de este.

Además de agradecer y ser “majos”, podemos continuar vendiendo productos relacionados mediante técnicas de ventas cruzadas e incluso hacerles una OTO (One Time Offer).

Los elementos que deberíamos incluir en esta página son:

  • El logotipo para crear imagen de marca, reconocimiento y recuerdo al haber realizado la compra.
  • Un vídeo de agradecimiento (si es posible) o una imagen simpática para dejar un buen recuerdo.
  • Una sección vendiendo otro u otros artículos relacionados.

¿Es importante tener en cuenta las partes de mi página web?

Si tras todo este tostón que te acabo de soltar aún no tienes claro que hay que diseñar la página web con estrategia y con estructuras que conviertan al objetivo, te recomiendo releerlo todo y recapacitar sobre las oportunidades que estás perdiendo actualmente con tu página web.

Es muy importante hacer estructuras que permitan conducir al usuario hacia el objetivo que nos hayamos propuesto en nuestro negocio.

Por todo esto, tener una buena experiencia de usuario (UX) en nuestra página web y un diseño o interfaz de usuario (UI) correctas, nos ayudarán a ganar más dinero con nuestro proyecto, ¿ahora lo ves? Espero que sí.

¿Crees que es importante estructurar una página web antes de su creación?
¿Conoces algún tipo o estructura de página que convierta muy bien según tu experiencia?

4.8/5 - (13 votos)

¿Necesitas ayuda para potenciar el marketing digital de tu proyecto?

Si estás buscando a profesionales que realicen servicios de marketing digital, haz click en el botón y cuéntanos qué es lo que necesitas. 

Twitter
LinkedIn
Facebook

32 comentarios en «Estructura básica de una página web: Diseño, Elementos y Partes [+Wireframes]»

  1. Saludos cordiales:

    Me ha encantado el contenido. Una gran idea utilizar wireframes mejor que mockups.

    La estructura del sitio web es fundamental, y luego la estructura de la URL. No hay obsesionarse con el SEO, pero una web sin orientación al usuario y sin orientación al SEO termina comiéndose a sí misma.

    Responder
  2. Bego, muchas gracias por la información proporcionada, estoy por mandar hacer mi página web de Bienes Raíces y requiero explicarle a mi diseñador qué quiero y tu artículo ha sido de gran ayuda, saludos de Tijuana, México!

    Responder
  3. Me encanta el artículo Bego, es muy original y de tu estilo. Además es un tema que pocas veces, por no decir ninguna, he visto que se haya tratado tan bien hasta ahora.

    ¡Muchas gracias!
    ¡Saludos!

    Responder
    • Muchas gracias Ricardo, es un post que me ha gustado mucho hacer, ya que aunque no hay una estructura 100% efectiva, siempre hay algunos puntos que debemos de tener en cuenta en todas las páginas de venta.
      ¡Un abrazo!

      Responder
  4. Hola linda!!, desde Argentina, estoy a tope con mi proyecto de Marketing digital y de mostrador a negocios pequeños y medianos, ya tengo dominios, alojamiento y estoy en practicas, gran ayuda este articulo, mil gracias!. Debo apurarme tengo 74 años y se aceleran los tiempos.

    Responder
Deja un comentario

Bego Romero

Blog Bego Romero

Soy Bego, diseñadora web, consultora de Marketing Digital y Fundadora de la Agencia de Marketing Aceleradora Digital. Ayudo a negocios como el tuyo a digitalizarse y automatizar sus ventas online para mejorar su visibilidad en internet y aumentar su facturación.

SÍGUEME EN REDES

También puede interesarte...

consigue una web rentable

DESCARGA GRATUITA

¿No consigues vender a través de tu página web?

Descubre los errores por los que tu web no es rentable y el pack de recursos que te ayudará a solucionarlo (Checklist, ebook y cuadernillo de ejercicios).

DESCARGA EL PACK GRATUITO

Responsable: Begoña Romero Orozco
Finalidad: Gestionar el envío de notificaciones sobre marketing y comunicación.
Legitimación: Consentimiento del interesado. Destinatarios: Los boletines electrónicos o newsletter están gestionados por entidades cuya sede y servidores se encuentran dentro del territorio de la UE o por entidades acogidas al acuerdo EU-US Privacy Shield, cumpliendo con los preceptos del Reglamento Europeo de Protección de datos en materia de privacidad y seguridad.
Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.

Descarga gratis un pack de recursos gratuitos para mejorar tu web y vender más
¡ESPERA!
Descarga el pack gratuito:
Consigue el pack con el que detectar los errores de tu web y planificar tu nueva estrategia para vender más