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! Share on XPara 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.
ÍNDICE DEL ARTÍCULO
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?
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.
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.
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?
32 comentarios en «Estructura básica de una página web: Diseño, Elementos y Partes [+Wireframes]»
Muchísimas gracias! Muy práctico y esclarecedor!
Gracias Letthy 🙂
Hola , me viene de lujo este articulo, ¿Con que herramienta has realizado los wireframes?
saludos
Estos están hechos con Illustrator, pero puedes probar Whimsical, está genial 🙂
Grande!! Me va a servir de mucha ayuda
Gracias Alex!
Este artículo hay que enmarcarlo y mostrárselo a quienes comienzan en el mundo del marketing digital y el diseño web. Sencillamente maravilloso. Te felicito!!!
¡Muchísimas gracias Luis!
Que agradable ver una pagina con grandes apuntes disponibles, felicitaciones
¡Gracias Juan!
Excelente la informacion… de Gran ayuda.
Gracias Julio!
Gracias bego por estos consejos, yo voy a empezar a aplicarlos en mi pagina web. Te contare los resultados obtenidos. De nuevo gracias por esta gran entrada
Muchas gracias a ti, ¡me alegro de que te haya ayudado!
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.
¡Muchísimas gracias Rafa!
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!
Me alegro mucho Alma! Un abrazo!
Wow! Gran artículo Bego, muchas gracias x este aporte! 😊
¡Muchas gracias José Ángel!
Muchas gracias por este fantástico artículo y esta web pasa a ser de mis favoritas
Muchas gracias Iván 🙂
Muy buena aportación, este tipo de post con tanto valor y tan aplicable es lo que da gusto leer. Por cierto, tambien tus infografias de instagram son una maravilla 👍
¡Muchísimas gracias Rafa!
Excelente Bego como siempre ya lo guarde para consultarlo cada vez que lo necesite, muy útil y práctico.
Gracias.
Gracias Franklin, agradezco mucho siempre tus palabras.
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!
Wow! Gracias!!!! Muy util toda esta info! Justo ahora estoy trabajando mis nuevos websites y proyectos online. 🙂
Muchas gracias Manuel, ¡espero que te sirva!
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.
Me parece fascinante, ¡enhorabuena! Un abrazo!