Los mejores diseños de sitios web de 2021

Página 1 de 3: The Neverlands de Active Color

No todas las experiencias web necesitan ser innovadoras, visualmente impresionantes y estar llenas de sorpresas inesperadas. La mayoría de las veces, los visitantes de un sitio web solo quieren encontrar la información que buscan de forma rápida y sencilla.

Pero así como los atuendos más extravagantes en las pasarelas de moda pueden influir sutilmente en la ropa más ponible que se encuentra en la calle principal, vale la pena que los diseñadores web vigilen al menos la mitad de la creación de sitios web. Incluso aquellos que parecen demasiado llamativos pueden darle inspiración e ideas que puede incorporar, de diferentes maneras, en sus propios diseños.

Con eso en mente, miramos hacia atrás en los diseños que sentimos realmente empujados al sobre. Estos sitios no solo cumplen con el trabajo básico de brindar a los visitantes lo que buscan, sin complicaciones, sino que también reconsideran cómo un sitio web puede verse y funcionar, de manera fresca, inventiva y original.



01. El País de Nunca Jamás de Active Color

Página de inicio de Neverlands

La navegación se basa en un barco mágico.(Crédito de la imagen: Active Color)

Cuando visita un sitio web que promociona un lugar de vida nocturna, espera algo llamativo, ruidoso, colorido y probablemente un poco chillón. Pero Los nunca jamás , Hogar de dos de los lugares de vida nocturna más sofisticados de Los Ángeles, The Edison y Clifton’s Republic, quería proyectar algo con un poco más de gusto. Entonces se dirigieron a Color activo , que diseñó para ellos un sitio web que no es nada común.

Basado en sus animaciones de ilustraciones personalizadas pintadas a mano por Shannon Stamey , es realmente una belleza. Charlamos con el fundador y director creativo Damjan Krajacic para descubrir cómo lo hicieron.

¿Cómo conseguiste este inusual concierto?

Hemos estado trabajando con el cliente y propietario de The Neverlands, Andrew Meieran, desde que abrieron el primer lugar en el centro de Los Ángeles. El Edison es verdaderamente un lugar nocturno espectacular, construido en el subsuelo del histórico edificio de LA Higgins, y preserva los generadores de energía y los elementos industriales de la planta de energía que marcó el nuevo futuro de DTLA.

Posteriormente, trabajamos en varios proyectos más con el mismo cliente, incluido el sitio web de Clifton’s Republic. Cuando comenzó este proyecto, ya estábamos muy inmersos en la marca y los espacios, así como bastante cerca del cliente y su estilo excepcional, visionario y excéntrico.

Captura de pantalla del sitio de Neverlands que muestra a un hombre en bicicleta por el cielo nocturno

El concepto de Active Color cambió hacia un enfoque de diseño ilustrativo pintado a mano personalizado y páginas de destino interactivas impulsadas por paralaje(Crédito de la imagen: Active Color)

¿Cuál fue el escrito?

El cliente siempre tuvo una visión fantástica de cómo traducir estos espacios visionarios a un mundo digital. Querían crear un sentido de aventura, curiosidad, un escape de lo ordinario a un mundo infantil de fantasía. Este proyecto fue en gran medida un esfuerzo creativo colaborativo con el cliente, durante un largo período de más de dos años. A pesar de que el concepto general se mantuvo prácticamente igual a lo largo del tiempo, las ideas sobre cómo ponerlo en práctica evolucionaron continuamente y, a menudo, nos adentramos en detalles minuciosos sobre ilustraciones o tipos específicos de movimiento o obras de arte.

Si bien solemos tener un proceso mucho más claro, estratégico y definido, en este caso decidimos dejar que el carácter artístico del proyecto nos guíe de muchas formas. Dado que el cliente es extremadamente creativo y artístico, no veíamos otra forma de poder completar el proyecto con éxito. A veces, tienes que cambiar las reglas para crear algo nuevo e inesperado.

Captura de pantalla del sitio de Neverlands que muestra a una mujer en un árbol sosteniendo una luz a un búho

El tono es divertido y fantástico.(Crédito de la imagen: Active Color)

¿Cuáles fueron tus inspiraciones visuales?

Tanto el concepto como los colores del sitio web se inspiraron principalmente en los impresionantes interiores de Clifton's Republic y The Edison, que son literalmente estos mundos fantásticos en los que puedes sumergirte. Aunque Clifton's se compone de siete lugares distintos dentro del mismo edificio de 5 pisos. , hay una calidez subyacente en cada espacio, y los cálidos tonos bronce, cobre y oro penetran en los sentidos. Queríamos ampliar este esquema de color para que fuera un poco más apropiado para cada lugar o página de destino, por lo que ampliamos la paleta de colores para incluir azules pastel, verde azulado y una variedad de otros colores.

Parte de la paleta de colores se inspiró claramente en las ilustraciones pintadas a mano, y doblamos la página para que coincida. Otras veces, ajustamos los tonos y colores de las ilustraciones para que todas se mezclen y se adapten a un estilo más cohesivo.

¿Quién hizo las ilustraciones?

Las ilustraciones son obra de Shannon Stamey, encargada por el cliente. Junto con el cliente y Stamey, conceptualizamos las pantallas de aterrizaje y las ilustraciones, que fueron ejecutadas a la perfección por Stamey. Lo que no pudimos conseguir pintado a mano, pudimos encontrarlo en imágenes de archivo o en archivos de dominio público. El cliente Andrew Meieran es un historiador, con un conocimiento increíble y una pasión por el arte de la época, por lo que fue fundamental para encontrar y decidir sobre muchos de los elementos.

Captura de pantalla del sitio de Neverlands que muestra bocetos dibujados con líneas

Active Color trabajó al revés para hacer que la tipografía coincida con el arte.(Crédito de la imagen: Active Color)

¿Cómo te acercaste a la tipografía?

Este fue un equilibrio de practicidad y azar. No teníamos un sistema de identidad visual con el que trabajar aquí, ni un estilo o logotipo predefinidos, por lo que trabajamos al revés para encontrar las fuentes que coinciden con la obra de arte. Queríamos que las cosas se sintieran humanas, naturales y utilizables, pero al mismo tiempo un poco mágicas en nuestras elecciones.

¿Qué tecnologías usaste para construir el sitio?

Usamos una instalación personalizada de WordPress para alimentar el back-end. El sitio web tiene un código completamente personalizado en la interfaz con una gran cantidad de JavaScript y CSS personalizados. Modificamos el fantástico script de paralaje de código abierto de Matthew Wagerfield como motor principal detrás del movimiento de la página de destino. También creamos muchas otras funciones personalizadas que ocurren en las páginas de lugares como The Edison, Clifton's Republic y Pacific Seas a medida que los usuarios se desplazan, lo que hace que parezca que desciende a la ciudad, por el dosel de los árboles o en el océano.

El mayor desafío fue, con mucho, cómo crear una experiencia de navegador fluida con tantos PNG transparentes moviéndose en movimiento de paralaje. Se dedicó mucho tiempo a la optimización de imágenes y scripts para poder llevarlo a cabo en varios navegadores.

Captura de pantalla del sitio de The Neverlands que muestra una selección de cartas fantásticas

Los recursos visuales o las ilustraciones faltantes se obtuvieron a través de imágenes de archivo y se manipularon artísticamente para que coincida con el estilo y el concepto del sitio web.(Crédito de la imagen: Active Color)

Las transiciones son maravillosamente efectivas: ¿cómo las creaste?

¡Con muchos ajustes y experimentación! Estábamos algo limitados en poder solicitar ilustraciones adicionales según fuera necesario, por lo que a veces teníamos que unir las piezas, extender la obra de arte, manipularla. Una vez que tuvimos los activos listos, nos tomamos mucho tiempo para ajustar las transiciones para que el flujo sea fluido. Fue un buen equilibrio entre lo que queríamos visualmente y lo que era técnicamente factible en cada navegador con un poder de renderizado limitado.

¿Cómo lograste que el sitio cantara en dispositivos móviles?

La traducción al móvil fue bastante fluida. Este proyecto era pesado para computadoras de escritorio, pero sabíamos que las páginas de destino funcionarían bien en dispositivos móviles porque así es como las concebimos desde el principio. Sabíamos que debido a los tamaños de imagen mucho más reducidos, las transiciones serán suaves. Finalmente, no puede tener demasiadas cosas en una pantalla pequeña, por lo que pudimos recortar las cosas y simplificar la interfaz de usuario. Todo esto condujo a una experiencia móvil más fluida y sencilla.

Selección de ilustraciones de fantasía

Diseño detallado y storyboard de varias páginas de destino y activos.(Crédito de la imagen: Active Color)

¿Cuál es la lección más importante que aprendiste?

Esa paciencia es una virtud. Ciertamente teníamos que tener mucho en este proyecto. La cuestión es que para hacer algo bien hay que estar dispuesto a dedicar tiempo y esfuerzo, y eso requiere paciencia.

En el lado técnico y artístico de las cosas, el proyecto nos recordó cuánto amamos los sitios listos para usar, que se remontan a los sitios construidos en flash que adoramos, en una época en que Internet era mucho más variado y poco convencional. Sin embargo, con los recientes desarrollos de navegadores, nuevamente somos capaces de lograr experiencias excepcionales que no caen en una caja, y estamos entusiasmados de utilizar esta conciencia para guiarnos en proyectos futuros. Tuvimos la suerte de que en este caso estuviéramos trabajando con un cliente muy singular que aprecia la estética y la originalidad.

Página siguiente: Descubra el diseño de sitio web número dos de 2020 hasta ahora ...

Creative Bloq creó este contenido como parte de una asociación paga con Adobe Stock. El contenido de este artículo es completamente independiente y refleja únicamente la opinión editorial de Creative Bloq.

  • 1
  • 2
  • 3

Página actual: The Neverlands de Active Color

Siguiente página The Mill por Studio Output