Nunca tienes una segunda oportunidad para causar una primera impresión; por eso, tu página de inicio es, sin duda, una de las páginas web más importantes de tu sitio web.
Para cualquier empresa, la página de inicio es su puerta de entrada virtual. Si a un nuevo visitante no le gusta lo que ve, su reacción instintiva es presionar el botón «atrás».
Así es, desafortunadamente, mucha gente todavía juzga un libro por su portada.
Qué hace que la página de inicio de un sitio web diseño brillante en lugar de soso? Se necesita más que solo apariencia, también tiene que trabajo bien. Es por eso que las páginas de inicio más brillantes de esta lista no solo obtienen un puntaje alto en belleza, sino también en cerebros y creatividad.
Pero antes de sumergirnos en los ejemplos, analicemos algunas de las mejores prácticas del diseño de la página de inicio.
¿Qué hace un buen sitio web?
Un buen sitio web responde claramente «Quién soy», «Qué hago» y/o «¿Qué puede hacer usted (el visitante) aquí?». También resuena con su audiencia, tiene una propuesta de valor, llama a los visitantes a la acción, está optimizado para múltiples dispositivos y siempre está cambiando para adaptarse a las nuevas tendencias de diseño.
Todos los diseños de página de inicio que se muestran aquí utilizan una combinación de los siguientes elementos.
No todas las páginas son perfectas, pero los mejores diseños de páginas de inicio hacen que muchas de ellas sean correctas.
1. El diseño responde claramente «Quién soy», «Qué hago» y/o «¿Qué puedes hacer tú (el visitante) aquí?».
Si es una marca o empresa muy conocida (por ejemplo, Coca-Cola), es posible que no tenga que describir quién es ni qué hace; pero la realidad es que la mayoría de las empresas aún necesitan responder estas preguntas para que cada visitante sepa que está en el «lugar correcto».
Steven Krugg lo resume mejor en su libro más vendido, no me hagas pensar: Si los visitantes no pueden identificar qué es lo que haces en segundos, no se quedarán por mucho tiempo.
2. El diseño resuena con el público objetivo.
Una página de inicio debe tener un enfoque limitado: dirigirse a las personas adecuadas en su idioma. Las mejores páginas de inicio evitan la «jerga corporativa» y eliminan la pelusa.
3. El diseño comunica una propuesta de valor convincente.
Cuando un visitante llega a su página de inicio, debe obligarlo a quedarse. La página de inicio es el mejor lugar para concretar su propuesta de valor para que los prospectos opten por permanecer en su sitio web y no navegar al de sus competidores.
4. El diseño está optimizado para múltiples dispositivos.
Todas las páginas de inicio enumeradas aquí son altamente utilizables, lo que significa que son fáciles de navegar y no hay objetos «llamativos» que se interpongan en el camino de la navegación, como banners flash, animaciones, ventanas emergentes o elementos demasiado complicados e innecesarios. . Muchos también están optimizados para dispositivos móviles, lo cual es increíblemente importante en el mundo móvil actual.
5. El diseño incluye llamadas a la acción (CTA).
Todas las páginas de inicio enumeradas aquí utilizan efectivamente llamadas a la acción primarias y secundarias para dirigir a los visitantes al siguiente paso lógico. Los ejemplos incluyen «Prueba gratuita», «Programar una demostración», «Comprar ahora» o «Más información».
Recuerde, el objetivo de la página de inicio es obligar a los visitantes a profundizar en su sitio web y moverlos más abajo en el embudo. Los CTA les dicen qué hacer a continuación para que no se sientan abrumados o perdidos. Más importante aún, los CTA convierten su página de inicio en un motor de ventas o de generación de oportunidades de venta, y no solo en folletos.
6. El diseño siempre está cambiando.
Las mejores páginas de inicio no siempre son estáticas. Algunos de ellos cambian constantemente para reflejar las necesidades, problemas y preguntas de sus visitantes. Algunas páginas de inicio también cambian de pruebas A/B o contenido dinámico.
7. El diseño es efectivo.
Una página bien diseñada es importante para generar confianza, comunicar valor y guiar a los visitantes al siguiente paso. Como tal, estas páginas de inicio utilizan efectivamente el diseño, la ubicación de la CTA, los espacios en blanco, los colores, las fuentes y otros elementos de apoyo.
Ahora, prepárate para aprender sobre un excelente diseño de página de inicio a través de los siguientes 23 ejemplos de la vida real.
Ejemplos de página de inicio
- FreshBooks
- airbnb
- Grado de píxel
- menta
- Dropbox (Empresa)
- Ahumadero de 4 ríos
- Servicios de terapia pediátrica de Cobb
- Melissa Griffin
- jill konrath
- Evernote
- Telerik de Progreso
- Boda electrónica
- Campamento base
- caridad: agua
- ValidarTecnología
- chipotle
- Medio
- digiday
- Aperitivos amables
- Ahrefs
- Películas A24
- Ellevest
- hubspot
1. FreshBooks
Por qué es brillante
- Es fácil de consumir. Hay mucho debate sobre si las páginas de inicio cortas o largas funcionan mejor. Si elige hacer lo último, debe facilitar el desplazamiento y la lectura, y eso es exactamente lo que hace este sitio. Casi actúa como una historia.
- Hay un gran uso del contraste y el posicionamiento con los principales llamados a la acción: está claro en qué quiere la empresa que conviertas cuando llegues.
- El texto utilizado en las llamadas a la acción «Empiece gratis» es muy convincente.
- FreshBooks utiliza testimonios de clientes en la página de inicio para contar historias del mundo real de por qué usar el producto.
- El subtítulo también es excelente: «Únase a más de 10 millones de propietarios de pequeñas empresas que usan FreshBooks». FreshBooks emplea de manera experta la prueba social (10 millones es un gran número) para obligar a su público objetivo a unirse a sus pares y probar la herramienta.
2. airbnb
Por qué es brillante
- Incluye el formulario de búsqueda de destino y fecha que la mayoría de los visitantes buscan, al principio, guiando a los visitantes al siguiente paso lógico.
- El formulario de búsqueda es «inteligente», lo que significa que completará automáticamente la última búsqueda del usuario si ha iniciado sesión.
- La llamada a la acción principal («Buscar») contrasta con el fondo y se destaca; pero la llamada a la acción secundaria para los anfitriones también es visible en la mitad superior.
- Ofrece sugerencias de excursiones y escapadas que los usuarios de Airbnb pueden reservar en el mismo sitio que sus alojamientos para que los visitantes se entusiasmen más con la reserva de su viaje en el sitio. También muestra cuáles de estas ofertas son las más populares entre otros usuarios.
3. Grado de píxel
Por qué es brillante
- – Sabes de inmediato de qué se tratan: Temas de WordPress. El título grande, seguido de un subtítulo descriptivo, permite a los visitantes saber qué esperar.
- El diseño es simple y la combinación de colores hace un gran trabajo al hacer que la llamada a la acción se destaque.
- El lado derecho ayuda a echar un vistazo a cómo se ven sus temas de WordPress, sin tener que desplazarse o profundizar.
4. menta
Por qué es brillante
- Es un diseño súper simple con un título y un subtítulo fuertes y sin jerga.
- La página de inicio transmite un ambiente seguro pero sencillo, lo cual es importante para un producto que maneja información financiera.
- También contiene una copia de llamada a la acción simple, directa y convincente: «Regístrese gratis». El diseño de la llamada a la acción también es brillante: el ícono de candado seguro vuelve a transmitir el mensaje de seguridad.
5. Dropbox (Empresa)
Por qué es brillante
- Dropbox conserva su diseño y marca simples. Incluye solo lo que es importante: una imagen grande y relevante con una copia de apoyo y un botón de llamada a la acción «Pruébelo gratis durante 30 días».
- La página de inicio y el sitio web de Dropbox son el mejor ejemplo de simplicidad. Limita el uso de textos e imágenes y adopta los espacios en blanco.
- Su subtítulo es simple, pero poderoso: «La solución segura de almacenamiento e intercambio de archivos en la que confían los empleados y los administradores de TI». No es necesario decodificar la jerga para descubrir lo que realmente hace Dropbox.
6. Ahumadero de 4 ríos
Por qué es brillante
- Babear. Eso es lo que pienso cuando llego al sitio web de 4 Rivers Smokehouse. Combinado con una gran fotografía, el titular «Brisket. 18 años para dominar. Tuyo para saborear». Suena como una experiencia que vale la pena probar.
- El desplazamiento de paralaje lo guía en un recorrido a través de los servicios, el menú y las personas que se divierten en grande: un gran uso de esta popular tendencia de diseño.
- ¿Lo único negativo? No vivo lo suficientemente cerca de este lugar. Abucheo.
7. Servicios de terapia pediátrica de Cobb
Por qué es brillante
- El titular y el subtítulo apelan al lado emocional de los visitantes: «Trabaja con una empresa que lo entiende»; «Confía en nosotros. ¡Nosotros también hemos estado allí! Encontraremos trabajos en los que puedas prosperar». Esa propuesta de valor es única y convincente.
- Es difícil saberlo a partir de la captura de pantalla anterior, pero el titular está en un carrusel giratorio que atiende a personas específicas, desde solicitantes de empleo hasta personas que buscan un terapeuta para sus escuelas.
- Hay varios caminos que los visitantes pueden tomar cuando llegan a la página, pero las llamadas a la acción están bien posicionadas, redactadas de manera simple y contrastan con el resto de la página.
8. Melissa Griffin
Por qué es brillante
- Melyssa inmediatamente demuestra prueba social «Únete a más de 200,000 personas…»
- Ella califica la razón de un visitante para visitar su sitio web con una encuesta rápida, y cada opción se vincula a una oferta de contenido diferente.
- Ella agrega una cara a su marca. Ella no es solo un sitio web al azar; ella deja en claro que es una humana con la que la gente puede conectarse.
- La página utiliza colores brillantes sin resultar abrumadora y facilita la comprensión de las ofertas comerciales centrales de Melyssa.
9. jill konrath
Por qué es brillante
- Es simple y va directo al grano. Desde el título y el subtítulo, queda claro exactamente lo que hace Jill Konrath (y cómo puede ayudar a su negocio).
- También brinda fácil acceso a los materiales de liderazgo intelectual de Jill, lo cual es importante para establecer su credibilidad como oradora principal.
- Es fácil suscribirse al boletín y ponerse en contacto, dos de sus principales llamados a la acción.
- La CTA de suscripción emergente utiliza pruebas sociales para que te unas a sus miles de fans.
- Incluye logotipos de medios de comunicación y testimonios como prueba social.
10 Evernote
Por qué es brillante
- A lo largo de los años, Evernote ha pasado de ser una simple aplicación para guardar notas a un conjunto de productos empresariales. Esto no siempre es fácil de transmitir en una página de inicio, pero Evernote hace un buen trabajo al empaquetar muchos mensajes potenciales en algunos beneficios clave.
- Esta página de inicio utiliza una combinación de colores intensos y apagados en el video y sus característicos reflejos verdes y blancos brillantes para que las rutas de conversión se destaquen.
- Después de un título simple («Recordar todo»), el recorrido visual lo lleva a su llamado a la acción, «Regístrese gratis».
- Evernote también ofrece un proceso de registro con un solo clic a través de Google para ayudar a los visitantes a ahorrar aún más tiempo.
11 Telerik de Progreso
Por qué es brillante
- «Empresa sofocante» no es la sensación que tienes cuando llegas al sitio web de Telerik. Para una empresa que ofrece muchos productos tecnológicos, sus colores llamativos, diseños divertidos y videografía emiten una vibra similar a la de Google. Solo un aspecto importante para hacer que los visitantes se sientan bienvenidos y hacerles saber que están tratando con personas reales.
- Me encanta la descripción general simple y de alto nivel de sus seis ofertas de productos. Es una forma muy clara de comunicar lo que hace la empresa y cómo la gente puede aprender más.
- La copia es ligera y fácil de leer. Habla el idioma de sus clientes.
12 Boda electrónica
Por qué es brillante
- Para aquellos tortolitos que planean su gran día, eWedding es un excelente destino para crear un sitio web personalizado para bodas. La página de inicio no está abarrotada y solo incluye los elementos necesarios para que las personas comiencen a construir sus sitios web.
- El subtítulo «¡Más de 800 000 sitios web de bodas creados!» es una gran prueba social.
- Incluye excelentes imágenes del producto, un gran título y un llamado a la acción que reduce la fricción con la copia, «Iniciar sitio web».
13 Campamento base
Por qué es brillante
- Durante mucho tiempo, Basecamp ha tenido páginas de inicio brillantes y aquí puedes ver por qué. A menudo presenta titulares increíbles y dibujos animados ingeniosos.
- La llamada a la acción está en negrita y en la parte superior de la página.
- En este ejemplo, la empresa eligió una página de inicio más parecida a un blog (o un enfoque de sitio de una sola página), que…