El secreto detrás del diseño de sitios web creativos

(Aline Kesting) (2 de septiembre de 2020)

Hay muchas cosas en el diseño de sitios web, pero Hay una cosa que creemos que es muy importante cuando se trata de sitios creativos: una estrecha colaboración entre diseñadores y desarrolladores.

Después de lanzar un nuevo 14islands.com hace un par de semanas, nos preguntaron cómo creamos las animaciones flotantes onduladas. Si bien es de esperar que el código mágico detrás de estas interacciones llegue en una futura publicación de blog (¡estad atentos!), Quiero centrarme en cómo diseñamos estas animaciones. Es posible que se sorprenda.

Cambie su proceso al revés

Al iniciar un nuevo proyecto, es fácil caer en algún tipo de proceso en cascada. Pasas de la investigación de usuarios al diseño y terminas con prototipos en los que se puede hacer clic. Tiene puntos de control de equipo a lo largo del camino, pero la colaboración de diseño y desarrollo no suele comenzar hasta que los prototipos ya están hechos. Si bien este proceso funciona para ciertos tipos de proyectos, especialmente aquellos con más estrategia, está lejos de ser el más creativo.

Cuando comenzamos nuestro nuevo proceso de diseño de sitios web, decidimos abordarlo de la misma manera ( nos acercamos a nuestros viernes creativos), en los que los experimentos a menudo se inspiran en nuevas tecnologías emocionantes. Eso significa que los desarrolladores creativos pueden ser los que tengan una idea, y los diseñadores se unen para ayudar a construir un concepto en torno a ella. De esa manera, diseñamos y codificamos juntos, desde el principio, a tiempo completo, todo el tiempo. 🚀

Diseñar conceptos de movimiento en código

El beneficio de este proceso de diseño compartido es bastante sencillo. A menudo, los diseñadores imaginamos un diseño de píxeles perfectos y dejamos que los desarrolladores descubran cómo imitar mejor ese diseño con código. Pero especialmente cuando se trata de sitios web creativos, lo que imaginamos puede que no siempre sea factible, que no tenga el mismo aspecto o que simplemente se convierta en una experiencia de alto rendimiento. Entonces, después de pasar una buena cantidad de tiempo puliendo sus diseños minimalistas, se queda sin tiempo y elige la solución que funcione mejor.

Si tan solo pudiéramos comprender todas las oportunidades de WebGL, Three.js y CSS animaciones en lugar de ver sus limitaciones, podríamos traspasar los límites y evolucionar nuestros conceptos de diseño de acuerdo con la tecnología. Cuando los desarrolladores creativos forman parte del proceso de diseño, eso es exactamente lo que sucede. Desafían nuestras formas de pensar y aportan soluciones únicas a la mesa en las que nunca pensaríamos por nuestra cuenta. Y hacer coincidir ese conocimiento con un concepto sólido conduce a la magia. ✨

Cuando se trata de nuestro sitio web, pasamos semanas explorando, eliminando ideas y empezando desde cero. Con el tiempo, definimos juntos hacia dónde queríamos ir y terminamos con una interacción que nos gustó. Una vez que tuvimos un concepto de movimiento, todo lo demás encajó.

Estas son algunas de nuestras primeras exploraciones:

Exploraciones de movimiento en código

Cómo lo hicimos

No es de extrañar, nuestro concepto de movimiento final se inspiró en islas. Lo que define a una isla es el paisaje cambiante del agua que da forma a la tierra. Cuando lo piensas, un sitio web no tiene la forma del agua, sino que reacciona constantemente a los desplazamientos, los clics, los desplazamientos y otros malos tratos.

Exploramos la idea de la distorsión del agua para cada interacción del usuario, pero la queríamos para mantenerse muy minimalista, sin efectos innecesarios que roben la atención del contenido real.

El concepto de movimiento es el siguiente: mira el sitio y obtienes la quietud de las islas tropicales con agua cristalina. Pero comienza a desplazarte e interactuar, ahí es donde entran las ondas. 🌊.

Movimiento final del sitio web en 14islands.com

Como diseñador, no tenía idea de que fuera posible conseguirlo. Transformación de forma fluida de los bordes de las miniaturas, entonces, ¿cómo se me ocurrió ese concepto de diseño? Comenzamos el proceso juntos, trabajamos juntos hacia un concepto y colaboramos todos los días hasta el lanzamiento. Y al ser parte de todo el proceso, nuestro equipo de desarrollo tuvo un papel crucial en el diseño de la experiencia final.

Por supuesto, diseñar en código no significa que debas detener ningún tipo de diseño de movimiento durante tu proceso. Existen fantásticas herramientas de creación de prototipos, como Figma y Flinto, y son excelentes para probar flujos y microinteracciones. Cuando se trata de creatividad pura, After Effects funciona mejor para nosotros porque nos da mucha libertad.Incluso si no es un experto en movimiento, es útil dejar su archivo de diseño por un momento y explorar ideas de alto nivel en movimiento. Obtendrá resultados más tangibles para descartar o seguir adelante y le dará a su equipo de desarrollo una base desde la que comenzar a iterar.

Todo lo que los diseñadores pueden aprender de la tecnología

Aquí va : Involucre a un desarrollador creativo a tiempo completo durante el proceso de diseño. Desafíese unos a otros, explore el movimiento en paralelo e impulse las interacciones más allá hasta llegar a su concepto de movimiento. Solo una vez que esté en su lugar, concéntrese en los diseños detallados de su sitio web. El concepto no solo inspirará muchas de sus próximas decisiones de diseño, sino que también ayudará a desarrollar la experiencia de manera más consistente repitiendo el movimiento.

En 14islands tenemos la suerte de tener un equipo muy unido de diseñadores y desarrolladores trabajando juntos todos los días y estamos mejorando constantemente la forma en que colaboramos. Hasta ahora ha dado sus frutos y ha aportado mucha creatividad a nuestro proceso de diseño. Mantener la curiosidad sobre cómo se construyen las cosas y desafiarnos unos a otros tanto en el diseño como en el código nos ayuda a crear experiencias de usuario que son funcionales y minimalistas, pero que también tienen ese toque extra de personalidad.

Espero que esta haya sido una lectura útil, háganos saber si tiene alguna pregunta o sugerencia. Hasta la próxima ✌️