¿Cómo estructurar una página de portada o de inicio?

Cómo estructurar una página de portada

En este artículo te voy a enseñar cómo estructurar una página de portada o página de inicio de una manera simple pero eficaz, enfocada a lograr un objetivo en concreto, como puede ser pedir una cotización, registrarse en un evento, agendar una consulta, etc.

La página de portada debe ser clara y concisa para que el visitante cuando llegue a ella sepa que hacer desde el principio, con un simple vistazo.

Para estructurar una página de portada se debe tener en cuenta cual es el objetivo principal que se quiere lograr cuando una persona visita nuestra web. Debe tener un inicio, un intermedio y un final, con el propósito de transmitir al usuario quiénes somos y porqué somos su mejor opción para resolver su problema.

Antes de comenzar, me gustaría invitarte a contactarme si necesitas ayuda con el diseño o creación de tu sitio web, me encantaría poder apoyarte con tu proyecto.

Hero Section

La primera sección que debe tener una página de portada es la que se conoce como «Hero Section». Es el primer bloque que un usuario visualiza al momento de aterrizar al sitio web y tiene el arduo trabajo en solo 6 segundos (según estadísticas) de convencer a la persona de que se quede en nuestro sitio web para ver que le estamos ofreciendo.

Cómo estructurar una página de portada - Hero Section
Hero Section

Debido a que solo tenemos 6 segundos para captar la atención del usuario, es de vital importancia que se utilicen elementos gráficos y textos que capten de manera rápida la atención del usuario para invitarlo a que siga leyendo el resto de secciones.

Para eso es recomendable conocer bien al cliente ideal, para saber cuales son esos elementos que pueden captar su atención de manera rápida y así lograr que se quede en nuestra página de portada. Cada proyecto es un mundo, así que cada proyecto tiene su cliente ideal y es importante definirlo, preferiblemente antes de comenzar a diseñar el sitio web.

La Hero Section debe ser limpia, fuera de distracciones, con la menor cantidad de elementos posibles con el objetivo de que el usuario se enfoque en decidir si realmente es lo que está buscando y que pueda tomar acción.

Punto de Dolor

Al momento de hacer scroll o pasar a la siguiente sección, tenemos 20 segundos más para hacer que el usuario siga interesado, una de las mejores formas de hacerlo es recordarle el problema que está buscando resolver, por lo que esta sección la llamaremos Punto de Dolor.

En esta sección lo que buscamos es mencionar el mayor problema que nuestro cliente ideal está afrontando y cómo podemos nosotros ayudarlo a resolverlo.

Cómo estructurar una página de portada - Sección Punto de Dolor
Sección Punto de Dolor

Te recomiendo utilizar la estructura que se muestra en la imagen anterior, donde se coloca en una frase corta el punto de dolor o el problema más grande que pueda estar buscando solucionar nuestro cliente ideal y del lado derecho ya un texto explicando el cómo podemos ayudarlo a resolverlo.

La mayoría de la gente no lee detenidamente los textos largos, así que lo más probable es que el texto de la derecha no lo lean hasta que ya estén plenamente convencido que quieren trabajar con nosotros, pero igual es importante colocarlo, ya que además de explicarle al cliente como podemos ayudarlo, sirve para que Google sepa de que va nuestro sitio web y nos posicione en los resultados de búsqueda.

Trabajos Previos o Portafolio

Luego de recordarle al usuario su mayor problema y explicarle brevemente como podemos ayudarlo a resolverlo, es hora de mostrarle algunos casos de éxito, para que vea con sus propios ojos que tenemos las capacidades necesarias, así que la siguiente sección sería una galería de trabajos previos o, como se le conoce popularmente, el portafolio.

Sección Portafolio
Sección Portafolio

Es importante mostrar nuestros mejores trabajos en esta sección para el cliente pueda visualizar la calidad de nuestro trabajo y nuestras capacidades. Esto ayudará a inclinar la balanza hacia nosotros al momento de que vaya a tomar la decisión final.

Puedes jugar con esta sección para darle más información al cliente, por ejemplo, una buena opción sería que las imágenes sean clickeables y que lleven a una página propia del proyecto donde el cliente pueda ver más información del mismo y así saber con que herramientas o materiales trabajar por ejemplo.

La idea tampoco es mostrar todos los trabajos que hemos hecho, con mostrar unos 6 será suficiente, ya que si cargamos más el usuario se puede distraer y perderá el foco de lo que queremos, aparte de que se vuelve mucho más pesada la página web y eso no le gusta a Google.

Propuesta Única de Valor

Ahora es momento de hacer nuestra Propuesta Única de Valor, la cual no es otra cosa que resaltar lo que nos hace diferente y porqué somos la mejor opción que tiene el usuario para resolver su problema.

Debe ser algo preciso y conciso, porque como te mencioné, la mayoría de la gente no lee el contenido de una página web de portada, por muy bien estructurada que esté. Debes ser capaz de transmitir tus factores diferenciadores en algunas palabras o frases, como el famoso elevator pitch.

Según estudios que han realizado el número mágico es mostrar 3 elementos, no me preguntes porqué no 2, o 4, porque la verdad no lo sé, pero lo cierto es que está demostrado que colocando 3 elementos que describan nuestros puntos fuertes tiene bastante influencia en el cerebro humano.

Sección Propuesta Única de Valor
Sección Propuesta Única de Valor

La idea principal de esta sección es que el cliente conozca en que nos diferenciamos con respecto a nuestra competencia, porque seguramente estará viendo los sitios web de la competencia para ver quien puede resolver mejor su problema.

Aquí es donde le decimos en que nos diferenciamos del resto y porqué debería hacer negocios con nosotros.

Testimonios

Por último, pero no menos importante, tenemos la sección de Prueba Social o Testimonios.

Los testimonios son muy importantes porque no somos nosotros mismos diciendo yo puedo hacer esto y aquello, sino que son otras personas diciéndole al usuario porqué confiaron en nosotros y validando nuestras capacidades.

Cómo estructurar una página de inicio - Sección Testimonios
Sección Testimonios

Los testimonios deben ir acompañados de una buena fotografía preferiblemente sonriendo, para demostrar de esta manera que el cliente quedó satisfecho con nuestro trabajo. Obviamente depende mucho del tipo de rubro en el que estemos, que sea más fácil o difícil conseguir estos testimonios con una buena fotografía.

Mucha gente no quiere o no le gusta mostrarse en una fotografía para un testimonio, pero hay otras que sí, así que es cuestión de buscar e insistir un poco.

Al finalizar la sección debe haber un claro llamado a la acción para completar el objetivo de la estructura de la página de portada, tal y como la habíamos planeado, bien sea registrarse a una lista, agendar una cita, solicitar una cotización, etc.

Ahora ya sabes cómo estructurar una página de portada o página de inicio, como puedes ver, la estructura es sencilla, pero efectiva. Va guiando al usuario paso a paso para que complete el objetivo que queremos.

¿Cómo estructurar entonces una Página de Portada?

Finalmente así quedaría nuestro Wireframe de la página de la portada de un proyecto web.

Cómo estructurar una página de portada
Wireframe de Página de Portada

Espero que te sea de utilidad este pequeño artículo y si es así, me ayudarías mucho si lo compartes con las personas que pienses que le puede interesar.

Un saludo y conversamos en los comentarios.

Alberto

Alberto

Soy ingeniero informático de profesión y me encanta la tecnología, por eso me he dedicado al diseño y desarrollo de sitios web con el propósito de ayudar a la mayor cantidad de personas a tener su sitio web y que éste se convierta en su oficina virtual, donde pueda ofrecer al mundo sus productos o servicios.
Alberto

Alberto

Soy ingeniero informático de profesión y me encanta la tecnología, por eso me he dedicado al diseño y desarrollo de sitios web con el propósito de ayudar a la mayor cantidad de personas a tener su sitio web y que éste se convierta en su oficina virtual, donde pueda ofrecer al mundo sus productos o servicios.
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on telegram
Telegram
Share on whatsapp
WhatsApp
Share on email
Email

2 comentarios en «¿Cómo estructurar una página de portada o de inicio?»

  1. Muchas gracias, estructurar una pagina web es una tarea complicada al principio y si no sabes como hacerlo adecuadamente te hara la vida imposible, tanto al momento de diseñar como cuando tienes que hablar con un cliente sobre su proyecto, si no hay una estructura definida desde un principio se pierde mucho tiempo divagando.

    Responder
    • Hola Mónica! Estoy totalmente de acuerdo contigo, entre mejor planifiquemos el diseño y desarrollo del sitio web, será mucho más fácil el trabajo y mejor el resultado.

      Responder

Deja un comentario