Pagina inicio

Cómo deberías diseñar de forma efectiva la página de inicio de tu web

La página de inicio será 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 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»

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 y cuando llegan a una web, si no ven algo atractivo en el primer impacto que les anime a continuar navegando por ella,  se irán a otro sitio.

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

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.

Índice de contenidos

 

 

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

Si quieres que tu página de inicio sea efectiva 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 empezamos a experimentar con colores, tipografías, fotografías…

Y no.

Eso no es lo primero que debemos hacer.

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.

call to action maider

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…

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

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.

call to action trello

Ayuda tus usuarios a resolver un problema

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

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 problema, no te va a contratar por el curriculum.

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 en la página de inicio se puede poner todo, !NO¡

En la página de inicio hay que destacar únicamente lo más importante de nuestro negocio.

Para HABLAR de cosas concretas ya tenemos la página Sobre mí, la de Servicios etcétera.

Si intentas destacar todo, nada destacará.

Potencia tu imagen de marca

Dentro de los 3 segundos que esta de promedio el visitante, 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, para que que se queden o se no.

Elementos que más deberías cuidar:

  • 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, PERO LO MEJOR HACER UNA SESIÓN FOTOGRÁFICA PARA LA WEB con un profesional.

cabecera

Minimalismo

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

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

Que si banners, que si sliders, que si popups, imágenes e iconos… Pues me voy.

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 arañas Google suelen llegar a una web a indexar su contenido a través de su URL principal o dominio, para luego ir mirando en 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!

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

menu

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 demasiados niveles.

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 Astra, 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.

encabezado secundario

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.

call to action juan merodio

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.

sobre mi

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.

servicios

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

testimonios

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.

autoridad

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.

blog 2

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.

footer dcero

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.

footer mandeo

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 pira por mostrar carruseles o galerías de imágenes de su actividad.

¿Para qué?

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.

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

Céntrate en lo que harás por tu cliente si te contrata o te compra un producto.

Demasiados efectos

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

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… Se va.

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 páagina de inicio  que no aporten valor, cárgatelos.

No distraigas la atención del usuario 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».

GUIA1

DESCARGA TU EBOOK GRATUITO

Si alguna vez te has preguntado por qué tu página web no vende, esto es para ti. 

Consentimiento

You have Successfully Subscribed!

Scroll al inicio

DESCARGA TU GUIA GRATUITA

RESPONSABLE: Iker Garmendia Aldanondo (servidor)

FINALIDAD: Enviarte mis nuevos contenidos y lo que vea que puede interesarte (Nada de SPAM)

LEGITIMACIÓN: Tu consentimiento (que estás de acuerdo)

DESTINATARIOS: Los datos que me facilitas estarán ubicados en los servidores de MailChimp (proveedor de email marketing de mipaginaweb.com) fuera de la UE en EEUU. MailChimp está acogido al acuerdo EU-US Privacy Shield, aprobado por el Comité Europeo de Protección de Datos.

DERECHOS: Por supuesto tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Reserva Tu sesión gratuita ahora

Completa el siguiente formulario para reservar GRATIS una sesión de consultoría de 30 minutos.

Call Now Button