Cómo diseñar una página de inicio efectiva en tu web

La página de inicio será, por norma general, la página más visitada de tu web y en ella debes poner toda tu atención para conseguir retener a tus visitantes y causarles una primera buena impresión.

Dicen los que saben de esto de diseño de páginas web que un usuario tarda unos 3 segundos en hacerse una imagen de tu negocio nada más aterrizar en la home de tu web.

¿Te parece poco?

Pues imagínate la importancia que tiene entonces hacerlo bien.

«Nunca hay una segunda oportunidad para causar una primera buena impresión», Oscar Wilde.

Es muy importante que en todo el trabajo de creación, evites cometer una serie de errores de diseño web que comete mucha gente, para ir siempre por el buen camino.

Date cuenta además de que hoy en día la gente anda acelerada como si un oso hambriento les persiguiese todo el día y cuando llegan a una web, si no ven algo atractivo en el primer impacto que les anime a continuar navegando por ella, ¡ciao, bacalao!… se irán a otro sitio.

Piensa en esto: si tú vas por la calle paseando y ves el escaparate de un negocio que te llama la atención, lo más seguro es que acabes entrando y picando algo, ¿no?

Pues con una web ocurre lo mismo. Imagina pues lo importante que es diseñar correctamente tu página de inicio.

En este post voy a contarte lo que deberías y NO deberías hacer para tener una página de inicio que enamore a tus visitantes.

Ah, no olvides que la página Sobre mí, la de Servicios y la de Contacto también son importantes, así que cuídalas mucho también. Y no te olvides tampoco de las landing pages, páginas fundamentales para vender más y mejor.

¡Come on, everybody!

Fases para diseñar una web

Cómo diseñar la página de inicio de tu web

Si quieres que tu página de inicio sea efectiva y que tus visitas no caigan en saco roto, empieza a aplicar los siguientes consejos que te doy:

El texto es más importante que el diseño

Cuando nos ponemos a diseñar nuestra página web todos queremos ponernos en plan Dalí a experimentar con colores, tipografías, fotografías, fuegos artificiales, apariciones estelares de cosas volando…

Y no.

Eso no es lo primero que debemos hacer aunque nuestro cuerpo nos pida sacar nuestra vena artística.

Lo primero que debemos hacer es sentarnos delante de una hoja en blanco, coger un bolígrafo o un teclado y ponernos a estructurar y redactar los textos que vamos a querer plasmar en la página de inicio.

Una vez tengamos los textos claros, debemos adaptar el diseño a esos contenidos y no al revés.

cabecera web con llamada a la acción

Además, debemos tener en cuenta a quién vamos a hablarle, pues de esa forma sabremos cómo dirigirnos a él/ella: tono sobrio vs tono desenfadado, tutear vs tratar de usted…

Aunque te joda leer esto de un diseñador web, los copys (textos) son MÁS  importantes que el diseño.

Esto grábatelo a fuego porque de cómo cuides tus textos dependerá tu cuenta de resultados.

El visitante debe cumplir un único objetivo

Recuerda que en la introducción te he dicho que un usuario tarda unos 3 segundos en decidir si se queda en tu web o te manda a freír espárragos.

En esos 3 segundos debes conseguir que el usuario se quede en tu web.

Si lo consigues, debes mostrarle claramente el camino hacia donde tú quieres que vaya. Puede ser el formulario de contacto, puede ser la suscripción a un contenido gratuito (lead magnet), puede ser la compra de un producto en tu tienda online…

Lo importante es que el usuario permanezca en tu web y que haga algo que os beneficie a ambos.

Ayuda tus usuarios a resolver un problema

Cuando un usuario aterriza en tu web, ¿por qué lo hace?

¿Por lo guapo o guapa que eres?

¿Porque tiene un deseo irrefrenable de hacer negocios contigo?

¿Porque le sobra el dinero y quiere ayudarte a comprar el BMW de tus sueños?

Nanai de la china.

Los usuarios suelen llegar a tu web buscando resolver un problema.

Recuerda que lo más más más importante de tu web no eres tú. Es tu cliente ideal.

Si un potencial cliente llega a tu web y no le ayudas a resolver su inquietud, no te va a contratar por el curriculum tan bonito que te has currado con Elementor.

Y para poder cubrir una necesidad de un potencial cliente, primero debes tener bien identificado a tu cliente ideal, luego identificar sus problemas y para finalizar, tratar de aportarle la solución.

Destaca solo lo importante

Cuando se ponen a diseñar la página de inicio de su web, mucha gente se cree que esta es un cajón de sastre o el contenedor de resíduos orgánicos, donde todo cabe y no hay ni orden ni control.

En una homepage hay que destacar únicamente lo más importante de nuestro negocio.

Para explayarnos a gusto con cosas concretas ya tenemos la página Sobre mí, la de Servicios, etcétera, etcétera.

Si intentas destacar todo, nada destacará.

Potencia tu imagen de marca

Dentro de los 3 segundos de marras de los que te vengo hablando, una de las cosas con las que se quedará el usuario al aterrizar en tu web será la imagen que transmite tu negocio.

Aunque como te digo más arriba, lo más importante son los textos y responder a las necesidades de tus potenciales clientes, el envoltorio del caramelo que vas a ofrecer a tus visitantes es lo que hará que se queden o se den el piro.

Elementos que más deberías cuidar:

  • Cúrrate un logotipo que hable bien de tu negocio.
  • Utiliza una gama de colores adecuada. Con 2 es más que suficiente.
  • Busca un par de tipografías que se adapten a la imagen que quieres transmitir.
  • Usa fotografías profesionales tuyas, de tu negocio y/o equipo de trabajo, pero que sean siempre reales, no cogidas en un banco de imágenes.
  • Si lo ves necesario, usa algunas imágenes de stock para aspectos secundarios y como recursos de apoyo, pero huye de imágenes de aspecto anticuado u hortera.

Minimalismo = mayor velocidad de carga

Yo soy un firme defensor del «menos es más».

Aunque todos queremos que cuando alguien llegue a nuestra web diga WOW, realmente esto no es lo que nos va a dar el pan nuestro de cada día.

A mí me pasa que cuando llego a una web y veo que está sobrecargada de cosas, me da pereza y me voy.

Que si banners, que si sliders, que si popups, que si apariciones estelares de imágenes e iconos…

A ver, que no. Lo importante es captar la atención, sí, pero no ahuyentar al usuario.

Además, cuanto más ligera sea tu página de inicio, más rápido cargará y esto es muy positivo.

Haz una estructura fácil de identificar

A la hora de ponerte a maquetar la página de inicio de tu web, no te pongas en modo innovador e intenta basarte en estructuras que funcionan y que la gente está acostumbrada a ver.

Si la gente espera que una web siga una estructura de contenidos ya validada, ¡para qué complicarnos nosotros la vida y complicársela a nuestros visitantes!

Una de las prioridades es que organicemos el contenido de ARRIBA A ABAJO y de MÁS A MENOS relevancia.

Esto tiene mucho sentido porque si lo que queremos es que el usuario se quede en nuestra web, debemos captar su atención de la mejor manera posible arriba del todo y no esperar a que llegue al pie de página.

Utiliza keywords relevantes para posicionar bien la web

Las simpáticas arañitas de nuestro apreciado amo Google son un tanto vagas y suelen llegar a una web a indexar su contenido a través de su URL principal o dominio, para luego ir buceando en busca de otras páginas y entradas.

¿No crees que siendo así, es trascendental utilizar algunas de las palabras clave por las que queremos posicionar nuestro negocio en nuestra página de inicio?

¡Claro!

De esta forma, las graciosas arañitas de Mr. G se llevarán para su casita nuestra información más relevante para así indexarla en su súper mega biblioteca de webs interestelar.

Partes principales de la página de inicio de tu web

Ahora voy a contarte qué elementos no deberían faltar en tu página de inicio y cómo deberías organizarlos y aprovecharlos bien:

Cabecera

La cabecera es una sección que aparece -o al menos debería ser así- en todas las páginas de la web.

En ella suelen aparecer el logotipo, el menú principal y, en ocasiones, pueden aparecer también iconos de redes sociales, un buscador o algún dato extra dependiendo del negocio, como pueden ser el teléfono y un email de contacto.

Pero centrémonos en los dos elementos más relevantes: el logo y el menú.

Logotipo

El logotipo no debería ser donde pongas más ímpetu a la hora de crear tu web, pero sí juega un papel fundamental, pues teniendo en cuenta su estética, sus colores o su tipografía, el diseño de la propia web debería seguir la línea del logo para que la imagen de marca no se distorsione.

Por norma general, el logo irá colocado a la izquierda y el menú principal a la derecha, pero en ocasiones puede quedar bien utilizar un logo centrado, dependiendo del tipo de negocio de la web.

Menú principal

Una de las cosas que menos me gusta de una web es un menú sobrecargado de opciones.

Menú, submenú nivel 1, submenú nivel 2…

Algunos menús tienen más niveles que el Súper Mario Kart.

Cuando un cliente mío me viene con 20 opciones de páginas diferentes para añadir en el menú, siempre intento convencerlo de sintetizar y englobar ciertas informaciones en varias páginas.

Que si una página para Misión, otra para Valores, otra para Empresa, otra para Equipo, otra para Nuestros clientes…

¡Que no!

No lo olvides: menos es más.

Yo soy partidario siempre de usar cuanto menos posible los submenús y que todo esté a la vista, pero si no puedes conseguirlo, al menos que solo haya un nivel de submenús y que las opciones sean pocas.

Si tienes mucho contenido, siempre puedes optar por hacer un megamenú.

Cabecera secundaria

En algunos temas profesionales como OceanWP, que es el que yo utilizo en todos mis proyectos, existe una opción para añadir una cabecera secundaria en la parte de arriba del todo -sobre la cabecera principal- en la que se puede añadir un segundo menú menos relevante, algunos datos de contacto, iconos de redes sociales, etc.

Esta cabecera te recomiendo no utilizarla salvo que el menú principal sea demasiado extenso y necesites reubicar algún elemento.

Vista inicial

La vista inicial de una web es lo que vemos en pantalla al aterrizar en ella sin tener que hacer scroll.

Como te decía más arriba, debemos aprovechar siempre la parte superior de nuestra página de inicio para cautivar a nuestros visitantes en los 3 segundos que tienen para hacerse una idea de nuestro negocio.

En la vista inicial deberíamos mostrar un mensaje potente de nuestro negocio, como puede ser una propuesta de valor o el beneficio principal que se llevará el usuario.

Además, es bueno intentar captar el email del usuario para que después de que se vaya de nuestra web al menos podamos comenzar una relación posterior con él/ella.

Ten en cuenta que más del 80% de las visitas no volverán, así que tenemos que intentar como mínimo captar su email para luego seducir a esos usuarios con estrategias de email marketing.

Para conseguir esto debemos poner una llamada a la acción bien visible en esta vista inicial, en la que mostremos un contenido gratuito apetecible y un formulario para suscribirse.

También puedes poner un botón vinculado a una landing page donde el usuario pueda leer más información y apuntarse para recibir el contenido. En mi caso, yo tengo un botón vinculado a mi lead magnet.

Existen otras llamadas a la acción vinculadas a otros objetivos que puedas querer conseguir. Mira algunos ejemplos:

  • Que compren un producto en tu ecommerce.
  • Que se suscriban a tu blog.
  • Que consuman un contenido asociado a un producto de afiliación.
  • Que te escriban a través de tu página de contacto.
  • Que soliciten una prueba gratuita de un producto.

Presentación y resumen Sobre mí

Antes de exponer nuestros productos y servicios, yo te recomiendo que añadas una breve sección donde te presentes al visitante y hagas un breve resumen de lo que puedes hacer por él, sin extenderte demasiado, pues para eso ya tienes la página Sobre mí.

Puedes añadir también un botón para que visiten esta página y te conozcan más a fondo.

Productos y/o Servicios

Después de las presentaciones llega el momento de hablar al visitante de lo que tenemos para él/ella.

Para ello, añadiremos una sección en la que hablaremos de nuestros productos y/o servicios principales. Y digo precisamente «principales», porque no es bueno ponerlos todos.

Si tienes muchos productos/servicios, pon únicamente los 3-6 más importantes o rentables para tu negocio y, para los que quieren conocerlos todos, puedes añadir un botón que lleve a esa página concreta.

Prueba social y autoridad

Uno de los aspectos que más peso nos van a dar como profesionales son la prueba social y la autoridad, los cuales aportarán confianza a nuestros visitantes y posibles clientes.

Para conseguir esto, tenemos dos formas:

Testimonios

Si tienes clientes satisfechos, puedes pedirles un testimonio que hable bien de ti y de tu trabajo.

Pero no te conformes con un «Edu es muy buen profesional y he quedado muy contento».

Prepara un formulario con preguntas concretas sobre las que te gustaría tener información de tus clientes para que el testimonio tenga chicha y no mensajes vacíos y manidos.

Autoridad

Para demostrar autoridad, uno de los recursos más utilizados es el de mostrar logotipos de empresas con las que has trabajado o de medios donde has aparecido.

Posts estratégicos del blog

Si tienes blog en tu web, es muy interesante mostrar en la parte inferior de la página de inicio algunos de los artículos de nuestro blog para que el usuario se sienta atraído para consumir nuestros contenidos.

Pero no te conformes con mostrar los últimos posts; aprovecha para mostrar aquellos más importantes para ti, ya sea porque son posts de afiliación, porque son estratégicos, etc.

Y ya de paso, aprovecho para recomendarte que escribas siempre contenidos relevantes para tu cliente ideal.

Footer

Y ya llegamos al final de nuestra página de inicio.

El footer es la última sección de la web, la cual estará presente en todas las demás páginas.

El contenido que se reserva para el footer tiene menos relevancia que el resto de contenidos que van por encima, pero sirve para captar la atención de algún usuario que llegue hasta el final sin haber hecho clic en ningún enlace anterior.

Aquí podemos añadir algo de información corporativa, los iconos de redes sociales, algunos links relevantes y yo también suelo añadir una última llamada a la acción hacia la página de contacto, por si existe la posibilidad de pescar algún cliente que se ha leído toda la información.

También puedes encontrar footers con un formulario de contacto específico o con un listado de enlaces a varias columnas, pero a mí me gusta hacer los footers lo más básicos posible.

8 errores que deberías evitar en tu página de inicio

Ahora te voy a contar algunos errores que se cometen muy a menudo en páginas de inicio y que yo te recomiendo evitar a toda costa:

Sliders, carruseles y galerías

Los sliders o carruseles de imágenes a pantalla completa son uno de los elementos más perjudiciales en una página de inicio.

Penalizan la velocidad de carga y son poco efectivos porque muy poca gente va a esperar a ver todas las imágenes o mensajes que aparezcan en ellas.

También hay gente que se pirra por mostrar carruseles o galerías de imágenes de su actividad.

¿Para qué?

¿Crees que alguien se va a parar a mirar todas las fotos que tienes de las casas que has pintado o de las reparaciones de fontanería que has llevado a cabo?

Los carruseles y galerías, salvo que tu profesión esté muy asociada a la imagen (fotógrafos, artistas, etc.) en una página de inicio, casi que no; resérvatelas para otras páginas de la web.

Mensajes vacíos

No hay cosa más triste que llegar a una página de inicio en la que los textos están llenos de mensajes vacíos que no dicen nada.

«Somos especialistas en X», «Pondremos toda nuestra experiencia en tu negocio», «Nos avalan más de 20 años en el mercado».

Mira, no. Estos mensajes son una mierda pinchada en un palo. No hagas esto y redacta textos pensando de verdad en los beneficios que ofreces a tus clientes.

Yo, yo, yo… y después, yo

La mayoría de las páginas web en general, y las páginas de inicio en particular, suelen cometer el error de hablar mucho del propio negocio y de lo buenos que son en esto y en aquello, y se olvidan de lo realmente importante: el cliente.

No la cagues hablando de ti mismo; céntrate en lo que harás por tu cliente si te contrata o te compra un producto.

Demasiados efectos y fuegos artificiales

Algunos clientes míos llegan pidiéndome efectos y entradas triunfales de objetos que vieron en la plantilla X de Themeforest porque les parece súper atractivo.

No se dan cuenta de que los efectos penalizan la velocidad de carga, algo que en una página de inicio es mortal.

Ten en cuenta que una página debe cargar en menos de 3 segundos y pesar menos de 1 Mb. y el usuario tendrá después otros 3 segundos para no salir por patas.

Cuanto menos ruido haya, mejor.

Añadir música de fondo

Aunque este aspecto está ya totalmente en desuso, todavía existen incautos por el mundo de nuestro señor que te piden música de fondo en una web… ¡como lo lees!

No, por favor, música de fondo no.

Vídeos autoreproducibles

Otro error importante es añadir vídeos autoreproducibles en la homepage.

Esto no deberías hacerlo en ninguna página, pero menos en la página de inicio, porque los vídeos consumen recursos y también penalizan la velocidad de carga.

Imagínate esto: un usuario aterriza en nuestra web y un vídeo comienza a consumirle los datos del móvil sin él desearlo… Lo normal es que se cabreé bastante.

Yo te recomiendo no cargar un vídeo directamente con el enlace de YouTube o Vimeo y poner en su lugar una imagen sustitutiva para que luego el usuario pueda hacer clic en el botón de reproducción si lo desea.

Distracciones innecesarias

Si hay elementos en tu homepage que no aporten valor, cárgatelos.

No distraigas la atención del usuario con pijadas que no estén orientadas a la conversión.

Así de claro y de simple.

Conclusión

La página de inicio de nuestra web es nuestra carta de presentación y debemos ser muy cuidadosos con lo que mostramos en ella.

Sé claro con tus mensajes, piensa en tu cliente ideal y no añadas cosas que no aporten valor al usuario y que no estén orientadas a la conversión.

Recuerda: «menos es más».

* * * * *

¿Qué opinas de todo esto que te acabo de contar?

¿Estás de acuerdo en todo o discrepas en algún punto?

Dime lo que piensas en los comentarios, venga. Y si te ha molado y quieres compartir esto en tus perfiles sociales, juntos conseguiremos que los políticos piensen más en los ciudadanos que en ellos mismos.

¡Haz clic para puntuar esta entrada!
(Votos: 5 Promedio: 5)

6 comentarios en “Cómo diseñar una página de inicio efectiva en tu web”

  1. Me ha encantado el artículo. Está muy bien explicado, muy claro.
    Lo único que discrepo es de mostrar el «sobre mi» antes de los productos o servicios. Me parece que al usuario le interesa primero conocer cómo vas a solucionar sus problemas y, si le parece interesante, entonces sí que querrá saber quién hay detrás, conocer a la persona con la que puede que llegue trabajar. Pero antes de eso, saber cómo le vas a ayudar, no? Qué haces y cómo lo haces.

    1. Hola Ana,

      Existen muchas webs que lo hacen así y está correcto también. Depende de lo consolidada que tengas tu marca puede ser interesante primero mostrar un breve resumen del Sobre mí y la prueba de autoridad (empresas importantes con las que has colaborado, etc.), algo que puede ayudar a potenciar las ventas antes de que siquiera vean tus servicios. A mí me genera confianza y puede ser un punto diferenciador en un sector con competencia.

      Lo dicho. Cualquiera de las dos formas es válida 🙂

      Muchas gracias por comentar y por dar tu punto de vista!!!

      Un saludo.

  2. Nery De León Makepeace

    Este artículo bien pudiera ser una especie de auditoría de textos para la página de inicio de un sitio web. Aportas mucho valor, en general tu sitio y los artículos que he leído son geniales ¡éxitos!

  3. Hola Edu!
    Estoy trabajando en mi segundo sitio web, bueno!, es para una empresa en crecimiento. Con el primero, que era un blog personal cometí varios de los errores que mencionas, lamentablemente no había leído un artículo como este que compartes y dicho blog ya no existe.
    Pero vamos para adelante con el actual, gracias!, en verdad me esta sirviendo para planear primero el contenido y no lanzarme a lo loco como antes.
    Por cierto ya ubique otro artículo de mi interés para leer.
    Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  • Responsable: Eduardo Rubianes.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a FastComet INC que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.
Scroll al inicio

Las 9 fases cruciales para diseñar una web atractiva y efectiva.

pasos para diseñar una página web

Guía GRATUITA por entregas con la que aprenderás a diseñar una web profesional y a conseguir resultados reales para vivir de ella.