Welcome to Our Website

23 de los mejores ejemplos de diseño de página web

nunca tienes una segunda oportunidad de causar una primera impresión that Es por eso que 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 unfortunately desafortunadamente, mucha gente todavía juzga un libro por su portada.

¿Qué hace que el diseño de la página de inicio de un sitio web sea brillante en lugar de Soso?, Se necesita más que mirar solo also también tiene que funcionar bien. Es por eso que las páginas de inicio más brillantes de esta lista no solo obtienen una puntuación alta en belleza, sino también en cerebro y creatividad.

pero antes de sumergirnos en los ejemplos, vamos a diseccionar algunas de las mejores prácticas de diseño de Página de inicio.

¿Qué hace que un buen sitio web?

un buen sitio web responde claramente «quién soy», » Qué hago «y/o» qué puede usted (el visitante) hacer 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 la 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ágina de inicio tienen muchos de estos derechos.,

recurso gratuito

77 ejemplos brillantes de páginas de inicio, Blogs & páginas de destino

Cuéntanos un poco sobre ti a continuación para obtener acceso hoy:

El diseño responde claramente a «quién soy», «Qué hago» y / o «qué puede usted (el visitante) hacer aquí.»

Si eres una marca o empresa bien conocida (i. e.,, Coca-Cola) es posible que pueda salirse con la suya sin tener que describir quién es y 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án en el «lugar correcto».»

Steven Krugg lo resume mejor en su libro más vendido, Don’t Make Me Think: si los visitantes no pueden identificar lo que haces en cuestión de segundos, no se quedarán mucho tiempo.

El diseño resuena con el público objetivo.

una página de inicio debe estar estrechamente enfocada speaking hablar con las personas adecuadas en su idioma., Las mejores páginas de inicio evitan el «gobbledygook corporativo» y eliminan la pelusa.

El diseño comunica una propuesta de valor convincente.

cuando un visitante llega a tu página de inicio, necesita obligarlo a quedarse. La página de inicio es el mejor lugar para clavar su propuesta de valor para que los prospectos elijan permanecer en su sitio web y no navegar a la de sus competidores.

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 excesivamente complicados e innecesarios. Muchos también están optimizados para dispositivos móviles, lo que es una necesidad increíblemente importante en el mundo móvil de hoy.

El diseño incluye llamadas a la acción (Cta).

cada página de inicio listada aquí Utiliza 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 tu página de inicio en un motor de ventas o generación de leads, y no solo en un folleto.

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.

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 eficazmente el diseño, la colocación de CTA, los espacios en blanco, los colores, las fuentes y otros elementos de soporte.

ahora, prepárese para aprender sobre el excelente diseño de la página de inicio a través de los siguientes 23 ejemplos de la vida real.,

  • Dropbox (Business)
  • 4 Rivers Smokehouse
  • Cobb Pediatric Therapy Services
  • Melyssa Griffin
  • Jill Konrath
  • Evernote
  • Telerik by Progress
  • Ewedding
  • Basecamp
  • charity: water
  • TechValidate
  • chipotle
  • medium
  • Digiday
  • KIND Snacks
  • Ahrefs
  • A24 films
  • Ellevest
  • HubSpot
  • FreshBooks

    ver toda la página de inicio

    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 hacer que sea fácil desplazarse y leer — 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 las llamadas a la acción principales it está claro lo que la compañía quiere que convierta cuando llegue.
    • la copia utilizada en las llamadas a la acción «Get Started for Free» 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 genial: «Únete a más de 10 millones de propietarios de pequeñas empresas usando FreshBooks.»FreshBooks emplea expertamente social proof 1 10 millones es un gran número to para obligar a su público objetivo a unirse a sus compañeros y probar la herramienta.

    Airbnb

    ver toda la página de inicio

    por qué es Brillante

    • incluye el formulario de búsqueda de destino y fecha que más los visitantes vienen a buscar, justo al frente, 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 («Búsqueda») contrasta con el fondo y se destaca; pero la llamada a la acción secundaria para los anfitriones también es visible por encima del pliegue.
    • Ofrece sugerencias para excursiones y escapadas los usuarios de Airbnb pueden reservar en el mismo sitio que sus alojamientos para que los visitantes estén más entusiasmados con la reserva de su viaje en el sitio. También muestra cuáles de estas ofertas son más populares entre otros usuarios.,

    Pixelgrade

    ¿por Qué Es Brillante

    • – Usted sabe la derecha del palo, lo que son todos acerca de: Temas de WordPress. El gran título, 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 de hacer que la llamada a la acción se destaque.
    • EL LADO DERECHO ayuda a tener una idea de cómo se ven sus temas de WordPress, sin tener que desplazarse o profundizar.,

    Mint

    ver toda la página de inicio

    por qué es Brillante

    • Es un diseño súper simple con un encabezado y subtítulo fuerte y sin jerga.
    • la página de inicio emite un ambiente seguro pero fácil, que 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ístrate gratis.»El diseño de CTA también es brillante the el icono de candado seguro golpea el mensaje de seguridad una vez más.,

    Dropbox (Business)

    ver toda la página web

    por qué es Brillante

    • Dropbox lleva a cabo su diseño y marca simples. Incluye solo lo que es importante: una imagen grande y relevante con copia compatible y un botón de llamada a la acción «prueba gratis durante 30 días»
    • La Página de inicio y el sitio web de Dropbox son el mejor ejemplo de simplicidad. Limita su uso de copias y elementos visuales y abraza los espacios en blanco.,
    • su subtítulo es simple, pero potente :» la solución segura de almacenamiento y uso compartido de archivos en la que confían los empleados y los administradores de TI.»No es necesario descodificar la jerga para averiguar qué hace Dropbox en realidad.

    4 Rivers Smokehouse

    por qué es Brillante

    • Drool. Eso es lo que pienso cuando llego a la página web de 4 Rivers Smokehouse. Combinado con una gran fotografía, el titular » pechuga. 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 por los servicios, el menú y las personas que lo pasan en grande a un gran uso de esta tendencia de diseño popular.
    • ¿El único negativo? No vivo lo suficientemente cerca de este lugar. Boo.

    Cobb Pediatric Therapy Services

    ver toda la página web

    por qué es Brillante

    • El titular y subtítulo atractivo para el lado emocional de los visitantes: «trabaja con una empresa que lo consigue»;». ¡Nosotros también hemos estado allí! Encontraremos trabajos donde puedas prosperar.,»Esa propuesta de valor es única y convincente.
    • Es difícil de decir por 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.,

    Melyssa Griffin

    ver toda la página web

    por qué es Brillante

    • Melyssa demuestra inmediatamente la prueba social «únete a más de 200,000 Otros…»
    • ella califica la razón de un visitante para visitar su sitio web con una encuesta rápida, y cada opción enlaza a una oferta de contenido diferente.
    • ella añade un rostro a su marca. Ella no es solo un sitio web al azar; ella deja en claro que es un ser humano con quien la gente puede conectarse.,
    • la página utiliza colores brillantes sin ser abrumadora y hace que sea fácil entender cuáles son las ofertas comerciales centrales de Melyssa.

    Jill Konrath

    Ver toda la página de inicio

    ¿por Qué Es Brillante

    • Es simple y va directo al punto. Por el encabezado y el subtítulo, está claro exactamente lo que hace Jill Konrath (y cómo puede ayudar a tu negocio).
    • también da fácil acceso a los materiales de liderazgo de pensamiento de Jill, lo cual es importante para establecer su credibilidad como oradora principal.,
    • Es fácil suscribirse al boletín y ponerse en contacto two dos de sus principales llamadas a la acción.
    • la Cta de suscripción emergente utiliza la prueba social para que te unas a sus miles de otros fans.
    • Incluye logotipos de medios de comunicación y testimonios como prueba social.

    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 ser 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 empaquetando muchos mensajes potenciales en algunos beneficios clave.
    • esta página de inicio utiliza una combinación de colores intensos y silenciados en el video y sus característicos reflejos verdes y blancos brillantes para hacer que las rutas de conversión destaquen.
    • siguiendo un simple titular («recuerda todo»), el camino del ojo te lleva a su llamada a la acción, » Regístrate 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.,

    Telerik by Progress

    por qué es Brillante

    • «Stuffy enterprise» no es la sensación que tienes cuando llegas al sitio web de Telerik. Para una empresa que ofrece muchos productos de tecnología, sus colores audaces, diseños divertidos y videografía emiten un ambiente similar a 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 visió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 las personas pueden aprender más.
    • La copia es ligera y fácil de leer. Habla el idioma de sus clientes.

    eWedding

    por qué es Brillante

    • Para aquellos pájaros del amor que planean su gran día, eWedding es un gran destino para construir un sitio web de bodas personalizado. La página de inicio no está desordenada y solo incluye los elementos necesarios para que la gente comience a construir sus sitios web.
    • el subtítulo » más de 800,000 sitios web de bodas construidos!,»es una gran prueba social.
    • incluye excelentes imágenes de productos, un gran titular y una llamada a la acción que reduce la fricción con el copy, «Start website.»

    Basecamp

    por qué es Brillante

    • Durante mucho tiempo, Basecamp ha tenido páginas web brillantes, y aquí puedes ver por qué. A menudo presenta titulares impresionantes y dibujos animados inteligentes.
    • La llamada a la acción es audaz y está por encima del pliegue.,
    • En este ejemplo, la compañía eligió una página de inicio más similar a un blog (o un enfoque de sitio de una sola página), que proporciona mucha más información sobre el producto.
    • La cotización del cliente es un testimonio audaz y enfático que habla de los beneficios y resultados de usar el producto.

    charity: water

    Why It’s Brilliant

    • Este no es tu típico sitio web sin fines de lucro. Muchas imágenes, copia creativa y uso de diseño web interactivo hacen que esto se destaque.
    • La imagen de cabecera animada es una gran manera de captar la atención.,
    • emplea grandes usos del video y la fotografía, particularmente en la captura de emociones que causan acción.

    TechValidate

    ¿por Qué Es Brillante

    • Esta página web está muy bien diseñado. Me encanta especialmente el uso de espacios en blanco, colores contrastantes y diseño centrado en el cliente.
    • El titular es claro y convincente, al igual que las llamadas a la acción.
    • También hay una gran jerarquía de información, lo que facilita el escaneo y la comprensión de la página rápidamente.,

    Chipotle

    ver toda la página de inicio

    por qué es Brillante

    • la página de inicio es un gran ejemplo de agilidad y cambio constante. La página de inicio actual de Chipotle se trata de las próximas vacaciones, que utiliza como una propuesta de valor única para que comience a hacer clic en su sitio. Cuando pienso en Chipotle, no necesariamente pienso en catering, pero el sitio es un gran recordatorio para considerar diferentes usos para los burritos que ya conoces y amas.,
    • La fotografía de comida es detallada y hermosa, y en realidad me da hambre mirándola. Ahora que es un uso eficaz de los elementos visuales.

    Medium

    View entire homepage

    Why it’s Brilliant

    • Este es quizás uno de los mejores usos de los espacios en blanco que he visto. Permite que el eslogan y la foto de la aplicación de Medium tomen el centro del escenario mientras sigue atrayendo su atención a los títulos de sección más oscuros en el sitio.
    • Medium hace que sea fácil registrarse on en el sitio , o con un simple mensaje de texto a su teléfono móvil., Soy mucho más receptivo a un texto que a un correo electrónico, por lo que esta es una gran estrategia para mantener a las personas involucradas en el proceso de registro.
    • la página de inicio utiliza la prueba social para que los visitantes empiecen a hacer clic: las secciones «Popular on Medium» y «Staff Picks» me permiten saber dónde encontrar contenido de alta calidad.,

    Digiday

    ver toda la página de inicio

    por qué es Brillante

    • A diferencia de otras publicaciones de noticias en línea que inundan las páginas de inicio con tantos titulares e imágenes como sea posible, la primera sección de Digiday muestra solo un artículo. Su imagen destacada (en este caso, una aterradora) es llamativa, y el título solo pide que se haga clic ahora que el visitante tiene una idea de lo que va a leer.,
    • la parte superior de la página de inicio, donde los sitios web normalmente muestran un montón de diferentes secciones y opciones para hacer clic, solo tiene un icono para hacer clic which que te lleva a una página de suscripción.

    KIND Snacks

    ver toda la página de inicio

    por qué es Brillante

    • Los colores llamativos producen contraste, haciendo que las palabras y las imágenes se destaquen en la página.
    • El CTA Shop «Shop KIND» is es inteligente. Insta al visitante a hacer clic para aprender más mientras juega con la palabra «amable», lo que implica que es una buena opción comprar allí.,
    • El eslogan de KIND Snacks es brillante straight cuando lo leí, el mensaje resonó inmediatamente y me hizo querer leer la etiqueta del snack bar.

    Ahrefs

    ver toda la página de inicio

    por qué es Brillante

    • El contraste de color entre los colores azul, blanco y naranja es llamativo y hace que el titular y el CTA destaquen.
    • el subtítulo y el CTA son un par atractivo: poder comenzar a rastrear y superar a los competidores de forma gratuita es una gran oferta.,
    • la página de inicio presenta una multitud de opciones para el visitante, pero no está desordenada gracias al fondo sólido y la tipografía simple.

    A24 Films

    View entire homepage

    Why It’s Brilliant

    • La Página principal de la compañía cinematográfica se compone solo de trailers para sus nuevas películas. Sabemos que el contenido de video es un formato del que las audiencias quieren ver más, y esta es una gran estrategia para mostrar el trabajo de A24 de una manera altamente atractiva.,
    • en la parte superior de la página de inicio, A24 ofrece inmediatamente una miríada de maneras de ponerse en contacto a través de las redes sociales y el correo electrónico something algo que aprecio como visitante cuando tantos otros sitios entierran la información de contacto en la parte inferior de la página.

    Ellevest

    Ver toda la página de inicio

    ¿por Qué Es Brillante

    • «Invertir Como una Mujer: Porque el dinero es poder.»Estos titulares son poderosos y me hacen querer aprender más sobre el producto, tanto como mujer como como alguien interesada en tomar decisiones financieras inteligentes.,
    • Las imágenes muestran, en lugar de decir, una de las propuestas de valor de la empresa: un sitio de escritorio y una aplicación móvil que se mueven con usted.
    • «Get Started» es un gran CTA — de hecho, lo usamos nosotros mismos aquí en HubSpot. Cuando se hace clic, lleva a los visitantes a través de unos sencillos pasos para configurar un perfil y comenzar a invertir.,

    HubSpot

    ver toda la página de inicio

    por qué es brillante (si lo decimos nosotros mismos)

    • Los personajes de LEGO llaman tu atención (porque son lindos), luego ilustran y refuerzan inteligentemente mensajes en el titular y subtítulo.
    • lleva otra llamativa llamada a la acción» Get Started » C con una microcopia adicional que detalla nuestras versiones gratuitas que los usuarios pueden elegir actualizar en el futuro.,
    • a lo largo de la página de inicio, nuestros brillantes temas de color azul y naranja siguen volviendo para atraer su atención a los enlaces y CTA.

    ¿buscas más inspiración? Echa un vistazo a estas increíbles páginas sobre nosotros.

    Deja una respuesta

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