Estudio no lineal | Artes de la comunicación

Respuestas de Quintin Lodge, diseñador y cofundador, y Mario Sanchez Maselli, desarrollador y cofundador de Non-Linear Studio.

Fondo: «El propósito de nuestro sitio es mostrar nuestro trabajo, procesos y capacidades», dice Quintin Lodge. «El público objetivo de nuestro sitio es cualquier empresa que quiera hacer algo único e innovador en el espacio digital».

El corazón del diseño: «Yo diría que el estilo de diseño principal se puede resumir como un brutalismo de marca con cerebro», dice Lodge. «En términos de características únicas, diría que sería la estética del sitio junto con la ejecución sutil y cuidadosa de esos elementos de diseño».

Desafíos: «Diseñar para uno mismo tiende a ser siempre una de las cosas más difíciles», dice Lodge. “Probablemente pasamos por quince iteraciones de nuestro sitio antes de finalmente encontrar una estética. El otro aspecto desafiante fue encontrar tiempo entre el trabajo del cliente para construir el sitio».

Limitaciones de tiempo: «Terminó tardando más de un año en poner en funcionamiento el sitio, ya que terminamos dando prioridad al trabajo del cliente varias veces durante el proyecto», recuerda Lodge. «Como tal, lanzamos una versión WIP del sitio hace unos seis meses, pero esperamos anunciar el lanzamiento hasta que pudiéramos agregar algo de pulido».

Funciones especiales de navegación: «La sección de trabajo fue probablemente la única característica especial de navegación, ya que queríamos algo no lineal», dice Lodge. «Entonces, se nos ocurrió un carrusel vertical infinito».

Tecnología: «El sitio se creó utilizando Sanity CMS y 11ty y se implementó en Netlify», explica Mario Sánchez Maselli. “Esta configuración nos permite crear un sitio estático y súper rápido manteniendo la funcionalidad del CMS sin cabeza. Sanity v2 fortalece el backend, dándonos control total sobre el contenido.

«El front-end funciona con 11ty, GSAP, Taxi.js y three.js», continúa Sánchez Maselli. «Desarrollar la parte frontal fue un poco más complejo ya que pasamos por varios diseños antes de llegar a la versión final. Jugué con varios diseños para los proyectos, la sección de héroes y la estética general, incluso si algunos no llegaron al sitio final.

«Una de las secciones más interesantes es la del héroe», añade Sánchez Maselli. “Usamos el lienzo como textura para la animación del texto del héroe y GSAP para voltear el texto. Las secciones de proyectos tanto en la página de inicio como en la de trabajo utilizan WebGL y también son algunas de mis favoritas. Hicimos varias pruebas con ellos. Al principio, no estábamos seguros de cómo conseguir un efecto pixelado único, pero a Quintin se le ocurrió un concepto en After Effects utilizando un mapa de desplazamiento. A partir de ahí, pude recrearlo en three.js, lo que resultó en un efecto final fluido”.

Características técnicas especiales: «Como es nuestro propio portafolio, experimentamos más de lo habitual y probamos diferentes formas de crear efectos pixelados», dice Sánchez Maselli. “Usamos sombreadores y pixelamos la imagen creando una cuadrícula en la textura, pero cuando intentamos devolver la imagen a su estado original, el efecto no se sintió muy suave. Entonces, seguimos experimentando hasta que encontramos una buena solución con un mapa de desplazamiento. El mapa de desplazamiento es una textura hecha de rectángulos aleatorios que importamos y luego usamos ruido y posicionamiento aleatorio para distorsionar. De esta manera conseguimos que los rectángulos se desplacen de la textura de forma diferente para cada proyecto.»

Buscar Proyectos

Haga clic en una imagen para ver más de cada proyecto.