Inspírate para la creación de páginas web profesionales
De vez en cuando, me encuentro con un sitio web que realmente me atrae. Entonces, encontré 32 mejores diseños de páginas web para mostrárselos. Estos sitios traspasan los límites de lo que se sabe que es posible en la web. Ya sea por la estética del diseño, la usabilidad, la interactividad, el diseño de sonido o el valor que brinda el sitio, cada uno es una obra maestra en su respectiva industria y algo en lo que inspirarse.
No es sorprendente que existan muchas organizaciones para destacar estos páginas y las contribuciones que hacen a la web. Para ayudar a descubrir algunos de los diseños más inspiradores, reuní a 32 ganadores de premios que se han abierto camino a través de varias organizaciones de premios clave, incluidos Awwwards, UX Awards, The Webby Awards, SiteInspire, Best Website Gallery y FWA.
Debajo de esta lista, también encontré seis páginas web más cuyos diseños de inicio son simplemente geniales y vale la pena aprender de ellos.
Mientras navega por la lista, sepa que cada sitio sobresale a su manera y busca cumplir un propósito único. Si bien un sitio puede ser un excelente ejemplo de diseño visual, otro puede ser un excelente ejemplo de interactividad. Esto significa que no todos estos páginas pueden ser «máquinas de conversión» o ideas de planos que pueda copiar fácilmente en su sitio.
Más bien, son excelentes formas de inspirarse en los diseños de páginas web y ver el marketing de vanguardia que está sucediendo en los diferentes rincones de la web.
¿Qué son las páginas web creativas?
Las páginas web creativas son sitios web que utilizan una variedad de elementos de diseño y técnicas para atraer y mantener la atención de los visitantes. Estas páginas no siguen necesariamente una estructura o diseño convencional, sino que buscan ser innovadoras y únicas en su apariencia y funcionalidad.
Algunas características comunes de las páginas web creativas incluyen el uso de animaciones, ilustraciones, tipografías creativas, colores vibrantes, diseños asimétricos y una navegación no convencional. También pueden incorporar interacciones de usuario, como efectos de desplazamiento, transiciones y elementos de desplazamiento.
El objetivo de las páginas web creativas es capturar la atención del usuario y hacer que el sitio se destaque de otros sitios web más convencionales. Pueden ser especialmente efectivas para empresas y marcas que buscan destacar en un mercado competitivo y hacer una impresión duradera en sus visitantes.
¿Cómo hacer una página web creativa?
Hacer una página web creativa implica un proceso de diseño cuidadoso y una atención detallada a los elementos visuales y de contenido que se utilizan. Aquí hay algunos pasos para crear una página web creativa:
- Definir la audiencia y los objetivos: Es importante tener claro quiénes son los usuarios a los que se dirige la página web y qué acciones se esperan que realicen. Esto ayudará a guiar el proceso de diseño y asegurarse de que la página cumpla con sus objetivos.
- Diseñar una estructura visual: Una página web creativa debe tener una apariencia visual atractiva e innovadora. Se pueden utilizar técnicas como diseños asimétricos, ilustraciones, colores vibrantes y tipografías creativas para destacar y llamar la atención de los usuarios.
- Añadir interactividad: Las interacciones de usuario pueden ayudar a mejorar la experiencia del usuario y hacer que la página web sea más atractiva. Se pueden utilizar efectos de desplazamiento, transiciones y elementos de desplazamiento para mejorar la interactividad.
- Crear un contenido atractivo: El contenido es fundamental para cualquier página web, incluyendo las páginas web creativas. Se debe crear contenido atractivo y relevante que refleje la marca y los objetivos de la página.
- Optimizar para SEO y dispositivos móviles: Es importante asegurarse de que la página web sea fácilmente accesible en dispositivos móviles y que esté optimizada para motores de búsqueda para asegurar que se pueda encontrar en línea.
Hermosos páginas web galardonados
Y los premios son para …
Los mejores diseños de páginas web profesionales de 2014 a 2015
1. Virgin America
Premio: Evolución más significativa de la industria, Premios UX 2014
En un mundo donde se sabe que los sitios web de las aerolíneas están plagados de importantes problemas de usabilidad, Virgin America tiene uno de los mejores páginas web que impulsa la usabilidad, la accesibilidad y el diseño receptivo. De hecho, ha sido nombrado como el primer sitio web de aerolínea verdaderamente receptivo, un nuevo precedente en la industria.
2. Alimentar
Premio: Sitio del día (6/6/2015), Awwwards
Feed no solo es un concepto interesante, sino que también tiene una ejecución sorprendente que desafía nuestra comprensión de lo que es posible en la web. A través de una combinación creativa de animación y video, el sitio sumerge al usuario en una experiencia muy atractiva. Como sitio atípico, también contiene varios elementos de usabilidad únicos, incluida una navegación que funciona como una barra de progreso de desplazamiento.
3. ETQ
Premio: Sitio del día (19/5/2015), Awwwards
ETQ adopta un enfoque muy minimalista del comercio electrónico con su sitio simplificado con imágenes grandes y atractivas de su producto. Los fondos simples, planos y basados en colores acompañados de una tipografía fuerte ayudan a mantener el enfoque en exactamente lo que el usuario vino a ver: zapatos.
4. Mikiya Kobayashi
Premio: Sitio del día (4/7/2015), Awwwards
Mikiya es un diseñador de productos con un portafolio minimalista que muestra su trabajo a través de fotografías contundentes y animaciones sutiles. Su sitio completo fue creado originalmente en japonés y luego traducido al inglés, lo que ayudó a demostrar la escalabilidad internacional de su diseño.
5. La historia del cambio climático
Premio: Sitio del día (23/6/2015), Awwwards
Siga los pasos de Luc Jacquet mientras Wild-Touch lo lleva a lo largo de este viaje visual y educativo sobre la historia del cambio climático global . Una mezcla de medios históricos y animaciones únicas ayudan a contar la historia.
6. Beagle
Premio: Sitio del día (19/4/2015), Galería al mejor sitio web
Beagle hace un trabajo excepcional al contar visual y progresivamente la historia de su producto de una manera simple y fácil de digerir. Este es un gran desafío para muchas empresas emergentes, especialmente cuando están introduciendo nuevos conceptos en los mercados existentes. La gente quiere saber: «¿Cuál es su producto? ¿Cómo funciona? ¿Por qué me importa?» Beagle responde a todas esas preguntas al mismo tiempo que muestra su producto y obliga al usuario a comprar. Además, es uno de los pocos sitios que realmente implementó el «secuestro de desplazamiento» correctamente.
7. Revista tejida
Premio: Sitio del día (4/4/2015), Galería al mejor sitio web
Woven es una publicación en línea que celebra a artistas, artesanos y creadores por igual. Para mí, representan una confirmación de que las publicaciones pueden (y deben) tener sitios hermosos y atractivos con contenido fácil de leer. Libre de distracciones como ventanas emergentes y anuncios molestos, este sitio trata sobre la experiencia del contenido en sí.
8. Frijol de JOHO
Premio: FWA del día (7/8/2015), Premios al sitio web favorito
El sitio web de JOHO’s Bean tiene imágenes increíbles, interactividad, narración de historias, diseño visual y, sobre todo, ingeniería de sonido. Todos estos se unen para crear un sitio atractivo, emocional y atractivo que cuenta la historia del viaje de un grano de café.
9. Mundo de SWISS
Premio: Mejor interfaz de usuario, Premios Webby 2015
¿Otra aerolínea? ¡¿Lo que está sucediendo?! Sí, las aerolíneas SWISS construyeron un sitio increíblemente inmersivo que cuenta su historia y describe lo que es volar con ellos, y simplemente hicieron un trabajo demasiado bueno para ser ignorado. Los gráficos y las animaciones potentes introducen al usuario en diferentes secciones del sitio que están repletas de información más allá del discurso habitual de ventas y marketing que es tan común en la actualidad.
Los mejores diseños de páginas web profesionales de 2016
10. Guardianes de la selva tropical
Premio: Mejor sitio web de activismo, Premios Webby 2016
Rainforest Guardians se convirtió en uno de los sitios web sin fines de lucro más inmersivos de 2016. Con el objetivo de crear conciencia sobre la deforestación, el sitio permite a los usuarios «visitar» las diversas aldeas, nativos y vías fluviales que componen la selva amazónica. El sitio coloca la interactividad en el centro de su experiencia de usuario, una elección inteligente si su objetivo es lograr que las personas se conecten con su causa y se conviertan en voluntarios.
Destacado por The Webby Awards
11. Ropa deportiva de protesta
Premio: Sitio del año (2016), Awwwards
The Awwwards llama a Protest Sportswear un «libro de estilo de compra», y eso es exactamente lo que es este sitio. Como proveedor de ropa, este sitio web ha reinventado la forma en que comercializan su producto: en lugar de promover prendas de vestir, Protest Sportswear promueve «looks». Esto hace que el producto de la compañía sea la parte más atractiva del sitio web en sí, utilizando un collage de estilos para diseñar una página de inicio que cambia tan a menudo como lo hacen los estilos de sus clientes.
12. El gremio de maestros
Premio: Mejor sitio web de la asociación, Premios Webby 2016
Teacher’s Guild es una comunidad profesional de educadores cuyo sitio web publica contenido que aborda los desafíos más críticos de la educación en la actualidad. Lo que hace que este sitio web sea galardonado es cómo equilibra diversos tipos de contenido (programas, soluciones, enfoques y colaboraciones) sin abrumar a sus visitantes. No solo sus imágenes de fondo están ubicadas de manera prominente, sino que también usan espacios en blanco para enfatizar las llamadas a la acción escritas en el centro, como se muestra en la captura de pantalla a continuación.
Destacado por The Webby Awards
13. Dentro de Abbey Road
Premio: Mejor sitio web musical, Premios Webby 2016
Google lo sacó del parque con este sitio altamente interactivo , que permite a los usuarios ingresar a Abbey Road Studios. El diseño de sonido brillante, la mecánica de navegación y los elementos visuales combinados con el «estilo de Google» habitual ayudan a atraer visitantes a esta propiedad web bien hecha.
Los mejores diseños de páginas web profesionales de 2017
14. Simplemente chocolate
Premio: Sitio del año (2017), Awwwards
Te dará un antojo de chocolate con solo mirar este sitio web y, en cierto modo, ese es el sitio web de Simply Chocolate funcionando según lo diseñado.
Este apetitoso sitio web es el de un fabricante de chocolate de Dinamarca llamado Simply Chocolate. Su sitio web utiliza una variedad de colores (y nombres de productos creativos) para promocionar cada barra de chocolate. Y a medida que se desplaza de un producto a otro, todos parecen seguir siendo consistentes en la marca. La apariencia tridimensional de cada barra de chocolate te hace sentir que puedes tomarla de la pantalla de tu computadora, mientras que el CTA «Agregar a la caja» en la parte superior izquierda está idealmente ubicado para que los usuarios seleccionen los productos que desean mientras navegan.
15. AHORA
Premio: Mejor blog / sitio web cultural, 2017 Webby Awards
Nowness es quizás el video blog de colaboración colectiva más genial de Internet en la actualidad. Eso fue un bocado … ¿qué significa todo eso?
La naturaleza » colaborativa » de NOWNESS es parte de lo que la convierte en una ganadora de premios. Esto significa que la mayor parte de su contenido proviene de creativos independientes, una forma cada vez más popular para que las empresas publiquen contenido. NOWNESS es también un blog de video, lo que significa que todo el contenido de su blog está en formato de video. Juntas, estas cualidades ayudan a hacer de Nowness un centro cautivador para las historias que las marcas de todo el mundo se esfuerzan por contar.
16. Citrix: la nueva fuerza laboral móvil
Premio: Sitio del día (23/11/2017), Galería al mejor sitio web
Este sitio web, dedicado a la asociación de Red Bull con Citrix, una empresa de software basada en la nube, es asombroso.
The New Mobile Workforce , un sitio propiedad de Citrix, utiliza fotografías panorámicas para mostrar a los visitantes cómo Citrix está apoyando el nuevo auto de carreras de Red Bull Racing. Incluso si no eres un entusiasta de las carreras de autos, las ingeniosas animaciones del sitio web para explicar una tecnología automotriz complicada son difíciles de ignorar.
Los mejores diseños de páginas web profesionales de 2018
17. crypton.trading
Premio: Sitio del día (4/3/2018), Awwwards
Conoce a crypton.trading, tu robot contable.
Crypton.trading es un centro comercial de criptomonedas como Bitcoin, que utiliza inteligencia artificial para predecir cambios en el valor de una moneda e identificar oportunidades clave de compra y venta. El sitio web recibió una calificación alta por su desarrollo y diseño, ya que gradualmente explica más métodos del desarrollador a medida que los visitantes se desplazan hacia abajo.
Este sitio web galardonado hace que los visitantes expertos en tecnología se sientan como en casa en el momento en que el saludo de Crypton aparece en la página de inicio, una letra a la vez.
18. Suroeste: corazón de viajes
Premio: Mejor Diseño Visual – Estético, Premios Webby 2018
Cuando Southwest Airlines quiso demostrar que sus clientes eran «más que un simple signo de dólar», la compañía creó un sitio web cuyo diseño se ensambló utilizando las formas de las rutas de vuelo de sus clientes.
El sitio web, llamado Heart of Travel , incluso permite a los visitantes crear su propia obra de arte a partir de un viaje que podrían planear realizar. De esta forma, el sitio web de Southwest es producto de sus pasajeros más leales.
19. Reductora
Premio: Mejor sitio web de humor, Premios Webby 2018
No es tan difícil hacer reír a alguien en Internet; gran parte de lo que leemos y consumimos en línea está destinado a ser entretenido. Pero es difícil hacerlo de manera consistente para una gran audiencia. Reductress es una revista satírica cuyos titulares y experiencia de lectura general son de primer nivel en el departamento de humor, lo que hace que el sitio web en sí sea una propiedad de calidad.
20. Desbordamiento
Premio: Sitio del día (20/3/2018), Galería al mejor sitio web
Overflow es una herramienta de diseño que permite a las personas y las empresas crear diagramas de flujo de sus ideas similares a una historia para que sean más fáciles de entender para los demás. Además de ser solo un buen servicio, el sitio web de Overflow practica lo que predica: junto con los vibrantes botones rojos de llamada a la acción para descargar la herramienta, este sitio web promociona su producto de la mejor manera que sabe: utilizando un diagrama de flujo.
El sitio web entrega este diagrama de flujo en forma de video. Y aunque los videos incrustados pueden parecer bastante torpes si están en medio de los otros elementos de diseño de un sitio web, Overflow’s está perfectamente ubicado y es exactamente lo que le gustaría ver al aterrizar en el sitio por primera vez.
Destacado por Best Website Gallery
21. Museo Frans Hals
Premio: Sitio del año (2018), Awwwards
Puede ser difícil para un museo, cuya marca se basa en una variedad de obras de arte increíbles, reunir todo en un sitio web coherente. Eso es lo que hace que el sitio web del Museo Frans Hals sea tan impresionante.
Ubicado en los Países Bajos, este museo ha creado un sitio web que utiliza una combinación de elementos de diseño digital y sus propias exhibiciones. Esta mezcla ayuda a los visitantes a comprender lo que verán, cuándo pueden verlo y dónde más pueden probar lo que este museo tiene para ofrecer. Hablando de esto último, el museo promueve su cuenta de Instagram directamente en su página de inicio, un movimiento brillante para un museo que busca expandir su audiencia a través de sus canales en línea.
Diseños profesionales premiados de 2019
22. 1917: En las trincheras
Premio: Mejor sitio web del día de Awwwards
Este sitio web , realizado para promocionar la película 1917, te permite caminar por las trincheras y realizar la misma misión que hicieron los personajes de la película. También puede ver sus mapas o acceder a otras herramientas.
Este es un gran ejemplo de un sitio que. fue más allá con la interactividad, así como un sitio que aprovecha su propio contenido y una historia preescrita para comercializar su película. Este sitio web ganó el premio Sitio del día por Awwwards, que permite a los diseñadores votar y nominar los grandes sitios web que ven a diario.
23. The Octopus: Un blog de diseño de IDEO
Premio: Blog de negocios / Sitio web 2019 Premio Webby
IDEO, una empresa de diseño global, ganó el premio Business Blog / Website 2019 Webby por su blog Octopus, y por una buena razón. El blog presenta un elegante dibujo de Octopus en blanco y negro como diseño de la página de inicio, y usa amarillo, negro y blanco para crear un tema cohesivo a medida que se desplaza.
Si pasa el cursor sobre una publicación de blog, el título se resalta en amarillo, y si pasa el mouse sobre una imagen, la imagen se dirige hacia usted, dos pequeñas características que marcan una gran diferencia en términos de crear una experiencia de usuario única y atractiva.
24. Tribu nómada
Premio: nominación al sitio del año de Awwwards
Este sitio, que fue nominado para el sitio del año de Awwards , es uno de los sitios más atractivos que he visto. La página de inicio comienza inmediatamente a reproducir un video impresionante que muestra a un hombre caminando por un desierto, seguido de hermosas escenas de paisajes y texto como «¿Tienes la suerte de llamarte a ti mismo un aventurero?».
El texto en todo el sitio web es divertido, con colores rosas, naranjas y amarillos, y la página de inicio tiene un diseño lógico, con CTA colocados en todo ese rango en niveles de compromiso, desde «Leer más» hasta «Ver ahora» y, finalmente, «Descargar el Aplicación «. En última instancia, el sitio web está bellamente diseñado con una gran atención a los detalles y cuenta una historia convincente en todo momento.
25. Diana Danieli
Premio: Webby 2019
Este sitio ganador de Webby 2019 muestra imágenes de arte y arquitectura con alto contraste o gran exposición. Como visitante del sitio web, puede hacer clic y arrastrar el mouse para cambiar las fotos y variaciones. Cada imagen muestra una obra que destaca al artista propietario del sitio web.
26.George Nakashima Carpinteros
Premio: Webby 2019
Este sitio web de carpintería enfatiza la naturaleza y el cuidado del oficio de carpintería. Es esencialmente una presentación de diapositivas de hermosas imágenes forestales y agrícolas. A medida que aparece una nueva imagen en la pantalla, también aparece una nueva cita relacionada con la madera o los árboles. Esto es increíblemente relajante para el visitante y demuestra que los carpinteros reconocen la belleza de los árboles y el medio ambiente. Este sitio web también ganó un Webbie en 2019 .
Otros diseños de páginas web profesionales geniales
27. Mínimos
Minimums adopta un enfoque muy audaz en la forma en que muestran su contenido, aprovechando un diseño de sitio web basado en cuadrículas, tipografía grande e imágenes de alta calidad y ancho completo. Su sitio sirve como un buen ejemplo de cómo ejecutar correctamente una estructura de cuadrícula sin dejar de mantener una buena jerarquía visual en el diseño.
28. MovieMark
MovieMark es una agencia de marketing en crecimiento y socio de HubSpot , cuyo sitio web está cubierto de pies a cabeza en el servicio que ofrece: narración digital. Ubicada en Colombia, la agencia hace del video un enfoque central de su marca, por lo que es lógico que el sitio web de MovieMark siga este tema. Y, oh, qué agradables visualmente son los videos en su sitio web …
29. Guillaume Tomasi
Como fotógrafo en Montreal, Guillaume Tomasi ha creado un portafolio que realmente se adapta para albergar su fotografía única e inspiradora. Su estilo fotográfico surrealista se yuxtapone a su diseño de portafolio simple, plano, vacío y minimalista que pone todo el foco en el trabajo en sí.
La navegación de su serie única, junto con las presentaciones de obras inspiradas en la galería de arte y las interacciones de desplazamiento perfectas, producen una experiencia que recuerda a la de una galería real.
30 . El distrito
Esta agencia de branding se toma en serio sus imágenes, y debería hacerlo: maneja todos los canales de medios para sus clientes. El sitio web del Distrito , por sí solo, es un viaje a través de algunas de las obras de arte y fotografías más hermosas que jamás haya visto.
Estos mosaicos provocativos cambian rápidamente a medida que explora el sitio web, y cuanto más extravagantes parecen, más interesado se vuelve en conocer su trabajo anterior.
31. Tej Chauhan
Tej Chauhan ha convertido la obra de arte impresionista en un modelo de negocio con este intrigante sitio web. Cada imagen en la página de inicio de este desarrollador de productos se desliza para cubrir la imagen anterior, ofreciendo poco contexto alrededor del objeto que ahora ve frente a usted.
¿Pero no es esa falta de contexto exactamente lo que te hace querer aprender más? El lema, «Recuerdos del futuro cercano», sugiere que estos objetos son parte de su línea de productos y una oportunidad para que usted introduzca estos objetos innovadores en su vida.
32. Amanda Martocchio Arquitectura
Es posible que una empresa de arquitectura no se especialice en desarrollo web, pero su sitio web debe demostrar su compromiso con el diseño visualmente agradable. Amanda Martocchio se lo tomó en serio con este magnífico sitio web.
No es ningún secreto que Amanda Martocchio Architecture ama su trabajo: cada imagen en la página de inicio de su sitio web es una foto encantadora de las casas que diseña la empresa. El sitio web etiqueta cada casa por la que se desplaza con el tipo de diseño que se pretendía, junto con numerosos ángulos para cada edificio.
Ideas de diseños de páginas web
Ahora que ha visto una serie de plataformas galardonadas y bellamente diseñadas, tenga en cuenta estas ideas potenciales cuando cree la suya propia.
- Considere las formas en que puede hacer que su sitio web sea interactivo, como el ejemplo de 1917.
- Cree un sitio web que enfatice la experiencia móvil, incluso cuando todavía tiene una buena UX en los escritorios.
- Cree un sitio web que cuente una historia sobre su marca con fotos, texto o video.
- Si no puede crear un sitio muy interactivo, considere dibujar en los ojos con un sitio que presente una presentación de diapositivas de sus fotos.
- Asegúrese de que sus llamados a la acción sean fáciles de ver y anime a los visitantes a continuar explorando su sitio.
- Mantenga limpia la navegación. Asegúrese de que sus visitantes siempre sepan cómo volver a la página de inicio.
- Integre sus sitios de redes sociales a través de botones de inserción social, para que los visitantes del sitio puedan seguirlo fácilmente en sus diversos canales sociales.
- Mantenga cada una de sus páginas web con un diseño uniforme, incluidos la fuente, los colores, las imágenes y los mensajes.
- Pruebe la usabilidad de su sitio web con un mapa de calor , que le mostrará en qué páginas web es más probable que reboten sus visitantes.
- Incluya un chat en vivo o un chatbot para brindarles a los visitantes la opción de interactuar con usted directamente en su sitio web si prefieren el chat en vivo a las llamadas telefónicas. El chat en vivo puede automatizar funciones para sus representantes de ventas y servicio y crear una mejor experiencia de comunicación para el cliente.
- Obtenga un certificado SSL para asegurarse de que su sitio web sea seguro. SSL es parte del algoritmo de clasificación de búsqueda de Google , por lo que un certificado SSL puede ayudarlo a obtener una clasificación más alta en la búsqueda.
