5 impresionantes diseños de diseño de página de inicio que puede copiar hoy

Diseños de diseño de la página de inicioDéjame adivinar, tú’no eres un diseñador de sitios web experto, y tú’estás construyendo un sitio web y quieres hacerlo increíble.


usted’he venido al lugar correcto, mi amigo!

Construir un sitio web que se vea genial’Tiene que ser súper complicado. Puede ser sistemático y lógico (no tanto “pelusa” como tu’d imagine) – cualquiera puede hacerlo!

En esta guía, nosotros’Le mostraré la anatomía de páginas de inicio impresionantes y bien diseñadas. yo’Los expondré en diagramas simples y le mostraré ejemplos en vivo para que incluso los que no sean diseñadores puedan entender y copiar!

Publicar Secciones

1. ¿Por qué debería centrarme en mi página de inicio??

2. ¿Qué es un diseño de diseño de página de inicio eficaz??

3. Qué contenido debo incluir en el diseño de mi página de inicio?

4 4. Anatomía de 5 diseños de página de inicio efectivos + plantillas de ejemplo que puede usar hoy

Elija un creador de sitios web y gane dinero en línea hoy

¿Qué tipo de sitio quieres construir??

construir un sitio web construir una tienda en línea SITIO WEB TIENDA ONLINE

¿Por qué debería centrarme en mi página de inicio??

Impresionantes diseños de diseño de la página de inicio que puede copiar hoySu página de inicio es posiblemente la página más importante de su sitio web..

¿Por qué? – Porque’es más probable que sea la primera página que verán los visitantes de su sitio web cuando aterrizan en tu sitio web.

Creo que todos podemos estar de acuerdo en que la primera impresión es muy importante, ¿verdad??

Su página de inicio establece el tono para su negocio como una primera impresión, por lo que tiene mucho sentido garantizar que su página de inicio funcione de manera efectiva.

Imagina esto:

Entras en una tienda u oficina, y un representante de servicio al cliente te saluda de inmediato..

El servicio de atención al cliente actuó como un guía ayudando navegar la tienda / oficina y dirigirte a la persona o producto que puede resolver su problema.

El representante de servicio al cliente hizo el trabajo por usted al mostrarle dónde debe buscar para encontrar lo que necesita.

El proceso y la experiencia fueron agradables para usted.’No es necesario perder el tiempo y luchar para encontrar lo que’que estas buscando.

Cuando un cliente visita su sitio web, él / ella es “caminando” en su tienda u oficina.

Wouldn’No desea darles el mismo nivel de experiencia que recibirían si entraran a su tienda u oficina física.?

Don’Simplemente odias si tuvieras que luchar para buscar dónde se encuentra un producto o información?

PERO, hay UN problema: no hay una persona viva para saludar a sus visitantes cuando llegan a su sitio web!

Entonces la pregunta es: “¿Cómo puedo dirigir a mis visitantes a la información que necesitan sin guiarlos físicamente??”

La respuesta, mi amigo, es un diseño efectivo de diseño de página de inicio.

El diseño de su página de inicio actúa como su representante de servicio al cliente que guía diligentemente a sus visitantes por su sitio web.

¿Como hace eso? – Simple:

Un diseño de página de inicio bien pensado crea un rastro visual de migas de pan que puede guiar efectivamente a sus visitantes a descubrir sus servicios / productos sin esfuerzo. El diseño de la página también dirigirá a sus visitantes a saber dónde tomar medidas y continuar con el siguiente paso..

Antes de entrar en lo que debe incluir en su página de inicio y mostrarle diagramas de la anatomía de 5 diseños de página de inicio diferentes con ejemplos reales a continuación, deje’s definir adecuadamente qué es un diseño de página de inicio efectivo.

¿Qué es un diseño de diseño de página de inicio eficaz??

Diseños efectivos de página de inicio

La planificación del diseño de página lo ayuda a determinar qué contenido colocar en su página, dónde ubicarlo y qué contenido debe ir primero.

Crear una página de inicio increíble no es solo colocar al azar cualquier información que se te ocurra en la página. Eso’s tampoco se basa en conceptos abstractos, o en cómo te sientes esa mañana en particular.

Eso’s en realidad muy metódico y lógico, para que todos puedan replicar un buen diseño.

Tiene que haber un fluir así que puedes guía sus visitantes para descubrir su sitio web de la manera que usted desea.

Esto le permite crear una experiencia de sitio web muy específica que funcione mejor para los clientes específicos que desea atraer.

Cuando se hace correctamente (I’le mostraremos cómo a continuación), puede ayudar a los visitantes que llegan a su sitio web:

  1. Identifique fácilmente de qué trata su sitio web, qué hace y cómo puede proporcionar a sus visitantes soluciones a sus problemas; y
  2. Interactúa con tu negocio averiguando dónde dar el siguiente paso. Si tus visitantes no’No sé cuál es el siguiente paso, ellos’Probablemente se vaya sin tomar ninguna acción. Los siguientes pasos podrían ser visitar una página de oferta de productos / servicios, descargar una guía, ver un video informativo, suscribirse a una serie de boletines, enviar detalles de contacto, etc..

El diseño efectivo de la página de inicio se trata de hacer que su sitio web sea fácil de usar y navegar. Te permite dirigir a tus visitantes’ enfócate en las cosas a las que quieres que presten más atención.

Dejar’s comencemos sobre qué incluir en una página de inicio efectiva, y nosotros’me sumergiré en algunos ejemplos y diseños específicos!

Qué contenido debo incluir en el diseño de mi página de inicio?

Dejar’Sea honesto: ¿cuántas veces ha visitado un sitio web y ha terminado haciendo clic en “espalda” botón porque no pudiste’no encuentro lo que tu’lo buscas en unos segundos?

El hecho es que la mayoría de nosotros estamos condicionados a esperar encontrar lo que’Lo busco en unos segundos. La gente se está volviendo cada vez más exigente (e impaciente) hoy en día.

Sus visitantes tomarán una segunda opción muy simple y dividida cuando lleguen a su página de inicio: quedarse o irse.

La forma en que elija diseñar su página de inicio afectará esa decisión y afectará el destino de su negocio.

Simplísticamente, el diseño de su página de inicio se divide en dos partes:

1. Sobre el doblez – contenido que puede ver SIN desplazarse hacia abajo cuando su página de inicio se carga por primera vez.

2. Debajo del doblez – contenido que solo ves cuando te desplazas hacia abajo.

El 100% de sus visitantes verán el contenido sobre el doblez, ya que se muestra en la pantalla de su computadora de inmediato.

Estadísticamente hablando, a medida que se desplaza hacia abajo en la página, la cantidad de personas que continuarán prestando atención a su contenido disminuirá drásticamente.

Por eso es que’Es muy importante planificar el contenido de su lugar por encima y por debajo del doblez.

1. TIPO DE Contenido PARA INSERTAR Sobre el doblez

Aquí es donde desea mostrar todos sus Contenido primario – su contenido más importante que necesita que vean todos sus visitantes.

El objetivo n. ° 1 de su contenido principal es convencer a sus visitantes de que se queden más tiempo para investigar más a fondo lo que tiene para ofrecer. Su contenido principal debe ser claro, conciso y específico.
Diseños de diseño de la página de inicio: arriba del pliegueFuente: Hubspot.com

Desglose del contenido primario:

1. Titular:

En una sola oración (dos como máximo), debe responder la pregunta que se harán todos sus visitantes: “Que hace tu compañía?”

Un buen titular responderá a esta pregunta candente, por lo que debe ser breve, clara y describir lo que haces perfectamente.

Desea que sus visitantes lean su titular y piensen: “Hey eso’soy yo! necesito este!

Aquí hay un gran ejemplo de un título simple y efectivo que dice mucho:

ejemplo de titular de diseño de página de inicioFuente: Basecamp.com

Si está trabajando en un proyecto con otras personas y tiene el mismo problema, este titular llamará su atención..

Eso’No es nada lujoso, pero transmite el mensaje perfectamente.

2. Subtítulo:

Tiene la oportunidad de definir su servicio / producto con un poco más de detalles con su subtítulo.

La breve descripción debería responder: “¿Qué problemas resuelves para mí??”

Aquí hay un buen ejemplo de un subtítulo efectivo:

ejemplo de subtítulo de diseño de página de inicioFuente: Leadpages.net

En una frase corta, te dice cómo su producto puede ayudarte.

En este ejemplo, sus usuarios pueden usar su producto para crear páginas para generar más clientes!

3. Llamado a la acción principal:

Un llamado a la acción proporciona instrucciones y pide / les dice a sus visitantes que hagan algo: dar el siguiente paso.

Esto puede ser “Llámanos ahora” o “haga clic para obtener una cotización gratis”.

diseño de la página de inicio llamado a la acciónAdemás, presta atención a Shopify’s titular y subtítulo. ¡Muy efectivo! – Fuente: Shopify.com

Piense en un llamado a la acción como un indicador de dirección. Todos sabemos cómo tomar la dirección porque hacemos esto todos los días en el mundo real..

Señal de tráfico

Este letrero le permite saber que se dirige hacia el este, y puede llegar a Redlands girando a la derecha en la salida 40A.

Consideramos que estos signos y flechas son muy útiles en nuestra vida diaria, entonces, ¿por qué no usarlos en su sitio web para guiar a su audiencia sobre qué hacer o dónde ir??

Esto es especialmente cierto si quieren comprometerse porque resuenan con lo que tiene para ofrecer (su título y subtítulo).

Don’No espere que sus visitantes sepan qué hacer a continuación: no’t.

Desea que sus visitantes vean visualmente que hay un próximo paso que pueden dar, así que nunca se avergüence de decirles qué hacer de manera útil..

Imagina esto: Encuentras un restaurante al azar y ves un menú junto a la puerta. Entras y ves al anfitrión parado allí, pero él no’No digas nada. El no’No te pregunte de manera proactiva cuántas personas tienes en tu grupo, ni intenta llevarte a la sala de estar..

Terminas ahí parado, preguntándote … “qué’s siguiente?”

¿Eso te hace sentir bien y seguro sobre el negocio??

¿Hace que el negocio se sienta agradable y agradable??

La clave es interactuar activamente con sus visitantes: dígales qué hacer y guíelos a tomar medidas para que pueda comenzar a construir una relación con ellos..

Esto puede aumentar significativamente sus posibilidades de ganar nuevos clientes..

4. Use imágenes o un video para ilustrar su mensaje:

Las personas se sienten naturalmente atraídas por imágenes como imágenes y videos, por lo que es una excelente manera de crear un estado de ánimo o mostrar a su audiencia de qué se trata.

Es importante recordar utilizar imágenes y videos que sean relevantes para su sitio web. Si ellos no’no sirve para nada o no’No haga un buen trabajo para mejorar su marca o mensajes en general, no’no los use.

Es mejor mantener limpio su sitio web en lugar de incluir cosas que no son útiles..

Su logotipo debe hacer un buen trabajo al comunicar sutilmente de qué se trata su empresa. Insinúa el ADN de su negocio, ya sea profesional, creativo, agresivo o relajado..

6. Barra de navegación:

Esta es la hoja de ruta que utiliza para mostrar a sus visitantes lo que’s importante y dónde pueden ir para obtener la información específica que necesitan.

Regla de oro:

  • Solo incluya las páginas necesarias y don’No confunda a los usuarios con demasiadas opciones innecesarias. Sus visitantes no estarán interesados ​​(inicialmente) en páginas sobre derechos de autor, privacidad y términos de servicios. Así que insértelos en otro lugar, como en su pie de página.
  • Cree grupos lógicos de enlaces relacionados, con los enlaces más importantes organizados de izquierda a derecha.
  • Mantenga los títulos de las páginas cortos y descriptivos..
  • Coloque su barra de navegación en un lugar destacado para que sea fácil de encontrar..

Ponte en el lugar de tus visitantes y pregúntate esto:

¿Cuál es el menor número de pasos que debo tomar antes de tomar una decisión informada para comprar su servicio o producto??

2. TIPO DE Contenido PARA INSERTAR Debajo del doblez

Como se mencionó anteriormente, no todos se desplazarán hacia abajo en su página de inicio para ver más de la página.

Sus visitantes que en realidad se desplazarán hacia abajo en su página de inicio para ver más son aquellos que están interesados ​​en lo que tiene que ofrecer después de leer su título y subtítulo (su contenido Above-The-Fold).

De lo contrario, ya habrían abandonado su sitio..

Por lo tanto, el tipo de contenido que desea insertar Under-The-Fold es apoyar su contenido Above-The-Fold (lo que ofrece y cómo puede resolver a sus clientes’ problemas).

Estos son los 2 tipos de contenido que debe mostrar debajo del doblez:

1. Contenido secundario: Contenido que no es lo suficientemente importante como para sobresalir, pero sigue siendo crucial para convencer a sus visitantes de que se conviertan en clientes o seguidores leales..

2. Contenido adicional: Estos son los “Agradable tener” información, pero no son críticos para hacer que su sitio web sea efectivo para causar una buena primera impresión.

Dejar’s profundice en detalles más específicos sobre este contenido debajo del pliegue. Luego, nosotros’Le mostraremos 5 diseños de página de inicio efectivos que puede imitar.

# 1) Desglose de contenido secundario:

El contenido secundario refuerza su contenido primario (sobre el doblez).

El objetivo es convencer y educar a sus visitantes sobre qué es exactamente’dejaré de usar su servicio o comprar sus productos.

1. Lista de beneficios:

aquí’Es un error común: la mayoría de los sitios web se centran en enumerar muchas funciones y no’No se centre lo suficiente en describir los beneficios para clientes / lectores potenciales.

Hay un dicho perspicaz en marketing: “Las características dicen, los beneficios venden.”

La pregunta principal que harán sus visitantes es, “Y qué’s en esto para mí?” – “¿Por qué debería comer en tu restaurante??” – “¿Por qué debería contratarte como mi fotógrafo??”

Si aterrizó en un sitio web y todo lo que ve es una gran lista de características, como “tenemos 20 sandwiches, 15 ensaladas & 5 tipos de sopas….“, o “le proporcionamos 100 imágenes en un DVD & un album fisico….“

usted’Acabaré siendo otro restaurante o sitio web de negocios de fotografía. Nada hace que el visitante de su sitio web quiera saber más sobre usted.

Concéntrese en cómo sus visitantes se beneficiarán de usted, por ejemplo, “ingredientes orgánicos de la granja a la mesa para que te sientas más saludable y vivas más tiempo”, o “los niños crecen demasiado rápido – nosotros’te ayudaremos a capturar esos preciosos momentos y recuerdos con tu primer hijo.”

Tenga en cuenta que los beneficios aprovechan el lado emocional de las personas, porque funciona.

Aquí hay un buen ejemplo de descripción de los beneficios de Basecamp’s página de inicio (Basecamp es un software de gestión de proyectos que ayuda a los equipos a gestionar mucho respaldo & cuarta comunicación):

lista de beneficios de diseño de la página de inicioFuente: Basecamp.com

Primero enumeran todos los dolores de cabeza y puntos de dolor que su cliente potencial podría tener (para relacionarse a nivel emocional). Luego hacen la promesa (beneficios) de que con su software pueden desaparecer todos esos problemas.

Resumen de beneficios don’Siempre tiene que estar resolviendo un problema específico. También puede ser inspirador como lo bueno que será hacer un viaje por carretera con su familia en un auto nuevo!

La clave aquí es mostrarle a su audiencia cómo su vida cambiará para mejor con lo que les está proporcionando..

2. Indicadores de confianza:

Los indicadores de confianza pueden ser historias de éxito de clientes, testimonios o citas de clientes, acreditación profesional (afiliaciones de asociaciones de la industria, puntaje de Better Business Bureau), citas de medios, la cantidad de recursos compartidos de redes sociales y mostrar borrones personalizados sobre los miembros de su equipo para crear confianza.

La gente compra a personas o negocios que les gustan y en los que confían.

Entonces, al mostrar a otras personas como usted y su marca, puede aumentar su credibilidad y confiabilidad.

La clave aquí es asociar positivamente su negocio con terceros y demostrar que su negocio es operado por personas, no por robots..

Los indicadores de confianza son muy potentes para ayudar a que sus visitantes estén un paso más cerca de convertirse en clientes, especialmente cuando están cerca de cruzar esa línea, pero solo necesitan un empujón suave.

Recuerde: a la gente le gusta seguir a otras personas. Entonces, cuando ven a otros (como ellos) hacer negocios con usted, es más probable que lo sigan. ¿Por qué crees que constantemente buscamos reseñas de diferentes servicios o productos??

3. Lista de características:

La lista de características ayuda a sus clientes potenciales a saber lo que EXACTAMENTE obtienen cuando hacen una compra.

Enumere sus características más atractivas que sus visitantes querrán tener.

Uno de los mayores errores que veo que la gente comete es que enumeran una larga lista de características que no’t se relacionan conmigo como cliente.

Incluso cuando las características pueden sonar interesantes, me importaría menos si las características no’No resuelvo mi problema o respondo a mis necesidades..

Por ejemplo: Cuando voy a Volkswagen’s sitio web para buscar un auto nuevo, no’No consiga una lista de características que adormecen la mente, como la dirección asistida electromecánica con asistencia variable. Si bien esta es una característica importante, no es algo que le importe a la mayoría de los compradores de automóviles.

En cambio, te venden características como el techo corredizo infinito y el sistema de audio de sonido envolvente de 10 altavoces. Estas son las características que a las personas les interesan y que eventualmente venderán el automóvil.

lista de características de diseño de la página de inicioTecho corredizo Volkswagen Touareg 2016 – Fuente: vw.com

Piensa en las características que resonarán en tu audiencia y elimina las características adicionales que ganaron’t tener un gran impacto en tu página de inicio.

# 2) Desglose de contenido adicional:

Estos son los “Agradable tener” información, pero no son críticos para hacer que su sitio web sea efectivo para causar una buena primera impresión.

Por ejemplo, artículos de blog, anuncios de la compañía, horarios de eventos, actualizaciones de la industria, mapa de ubicación (si no está en el negocio de restaurantes).

Dicho contenido tiene un lugar en su sitio web y, si se coloca en la ubicación adecuada, puede ayudar a completar la imagen general de lo que se trata su negocio. Pero si se usan incorrectamente, pueden crear desorden y confusión..

Ahora que sabe lo que debe incluir en su página de inicio, deje que’s vea cómo puede posicionar su contenido para crear una experiencia increíble para sus visitantes!

Anatomía de 5 diseños de página de inicio efectivos &
Plantillas de ejemplo que puede usar hoy

yo’Voy a compartir 5 diseños de página de inicio muy efectivos con usted a continuación. Los diagramas desglosan cada componente de arriba del pliegue y debajo del pliegue.

Puede seguir estos diseños para optimizar su página de inicio. Si estás usando un arrastre & deje caer el creador de sitios web, podrá arrastrar fácilmente su contenido para imitar los diseños como se muestra en los diagramas a continuación.

yo’También hemos enumerado algunas plantillas de ejemplo a continuación, donde las páginas de inicio ya están configuradas de manera efectiva. Puede hacer clic para ver las plantillas reales y puede registrarse y comenzar a usar una de inmediato.

En cierto modo, el uso de una de estas plantillas es un atajo, ya que le permite obtener una ventaja inicial ya que las plantillas ya incorporan algunas de las mejores prácticas I’he discutido anteriormente!

Diseño # 1

Este diseño es bastante universal, por lo que se puede aplicar a casi todas las industrias..

diseño de página de inicioClick para ampliar imagen

Ejemplos de plantillas: Aquí hay algunas plantillas que tienen este tipo de diseño de diseño de página de inicio. Puede hacer clic para verlos, registrarse y comenzar a usarlos de inmediato.

buen diseño de página de inicio wix ejemplo buen diseño de página de inicio ejemplo de shopifybuen ejemplo de diseño de espacio de página de inicio buen diseño de página de inicio wix ejemplobuen diseño de página de inicio wix ejemplo buen diseño de página de inicio wix ejemplobuen diseño de página de inicio wix ejemplo buen diseño de página de inicio wix ejemplo

Diseño # 2

Este diseño también es bastante universal, por lo que puede aplicarse a la mayoría de las industrias..

diseño de página de inicioClick para ampliar imagen

Ejemplos de plantillas: Aquí hay algunas plantillas que tienen este tipo de diseño de diseño de página de inicio. Puede hacer clic para verlos, registrarse y comenzar a usarlos de inmediato.

buen diseño de página de inicio wix ejemplobuen diseño de página de inicio wix ejemplobuen diseño de página de inicio wix ejemplobuen diseño de página de inicio wix ejemplo

Diseño # 3

Este diseño también es bastante universal, por lo que puede aplicarse a la mayoría de las industrias..

diseño de página de inicioClick para ampliar imagen

Ejemplos de plantillas: Aquí hay algunas plantillas que tienen este tipo de diseño de diseño de página de inicio. Puede hacer clic para verlos, registrarse y comenzar a usarlos de inmediato.

buen diseño de página de inicio wix ejemplo buen diseño de página de inicio wix ejemplo
layout-3-wix-example-2
layout-3-wix-example-1

Diseño # 4 – Portafolio & Sitios web de fotografía

Este diseño es adecuado para empresas creativas.

(fotógrafos, diseñadores, artistas, músicos e ilustradores)

diseño de página de inicio para sitios web de portafolio de fotografíaClick para ampliar imagen

Ejemplos de plantillas: Aquí hay algunas plantillas que tienen este tipo de diseño de diseño de página de inicio. Puede hacer clic para verlos, registrarse y comenzar a usarlos de inmediato.

buen diseño de página de inicio wix ejemplobuen ejemplo de diseño de espacio de página de iniciobuen diseño de página de inicio wix ejemplobuen diseño de página de inicio wix ejemplo

Diseño # 5 – Alimentos, salud & Sitios web de belleza

Este diseño funciona bien para las empresas que se benefician más de las comunicaciones visuales (menos del contenido escrito)

(Restaurantes, spas, salones y cafeterías)

diseño de la página de inicio para sitios web de belleza alimentariaClick para ampliar imagen

Ejemplos de plantillas: Aquí hay algunas plantillas que tienen este tipo de diseño de diseño de página de inicio. Puede hacer clic para verlos, registrarse y comenzar a usarlos de inmediato.

buen diseño de página de inicio wix ejemplo buen diseño de página de inicio wix ejemplobuen diseño de página de inicio wix ejemplo buen diseño de página de inicio wix ejemplo

Conclusión & Para llevar

Impresionantes diseños de diseño de la página de inicio que puede copiar hoyEl diseño efectivo de la página de inicio no se trata solo de mirar “bonita” – eso’s sobre cuán fácil es para sus visitantes entender lo que hace, qué problemas resuelve y cómo pueden beneficiarse de sus servicios o productos.

NUNCA deje que sus visitantes adivinen o descubran qué hacer a continuación. En lugar, cree un llamado a la acción muy claro en su página de inicio que dirija a sus visitantes a dar el siguiente paso (como ir a la página de su producto / servicio, suscribirse a su boletín, descargar una guía, contactarlo, etc.).

Pregúntese constantemente si sus visitantes entienden completamente lo que hace y qué beneficios aporta.. Concéntrese en describir los beneficios de cómo puede ayudar a sus visitantes – evite volcar una lista de características que pueden’No se conecte con sus visitantes a nivel emocional..

Don’Utilice vocabulario complicado o descripciones vagas: sea conciso, sea directo.

Ten en cuenta que ganaste’t obtener el “Perfecto” diseño de la página de inicio en tu primer intento. Eso’Está bien seguir trabajando para mejorarlo. Recopile comentarios de personas para ver cómo puede mejorar.

Por último, eche un vistazo a los ejemplos de plantillas que compartí anteriormente: en lugar de diseñar su propia página de inicio, esos ejemplos de plantillas pueden ayudarlo a crear un diseño atractivo y efectivo!

Es posible que sus visitantes no siempre encuentren útiles sus servicios / productos, pero nunca deben entender mal lo que ofrece su negocio.

Encontraron esta guía útil?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map