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.

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?

Dise√Īadora Web y Consultora de Marketing Digital especializada en dise√Īos que conviertan. Mi objetivo es impulsar tu negocio mediante un dise√Īo con estrategia que aumente tus conversiones y te d√© m√°s notoriedad en internet.

8 comentarios en “Estructura b√°sica de una p√°gina web: Dise√Īo, Elementos y Partes [+Wireframes]”

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

    • 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!

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

Deja un comentario

Responsable:¬†Bego Romero (Bego√Īa Romero)
Finalidad: Gestión de los comentarios de las publicaciones
Legitimación: Consentimiento del interesado
Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. Los boletines electrónicos o newsletter están gestionados por entidades cuya sede y servidores se encuentran dentro del territorio de la UE o gestionados por entidades acogidas al acuerdo EU-US Privacy Shield.
Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional. Si no facilitas los datos solicitados como obligatorios, puede dar como resultado no poder cumplir con la finalidad para los que se solicitan