Diseñar una home page ideal es fácil si sabes cómo: contenido, diseño y SEO

Decía Oscar Wilde que no existe una segunda oportunidad para causar una buena primera impresión. Por eso, cuando un usuario aterriza por primera vez en tu página de inicio, es de vital importancia que la encuentre clara, organizada, útil e intuitiva. A la hora de diseñar una home page ideal, vamos a tener que prestar atención a tres asuntos esenciales: el contenido, el diseño y el SEO. En este artículo, te contamos cómo diseñar una home page teniendo en cuenta las palabras de nuestro amigo Wilde.

Por qué es tan importante la home page

La página de inicio de nuestra web se puede comparar con el escaparate de una tienda del mundo físico, ¿lo habías pensado? Teniendo esta comparación en mente, ¿se te ocurre por qué es tan importante la home page de tu web?

Un señor cualquiera va paseando por la calle alegremente y su vista va de un escaparate a otro. Es media tarde y tiene un poco de hambre, pero todavía no es consciente de ello mientras camina calle abajo viendo esta y aquella tienda.

De repente, la mirada se le escapa a un escaparate lleno de color, bien iluminado y muy ordenadito, y el hambre se apodera de él: es una pastelería que tiene colocados tras el cristal varios tipos de dulces, chocolates y tartas. El paseante se queda pegado al escaparate, consultando todos los precios que aparecen debajo de cada pastel. Ese escaparate ha cumplido a las mil maravillas todas sus funciones:

  • Llamar la atención del usuario más que los otros escaparates de la competencia
  • Dejar claro qué es lo que la tienda vende
  • Mostrar una imagen ordenada y apetecible
  • Facilitarle al posible cliente la información básica que necesita

Cómo escribir una home page y optimizar su contenido

Entonces, ¿qué es lo que debemos contarle al usuario en nuestra página de inicio? Hay que tener siempre presente la importancia del contenido a la hora de diseñar una home page. Antes de ponernos a buscar colores o a diseñar mockups, deberíamos tener muy claro cómo escribir una home page y cómo optimizar nuestro contenido para que cumpla todas las expectativas de cualquier usuario.

Diseñar una home page

 

Toda tu home page debería unirse para lanzar a la web un mensaje muy alto y muy claro: “Esta es mi marca y esto es lo que te ofrecemos”. Para dejar bien claro todo esto, en tu página de inicio tendrás que contarle al usuario estas 4 cosas:

 

-> Que entiendes a la perfección su necesidad o su problema

-> Qué es exactamente tu producto o servicio, con una descripción concisa y breve

-> Que ese producto o servicio que le ofreces es diferente, es especial y es la mejor opción

-> Que tu web es fácil de usar y el siguiente paso que debe dar el usuario aparece bien claro en un CTA

 

La home page sirve para poner al usuario en contexto y el texto que incluyas en ella tiene que ir al grano para responder las preguntas más básicas con las que el lector llegará hasta tu web: qué haces, qué problemas puedes solucionarle, qué beneficios puede obtener si te hace caso y qué debe hacer a continuación. Nada más; y nada menos.

Ahora que ya sabes cómo escribir una home page para que a tu visitante no le queden dudas, veamos cómo deberías estructurar la información.

 

Cómo diseñar una home page

Una vez hayas escrito de forma convincente la información o el contenido de tu página de inicio, será el momento de saber cómo diseñar una home page, es decir: qué elementos tienen que aparecer y cómo vamos a estructurar ese texto que hemos redactado. ¡Vamos allá!

creativo diseñando web

Elementos básicos que tienen que estar, sí o sí

Para diseñar una home page que funcione, atraiga y convierta, hay una serie de elementos que no pueden faltar.

 

# Título

En 3 palabras, más o menos, deberías ser capaz de responder a la pregunta “¿Qué ofrece esta web?”: “agencia de inbound marketing”, “servicio de mensajería”, “calcetines diferentes”, “perfumes para ella”, etc.

 

# Subtítulo

Es tu oportunidad para explicarte un poco más, pero tampoco es todavía momento de entrar detalles. El subtítulo es una frase en la que puedes ser original y atrevido, porque la idea es captar la atención del usuario y picar su curiosidad.

Pero también es tu oportunidad de oro de dejar bien claro qué puedes ofrecer. “Servicios integrales de Inbound para PYMES: empieza hoy a conseguir nuevos leads”, “¿Quieres enviar un paquete y que mañana esté en su destino? Fiable, barato, invencible”, “Tenemos calcetines con pingüinos y con piraguas. Piensa en un estampado: lo tenemos también”.

 

# Breve descripción

Es un párrafo que puedes colocar debajo del encabezado en el que ya puedes hablar un poco más sobre tu empresa, tus servicios y las razones por las que eres la mejor opción para el usuario.

 

Ejemplo de una web y sus elementos

Ejemplo de algunos elementos de una home page, de la web Piedrapapeltijera

 

# Características del servicio

Esta sección puede complementar a la descripción o sustituirla, dependiendo de las características del producto o servicio que se ofrezca. Es una manera muy útil de mostrar nuestros puntos fuertes y suele aparecer en forma de lista. Algo así como:

 

-> Enviamos tu paquete en menos de 24 horas

-> Lo recogemos en tu puerta y lo dejamos en la dirección que nos pidas

-> Los precios más bajos del mercado

-> Una empresa de confianza, con más de 10 años de experiencia

 

# El logo

El logotipo de la empresa siempre es un elemento que sale en cualquier conversación sobre cómo diseñar una home page. Que aparezca el logo es una forma de sumar profesionalidad, credibilidad e identidad corporativa. Sin embargo, tampoco es cosa de ponerlo gigante y que nos ocupe todo el encabezado.

Inserta tu logo en una esquina superior o en el centro, pero nuestro consejo es que no robe demasiado espacio.

 

# CTA’s o llamadas a la acción

Cunado un usuario llega a tu página de inicio, la meta es que convierta, es decir, que lleve a cabo alguna acción que nos hayamos puesto como objetivo previamente. Para guiar a nuestros visitantes en ese camino, usaremos los CTA’s o llamadas a la acción.

Estos botones o mensajes clicables le dicen al usuario cuál es el siguiente paso que puede dar dentro de la web. Distribúyelos de forma inteligente y utiliza algunos primarios, más grandes y llamativos, y otros secundarios.

call to action

# Navegación intuitiva

No está de más ser original y creativo, pero hay ciertos elementos de las webs que el usuario espera encontrar en un lugar determinado y no va a perder el tiempo buscándolos para poder seguir navegando. Si quieres saber cómo diseñar una home page, pregúntate qué quiere encontrarse el usuario.

Asegúrate de que tu página de inicio es intuitiva y que las cosas están en su sitio: el menú de navegación arriba, el footer con los datos de la empresa abajo, etc.

Otro consejo: no te pases con el menú, debería tener un máximo de 5 pestañas: sobre la empresa, nuestros servicios, blog y contacto son los elementos más habituales.

Para averiguar si tu home page funciona correctamente, es decir, si es intuitiva, pídele a un amigo que realice una acción sencilla como buscar el número de teléfono de tu empresa, entrar en un post del blog o encontrar tus perfiles sociales. Si tarda más más de unos pocos segundos en conseguirlo, significa que tu página de inicio podría mejorar.

 

# Testimonios y reconocimientos

Un elemento importante que no debería faltar en tu home page son los testimonios de clientes. Incluye en tu web un bloque que contenga experiencias de clientes reales, a poder ser con nombre y foto, para afianzar la confianza de los usuarios en tu marca.

Si tienes otros reconocimientos, como premios, menciones o colaboraciones con empresas influyentes, ¡también deberías contarlo en la página de inicio!

 

Ejemplo de la sección de testimonios en una home page

Ejemplo de la sección de testimonios en la home page de fcoblanco.com

 

# Imagen relevante o vídeo corto

A los internautas las webs nos ganan por los ojos, ¿verdad? Una imagen llamativa, una foto dinámica o una ilustración atractiva dicen mucho de la marca que las ha seleccionado. Eso sí, elige una imagen que tenga que ver con lo que haces, que añada contexto a tu contenido o que le cuente al usuario algo sobre el carácter de la empresa.

¡Ah! Y, si puedes, evita las imágenes de stock, esas que encuentras en 7 de cada 10 webs. Aburren.

 

# Recursos de interés

La gran mayoría de los usuarios que aterrizan en tu página de inicio no están pensando en comprar o no están preparados para ello, ¡necesita y desean más información! Por eso, es importante ofrecerles contenidos y recursos útiles para que puedan aprender un poquito más sobre su necesidad.

Pueden ser links, whitepapers, ebooks, guías… ¡Cualquier info útil!

 

# Footer

El footer o pie de página es la sección que aparece abajo del todo, a veces separada por una línea fina o por un cambio de sección. Lo mejor que puedes hacer con tu footer es keep it simple, mantenerlo sencillo.

La información elemental que debes incluir en esta sección es la información de la empresa, información legal -protección de datos, aviso de cookies y privacidad cumpliendo la legislación vigente-, los datos de contacto y los botones de enlace a tus redes sociales.

Ejemplo del footer de una home page

Y para footer, ¡el nuestro!

 

¿Me voy o me quedo?

Te hemos contado cuáles son los elementos esenciales que debes tener en cuenta para diseñar una home page o página de inicio que resulte funcional y práctica. Los usuarios esperan encontrarse una estructura simple y bien organizada; cuando no es así, no dudan en darle al botón de “atrás” e irse al siguiente resultado que les ofrecía Google.

Piensa siempre que los usuarios tienen prisa, es decir, que no van a tardar más que unos cuantos segundos en tomar esta decisión. Si no les gusta lo que ven, si no encuentran lo que buscan o si no les queda claro qué les ofreces, ¡puf! Se evaporarán -o, siendo realistas, se irán a engrosar tu tasa de rebote-.

Por este motivo, diseñar tu home page correctamente puede marcar una diferencia enorme en la tasa de conversiones finales. Cuando un usuario llega a tu web y se encuentra la página de inicio, suena en su cabeza la mítica canción de The Clash: “Should I stay or should I go?” -”¿Debería irme o debería quedarme?”.

 

Cómo optimizar una home page para el SEO

Una buena optimización SEO en tu home page se traduce en un aumento del tráfico que recibe tu web y, desde ahí, conducir a los usuarios a lo largo del proceso de conversión. A la hora de hablar del SEO, una buena forma de comprenderlo es empezar a pensar en nuestra página de inicio como si de un mapa se tratase; un mapa que le va a indicar al usuario dónde debe ir para encontrar lo que anda buscando.

También nos va a servir para indicarle a Google y a sus robots de qué trata nuestra página y por qué es un resultado fiable y preciso. Nuestra home page debe estar optimizada pensando tanto en los usuarios como en los motores de búsqueda.

 

¿Qué elementos debería tener encuenta para optimizar el SEO de una home page?

 

# Keywords o palabras clave

Una página de inicio tiene que estar optimizada para las keywords que escojas, como cualquier artículo de tu blog, estableciendo cierta jerarquización entre ellas en función de su interés para tu proyecto. Puedes incluir una o dos palabras claves principales, unas cuantas palabras clave secundarias y las long-tails que se generen a partir de ellas.

Así, las palabras claves principales serían aquellas que, tras el debido estudio de keyword research, determinas como esenciales para tu proyecto, las de mayor peso, ya sea por motivos comerciales, branding o posibilidades de alcance demográfico. Las secundarias serían las palabras clave que guardan relación con las principales y que, no obstante, no representan para ti el foco de atención principal.

Por último, las long-tail keywords o palabras clave de cola larga serían aquellas palabras clave contenidas parcialmente en las principales y secundarias, concretando su alcance y significado, y que generalmente son mucho más específicas. Aunque es cierto que las búsquedas de este último tipo son menores en términos cuantativos, al ser mucho más concretas, muchas veces pueden suponer una tasa de conversión muy superior a las principales o secundarias, que son más abiertas, inespecíficas y generalistas. Pero sobre esto hablaremos en otro artículo más detenidamente.

Aquí un ejemplo:

– Palabra clave principales: inbound marketing, agencia de Inbound Marketing, empresa de inbound marketing

– Palabaras clave secundarias: marketing online, marketing digital, agencia de marketing digital, etcétera

– Keyword long-tail: agencia de Inbound Marketing para pymes, empresa de Inbound Marketing para pymes, agencia de Inbound Marketing en Galicia, agencia de Inbound Marketing para PYMES en Ourense, etcétera.

 

# Reducir el tiempo de carga

Asegúrate de que tu web carga lo más rápido posible, porque ningún usuario va a esperar más de un par de segundos si se queda en blanco o le da problemas.

Para aumentar la  de carga de tu home page puedes hacer muchas tareas, como optimizar las imágenes o reducir el uso de JavaScript y CSS.

En Internet puedes encontrar diferentes herramientas gratuitas que te indicarán si tu web carga a una velocidad adecuada y qué elementos podrías mejorar, como es el caso de PageSpeed Insights.

 

Velocidad de carga web

 

# Contenido textual cuidado

Es muy habitual encontrarnos posts, webs y demás textos en Internet llenos de faltas gramaticales y ortográficas, además de contenidos poco expresivos o difíciles de entender. Esta serie de errores es habitual, sí, pero también resulta muy negativa y da una terrible imagen para quienes lleguen a leer ese contenido. El texto que escribas para tu home page tiene que estar correctamente redactado, no incluir faltas de ortografía y ser fácil de consumir.

No te pases de largo; el texto de tu home page debe incluir más de 200 palabras, pero tampoco se trata de agobiar a la gente con información o con demasiado texto.

¡Y recuerda incluir las keywords en los textos! Pero sin sobrecargar, el keyword stuffing puede resultar muy negativo.

 

# Encabezados y subencabezados

A la hora de estructurar los contenidos textuales de tu web, recuerda hacerlo con etiquetas de encabezado H -H2, H3, H4…- para organizar la información. Y no olvides incluir palabras clave en los encabezados y subencabezados.

Es buena idea incluir tu keyword principal en la etiqueta título y en el H1, para que Google entienda bien de qué va tu web y con qué palabras clave te identificas.

 

# Metadescripción atractiva

En la etiqueta de meta descripción debes describir tu empresa de una forma atractiva y que aporte información práctica, para convencer a los usuarios de que entren a visitarte.

 

# ALT en las imágenes

Todas las imágenes que incluyas en tu home page tienen que incluir su atributo ALT, que deben usarse para describir lo mostrado en cada una de ellas, aprovechando para introducir la/s palabra/s clave que interesen.

 

# Links a las otras páginas importantes de la web

Esto hará que los usuarios sean capaces de llegar a las otras páginas importantes que forman parte de tu web con un clic desde la página de inicio, ¡les facilitará mucho la vida! Además, creará una transferencia de autoridad desde la home page a esas otras páginas.

 

# Mantén tu home page actualizada

Haz revisiones periódicas de tu página de inicio para asegurarte de que la información está actualizada, que no existen links rotos y que todo está en orden.

 

Cómo diseñar una home page para un e-commerce

Diseño de home page para e-commerce

Hasta el momento hemos tratado los elementos y características que hay que tener en cuenta para diseñar una home page de cualquier tipo, en general. Sin embargo, hay ciertas webs que, por sus características y funcionalidades específicas, necesitan componentes a mayores.

Es el caso de las e-commerce o tiendas online, tan populares y prometedoras en el universo digital. Ellas necesitan una página de inicio un tanto especial, diferente, que le dé mayor visibilidad a los productos y a las promociones.

Vamos a echarle un vistazo a los 10 elementos necesarios para entender cómo hacer una home page para un e-commerce que enamore a los visitantes.

 

# Señala lo que te diferencia

En una home page para e-commerce, lo más importante es que le cuentes al usuario desde el primer momento por qué eres mejor opción que tus competidores. Destaca en tu página de inicio aquella característica o ventaja que te diferencia de las otras opciones disponibles: si tienes gastos de envío gratuitos, si tus productos tienen más años de garantía, si haces envíos a todos los puntos del globo, etc.

Cuenta quién eres y por qué eres el mejor de la forma más clara y concisa posible.

 

# No satures al usuario

Ni con colores, ni con banners, ni con demasiados productos.

¿Recuerdas la comparación de la home page con el escaparate? Pues las tiendas no ponen todo el almacén detrás del cristal para que todo el mundo lo vea, sino una selección inteligente y ordenada de sus productos.

 

# Destaca las promociones

Toda buena home page para e-commerce debería ofrecer promociones que atraigan al usuario y le inviten a quedarse en nuestra web.

Eso sí, recordando el punto anterior, no se trata de saturar a nadie. Lo ideal es tener 1 o 2 promociones a la vista; más de eso puede provocar un efecto contrario, agobiar al usuario y hacer que salga corriendo.

 

# La usabilidad es lo primero

Los usuarios de una e-commerce tienen un proceso de conversión más claro: hacer una compra a través de la web. ¡No se lo pongas difícil!

Por eso, lo más importante de una home page de e-commerce es su usabilidad: que sea cómoda, agradable y fácil de usar.

 

# Un menú sencillo

Lo ideal es que el menú incluya las categorías de los productos que tienes a la venta, organizados por categorías.

 

Ejemplo de web e-commerce

Ejemplo de home page de e-commerce, de la web PcComponentes

 

 

# Un buscador eficiente

El usuario podrá buscar el producto que quiera, o la categoría que tenga en mente. También es muy importante que el buscador incluya filtros, todos los que puedan ser útiles para encontrar un producto, especialmente si el catálogo es amplio.

 

# Que se vea bien el carrito

No nos gustan los carritos abandonados, así que asegúrate de que tu proceso de compra es simple. Para eso, es interesante que el carrito de compra aparezca visible en la página de inicio, indicando el número de artículos seleccionados y el precio total.

 

# Incluye productos destacados

Anunciar o destacar productos en la home page suele funcionar de maravilla. Las razones por las que destaques un producto dependen de tu estrategia: por el precio, porque está rebajado, porque es una novedad, porque es un producto de temporada, ¡lo que tú decidas!

Pero recuerda que los productos destacados deben cambiar periódicamente… Nada es una novedad para siempre, ¿verdad? Si un usuario entra dos veces en tu home page con un mes de diferencia y el producto destacado sigue siendo el mismo, puede causar una imagen de dejadez o de poca actualización.

 

# Ofrece asistencia al usuario

Hay muchas formas de ayudar al usuario a completar su proceso de compra: aportar un número de teléfono de atención al cliente, un chat, una lista de FAQ, un asistente virtual, etc. Escoge el método que más te guste, pero no dejes tirado al usuario con sus dudas o abandonará el carrito sin pensárselo dos veces.

Puedes incluir un CTA o llamada a la acción con el texto “¿Te ayudamos?” o “¿Necesitas ayuda?”, que lleve a una landing page en la que le muestres al usuario las diferentes opciones que pones a su disposición para ayudarle en su compra.

 

# Ojo con los sliders

Los sliders son un recurso para el diseño web que funciona como una especie de presentación de Power Point, es decir, que el usuario verá una serie de imágenes pasando cada x segundos tan pronto aterrice a tu web. Esas imágenes se deslizan y pueden serte útiles para mostrar diferentes promociones o productos.

Sin embargo, no todo el mundo es fan de los sliders, dado que a veces pueden resultar un poco incómodos si pasan demasiado rápido o si incluimos mucha información en cada uno y no da tiempo a leerlos.

Si no te convencen los sliders, ¡no hay problema! Puedes optar por un banner estático en el que destaques la promoción o novedad que te interese en cada momento.

 

Cómo hacer una home page para una página personal

Las páginas web pensadas para dar visibilidad a tu marca personal también tienen ciertas particularidades. Vamos a ver cómo hacer una home paga para una web personal y qué elementos hay que añadir o diferenciar respecto a las webs de empresas.

Ejemplo de home page web personal

Ejemplo de home page de una web personal; en este caso, la web de Neil Patel

 

# Mantén una home page basada en la simplicidad

Al igual que las demás, las homepages de webs personales también tienen solo una oportunidad para captar la atención del visitante; en unos 10 segundos, más o menos, habrá decidido si le interesa o no lo que le quieres contar.

Por eso, en la página de inicio tienes que responder a 4 preguntas principales, en pocas líneas de texto: quién eres, qué haces, que has conseguido y cómo contactar contigo.

 

# Deja que tu trabajo hable por ti

Sobre todo si tu web es tipo portfolio, lo mejor que puedes hacer es mostrar tus obras, diseños o cualquier otro tipo de muestra de tu trabajo, de la manera más visual posible. No tiene el mismo efecto decir “soy ilustrador” que tener en tu home page una galería o slider con tus mejores dibujos.

 

# Sé creativo

Si bien las webs corporativas lo mejor es mantener una estructura más fija, con la que el usuario esté familiarizado, las home pages de webs personales se caracterizan por una mayor libertad creativa.

Las formas en las que muestras al mundo tu marca personal también van a formar parte de ella.

 

# Menciona tus proyectos más grandes

Como sucedía en el caso de las webs corporativas con los logros y los testimonios de clientes, en las home page de webs personales también es interesante incluir tus mayores éxitos.

Selecciona para la página de inicio tus mejores proyectos y las colaboraciones más importantes de tu carrera.

 

# Incluye contenidos descargables

En vez de whitepapers y guías, en la home page para una página personal puedes incluir un portfolio descargable o un CV en formato PDF.

 


 

¡Ya está todo listo! ¿A qué esperas? ¡Atrévete a montar la home page ideal para tu proyecto! Eso sí, si te ha quedado alguna duda o tienes cualquier sugerencia, ¡contacta con nosotros! Nos encanta leerte 🙂

>

¡A nosotros también nos gustas!

Ya que hemos hecho match, ¿qué tal si mantenemos el contacto?

Política de privacidad

¡Allá vamos! Confirma tu dirección a través del correo que te enviaremos a continuación.