Los 15 mejores ejemplos de sitios web para ideas creativas y que impulsan la conversión en 2022

Los diferentes sitios web comerciales tienen diferentes objetivos según su oferta principal, modelo comercial e industria. Pero los visitantes del sitio web, aparentemente tenemos un objetivo: juzgarlos y sin piedad.

El 75% de las personas admite juzgar la credibilidad de una empresa en función del diseño de su sitio web. Énfasis en admitir porque, en mi opinión, ese 25% simplemente no lo admite. Y esa es solo la primera impresión. Si ha logrado que los visitantes permanezcan en su sitio, ahora depende de la experiencia del usuario y la copia del sitio web mantenerlos allí y lograr que realicen las acciones que respaldan sus objetivos comerciales.

Entonces, ¿qué hace que un sitio web sea excelente? Echemos un vistazo a 17 ejemplos de sitios web de una variedad de industrias para averiguarlo, desde la copia hasta la creatividad y todo lo demás.

Ejemplos de sitios web para pequeñas empresas

En el pasado, los sitios web eran principalmente para grandes empresas con grandes presupuestos. Pero con la tecnología y las herramientas actuales, son viables para empresas de cualquier tamaño. Estos ejemplos de sitios web de pequeñas empresas pertenecen a las industrias de TI, salud y bienes raíces.

Ejemplo de sitio web de TI: Código Bestia

Beast Code es una pequeña y mediana empresa de tecnología que desarrolla soluciones de software. Ahora, como empresa de tecnología y con un nombre comercial como ese, tenía grandes esperanzas en este sitio y no me decepcionó, y no solo con la página de inicio de la nave espacial y el eslogan del guerrero.

lo que lo hace genial

• Primera impresión: aunque no hay un botón de llamada a la acción prominente encima de la tapa, no se debe a otros elementos que distraigan. La simplicidad de esta primera pintura (un fondo de nave espacial futurista sutilmente animado) deja su propia impresión en su percepción de las capacidades tecnológicas de esta empresa.
• Contraste de color: los botones CTA rojos resaltan contra el fondo negro.
• Elementos de video: en el patrón Z, en lugar de imágenes estáticas, los bloques visuales son videos. Vídeos silenciosos y no disruptivos que dan vida a la página.
• La redacción publicitaria: el tono conversacional y la capacidad de poner sus procesos complejos en términos sencillos refleja inteligencia, profesionalismo y humor.

Ejemplo de sitio web de negocios de salud: Aledade

Comenzamos con Aledade, un socio médico de atención primaria que tiene una combinación de ofertas (apoyo de gestión de práctica, programas de asociación, una aplicación y más) para prácticas privadas, prácticas grupales y centros de salud comunitarios. Pero a pesar de tener una oferta y una audiencia complejas, el sitio web hace un gran trabajo al guiar a los visitantes.

lo que lo hace genial

• Sensación general : la cara sonriente y las imágenes suaves, combinadas con una fuente en mayúsculas y negrita, le brindan una sensación amable pero autoritaria.
• Organización: Encabezado intuitivo y organizado, más un menú más pequeño debajo del título diseñado para ayudar a los diferentes segmentos de su audiencia a encontrar su camino.
• Movimiento: los elementos aparecen al desplazarse, lo que le da al sitio algo de movimiento y vida adicionales.
• Recursos: si bien la página de inicio presenta la friolera de ocho recursos, el carrete estilo tarjeta con miniaturas de imágenes lo hace limpio y organizado.

Ejemplo de sitio web inmobiliario: Frisbie Realty

Con este ejemplo de sitio web, tenemos otra excelente primera impresión visual, pero esta vez en la tierra. Lo que está viendo a continuación es la página de inicio de Frisbie, una pequeña empresa de bienes raíces en Palm Beach.

lo que lo hace genial

• Mensaje visual: la imagen le permite saber de inmediato que se trata de un agente inmobiliario de alto nivel y, sin embargo, la iluminación cálida y el título "bienvenido a casa" transmiten una sensación acogedora.
• Funcionalidad: La función de búsqueda de propiedades justo debajo de la imagen con un bonito botón azul que contrasta.
• Movimiento: un tema común entre estos ejemplos (y una tendencia del sitio web), los elementos aparecen y se mueven ligeramente al desplazarse.
• Contenido: hay guías de vecindario que aparecen en la página de inicio, un gran ejemplo de marketing de contenido.
• Accesibilidad: las opciones de accesibilidad del sitio web en la parte inferior izquierda, como aumentar o disminuir el tamaño del texto, ajustar el contraste, subrayar enlaces y más.

Ejemplos de sitios web de comercio electrónico

Los sitios web de comercio electrónico son una especie de animal propio, especialmente si tiene muchos productos para ofrecer. Aquí hay algunos ejemplos de una variedad de verticales.

Ejemplo de sitio web de comercio electrónico de comestibles: Gopuff

Gopuff no es el típico sitio de entrega de comestibles. De la misma manera que Tend (arriba) se ocupa de la odontología de manera diferente, Gopuff crea una experiencia única de compras en línea en supermercados/tiendas de conveniencia.

lo que lo hace genial

• Diseño: si bien la mayoría de los sitios de comercio electrónico tienen mega menús complejos, GoPuff tiene un diseño más simple con un formato de carrusel, que se traslada a sus páginas de subcategoría.
• Relacionabilidad: entre los productos presentados (Pringles, cerveza, enjuague bucal) y la copia utilizada ("No aumentamos ni aumentamos los precios. Sí, leyó bien"), se puede decir que GoPuff conoce bien a su público objetivo.
• Consistencia: Gopuff no está destinado a sus compras semanales de comestibles. Está ahí para ti cuando estás en un aprieto y necesitas algo de última hora. La copia concisa y sin flores en el sitio, la simplicidad del diseño e incluso la ausencia de ángulos de 90 grados en el sitio contribuyen a esta sensación de conveniencia y facilidad.

Ejemplo de sitio web de comercio electrónico de alquiler: Zumper

Zumper dice que “la experiencia de alquiler de hoy está rota. Es anticuado, agotador y lento” y tiene la misión de “cambiar la forma en que alquila, para siempre”. Creo que han tenido un gran comienzo.

lo que lo hace genial

• Los pequeños detalles: en lugar de "ingresar una ubicación", el mensaje del cuadro de búsqueda dice: "¿Dónde quieres vivir?" En la ilustración del apartamento en la página de inicio, hay toallas sobre la barandilla del balcón. Estos pequeños toques le dan carácter al sitio.
• Valores en la página de inicio: desplácese hasta la parte inferior y verá los tres valores fundamentales de Zumper: inclusivo, seguro y respetuoso, con un enlace para leer más. Como ya hemos visto en algunos de los ejemplos anteriores, esto se está convirtiendo en una prioridad cada vez mayor para las empresas de todas las industrias.
• Gráficos: las ilustraciones dibujadas a mano y el diseño plano son tendencias tanto en sitios web como en páginas de destino que estamos viendo este año, y Zumper logra ambas cosas. Además, mira la sección de "ciudades más atractivas" y verás un excelente uso de los emojis.

Ejemplo de sitio web de comercio electrónico minorista: sutiles golosinas asiáticas

Sutiles golosinas asiáticas, un juego de palabras del popular grupo de Facebook, es un gran ejemplo de un sitio web de comercio electrónico súper pequeño.

lo que lo hace genial

• Logo animado: ¿Qué lindo es ese pequeño ícono de té de burbujas?
• Top nanobar: esto es común para los sitios de comercio electrónico, ya que puede usarlo para anuncios importantes, incluidas las promociones de ventas.
• Emojis: estamos viendo cada vez más emojis en los sitios web en estos días. Agregarlos al menú de navegación aquí ayuda a separar cada uno, ¡y también se ve lindo!
• Logotipo centrado: la mayoría de los sitios tienen un logotipo en el que se puede hacer clic (a la página de inicio) en la parte superior izquierda. Este (así como el de Chinelle) está en el centro, debajo de algunos de los otros elementos de navegación, lo suficientemente diferentes como para ser únicos pero lo suficientemente intuitivos para una experiencia de usuario fluida.
• No tan sutil. 500% azúcar. Caso en punto

Ejemplos de sitios web de empresas de servicios

Los sitios web comerciales de generación de leads o basados ​​en servicios tienen diferentes objetivos que los sitios de comercio electrónico. Estos son algunos ejemplos de empresas grandes y pequeñas.

Ejemplo de sitio web de agencia de diseño: Born & Bred

Para la mayoría de las empresas, lo mejor es seguir con el diseño tradicional de otros sitios en su industria. Pero como empresa de diseño, puede salirse con la suya yendo contra la corriente. Después de todo, quieres mostrar lo que puedes hacer. Ahora, una captura de pantalla aquí realmente no le hace justicia al sitio de Born & Bred porque es la experiencia de desplazamiento lo que realmente lo hace genial, así que asegúrese de revisarlo.

lo que lo hace genial

• El tema del recorrido: el sitio está diseñado para llevarlo a través de una experiencia de recorrido a medida que se desplaza. Además, el carrete de video que se reproduce en la parte superior captura momentos sinceros en la oficina.
• Valores: valores fundamentales directamente en la página de inicio. Mi tipo de sitio.
• La copia: Al igual que Beast Code, estos chicos se divierten mucho. Por ejemplo: “Y a su derecha… más estudios de casos. Mantenga la vista y el cursor dentro de la ventana del navegador en todo momento”.
• Nanobar: la barra que se encuentra en la parte superior enlaza con un artículo sobre un galardón reciente y anuncia un bonito fondo degradado que llama la atención.

Ejemplo de sitio web de dentista: Tend

Pasando del diseño, tenemos un ejemplo de sitio web de dentista a continuación, y uno realmente genial. El eslogan de Tend es "Dental hecho de manera diferente" y podemos verlo de inmediato en la página de inicio. Vamos a ver.

lo que lo hace genial

• El video: en aproximadamente 10 segundos, el video silencioso de pantalla dividida en la página de inicio muestra clips de la visita de un paciente, mostrándole exactamente cómo Tend hace dental de manera diferente. No es su video explicativo tradicional, pero es muy efectivo.
• Diseño limpio: no es un juego de palabras, pero el diseño simple hace que este sitio sea atractivo.
• Prueba social: no solo hay un atractivo carrusel de testimonios, sino que las cuatro pestañas utilizadas para organizar los testimonios también sirven como características del negocio. ¡Marketing dental muy inteligente!

Ejemplo de sitio web publicitario: Eleven

Al igual que con una agencia de diseño, el sitio web de una agencia de publicidad debe ser de primera categoría, y Eleven no defrauda. Una vez más, la captura de pantalla no le hace justicia a la página de inicio, pero aún puede probar el atractivo de este cautivador sitio.

lo que lo hace genial

• Fondo de video: el video de fondo de ancho completo en la página de inicio es un carrete destacado con toneladas de imágenes increíbles que captan su atención (muestra A arriba).
• Diseño limpio: no hay un botón CTA prominente en la primera pintura, y con buen gusto. Los elementos blancos simples superpuestos en el fondo del video mantienen el video en el centro de atención, que es la llamada a la acción.
• Centrado en las personas: Eleven no solo tiene una sección clara de diversidad, equidad e inclusión en su página acerca de nosotros, sino que también dedica una página completamente separada a las fotografías de rostros/retratos de todos sus empleados (además de sus perros).

Ejemplo de sitio web SaaS: Chartbeat

Los sitios web SaaS pueden ser complicados porque desea demostrar lo que su plataforma puede hacer sin abrumar a los visitantes. Chartbeat hace un gran trabajo con esto a través de sus ilustraciones y textos concisos.

• El título: Buena propuesta de valor en el título con "Desbloquee el valor en sus datos de contenido".
• Animación: la imagen del tablero en la página de inicio está animada a la velocidad adecuada para mostrarle diferentes aspectos de la herramienta sin que sea demasiado.
• Menú de navegación único: Chartbeat minimiza el espacio que ocupa su menú de navegación al enumerar los elementos en el menú desplegable horizontalmente, una forma de organización diferente pero agradable.
• No se habla mucho: la página de inicio tiene muy poca copia de marketing. Las ilustraciones y los testimonios de los clientes son los que hablan, mientras que la copia de marketing se mantiene concisa y lo entreteje todo junto.

Ejemplos de sitios web de cartera

Los sitios web de portafolios son utilizados por estudiantes y profesionales para mostrar su trabajo y proporcionar una extensión de su currículum. Diseñadores, desarrolladores, fotógrafos, planificadores de eventos y modelos son solo algunos de los muchos oficios que utilizan sitios web de estilo de cartera.

Ejemplo de sitio web de portafolio de fotógrafos

Chinelle Rojas es una fotógrafa de autorretratos, diseñadora de logotipos y empresaria con un sitio web de cartera muy bueno. Entra y te sientes como si hubieras entrado en su mundo.

lo que lo hace genial

• Música: en la página de inicio, puede elegir una de las seis canciones para reproducir mientras navega por el sitio.
• Colores vibrantes: además de un collage como su imagen principal, el esquema de color en la sección central es como música para los ojos (? simplemente déjate llevar).
• Personalización: todo tiene una sensación cuidadosamente seleccionada en este sitio, lo que le da la sensación de que está allí mismo con Chinelle pasando el rato.
• Diseño de la galería: su galería "My Black Self" sigue un formato de cuadrícula simple a la izquierda con una vista más grande a la derecha, una forma fácil e intuitiva de explorar su trabajo.

Ejemplo de sitio web de cartera de desarrollador web: Brittany Chiang

Este es un ejemplo de sitio web de cartera estilo currículum de un desarrollador web llamado Brittany Chiang.

lo que lo hace genial

• Combinación de colores: el fondo oscuro y los colores un tanto neutros hacen que los elementos verdes realmente se destaquen, llamando la atención sobre el nombre de su empresa y su botón CTA.
• Título grande: el título grande en la página de inicio también sobresale aquí. Para los sitios web de negocios, este suele ser el nombre de la empresa o la propuesta de valor, pero la declaración simple aquí se siente a la marca para este sitio web de cartera.
• Sensación tridimensional: la página "Experiencia" utiliza elementos superpuestos y superposiciones transparentes para crear el efecto de múltiples dimensiones.
• Presentación de información: exhibir proyectos de desarrollo web no es tan fácil como el diseño o la fotografía donde puede tener una galería, pero la página de "Trabajo" de Brittany está súper organizada y es fácil de ver, a pesar de ser todo texto.

Ejemplo de sitio web de cartera de diseñador de interiores: Karim Rashid

Nuestro último sitio web de cartera es del prolífico diseñador Karim Rashid. Es una especie de híbrido de un sitio web de cartera y un sitio web de negocios.

lo que lo hace genial

• Fuente grande: el retrato único, el tema negro/blanco/gris, la copia mínima y las imágenes del trabajo de Karim tienen una sensación tranquila, mientras que la fuente grande y los colores llamativos que aparecen al pasar el mouse son fuertes y claros, una yuxtaposición única que equilibra muy bien
• Parallax: la combinación de velocidades de desplazamiento da el efecto de que el sitio tiene múltiples dimensiones/capas, otra forma de divertirse con movimiento pero sin animación.
• La barra lateral disimulada: ¿Esa sección a la derecha que parece que tal vez te has alejado demasiado o estás viendo algunos problemas de capacidad de respuesta? Eso es lo que te hace comprometerte. Curioso, pasas el cursor sobre él y se expande lo suficiente como para mostrarte una flecha con "ver pr-" y luego se corta. Haces clic en esa flecha y boom, accedes a una nueva vista de una de sus colecciones. O tal vez su ojo se siente atraído por el botón de menú blanco que se destaca en el fondo atenuado. Haga clic en él y boom, elementos de menú masivos que le piden que haga clic.

Ejemplos de sitios web sin fines de lucro

Nuestro último grupo de ejemplos de sitios web son organizaciones sin fines de lucro. Notarás que a pesar de que son organizaciones sin fines de lucro, todavía están enfocadas en la conversión, donde la acción de conversión es donar.

Operación Ferrocarril Subterráneo

Cuando llega al sitio web de la Operación Ferrocarril Subterráneo, puede comprender de inmediato su mentalidad fuerte y clara, de tolerancia cero y de ir a cualquier extremo.

lo que lo hace genial

• Video poderoso: el fondo del video en la página de inicio lo lleva a través de una variedad de emociones. Desde niños bailando hasta policías esposando a una misión de montar a caballo, sientes inocencias, inspiración e indignación, todo a la vez.
• Acentos amarillos: no solo los gráficos amarillos se destacan sobre el fondo gris oscuro, sino que, debido a que las imágenes utilizadas en el sitio son muy reales y en las trincheras, no son de la mejor calidad. Los contornos amarillos de las imágenes ayudan a enmascarar esto y proporcionan un toque adicional de acción y emoción.
• Menú estilo botón: con un fondo visual tan ocupado, el uso de bloques sólidos como elementos de menú los hace fáciles de leer y hacer clic.

Fondo Internacional de Medios de Mujeres

International Women's Media Fund es otro ejemplo de sitio web sin fines de lucro rudo (en sus propias palabras) con imágenes poderosas y una copia sensata.

lo que lo hace genial

• Imágenes como botones: Debajo del carrusel de imágenes grande, hay una pequeña versión en miniatura de esa imagen debajo con texto sobre ella, creando el efecto de un botón de imagen.
• Botón de donación prominente: este es el CTA que verá en la mayoría de los sitios sin fines de lucro, y el cuadro rojo brillante en la parte superior derecha hace que sea fácil de detectar.
• Misión en el pie de página: en lugar de la típica lista de tintas en el pie de página, vemos botones sociales, información de contacto y su misión. Esto no es común, pero la idea de que aparezca sin importar en qué página del sitio estés le da una capa adicional de integridad.
• Palabras poderosas: en todo el sitio vemos elecciones de palabras poderosas, como " Desatamos el potencial de las mujeres periodistas como campeonas de la libertad de prensa" y "Conozca a los periodistas rudos que apoyamos".

Use estos ejemplos de sitios web para obtener ideas e inspiración

Los sitios web son obras de arte. Si bien la mayoría de las industrias tienen su propio estándar básico de cómo debe verse y funcionar un sitio web en ese nicho, usted tiene la libertad de lograr ese aspecto y funcionar de diferentes maneras. Y también es libre de adoptar ideas de otras industrias. Por lo tanto, use los ejemplos de sitios web en esta publicación para pensar y probar las muchas formas de dar la bienvenida a los visitantes, mostrar de lo que es capaz, dar lo mejor de sí y alcanzar sus objetivos comerciales.