Atomic Tessellator: Diseñando Modelación de Materiales

Atomic Tessellator logo
Atomic Tessellator logo
Atomic Tessellator logo

Equipo

Jader, Tania, Omar

Industria

Science

Año

2025

Servicios

Website, Brand Identity & Visual System

Atomic Tessellator está revolucionando una plataforma de diseño de materiales a múltiples escalas, permitiendo a los investigadores simular la combinación de diferentes átomos para crear y probar materiales. Cuando se acercaron a nosotros, tenían un producto increíble pero carecían de una identidad de marca y presencia web que igualara su sofisticación. 

Nuestro objetivo fue adoptar un enfoque científico, creando y probando diferentes materiales para desarrollar una marca de clase mundial que pudiera articular su compleja propuesta de valor con claridad y confianza. Establecimos un lenguaje visual único que integró autenticidad científica directamente en la experiencia de la marca.

Creando prototipos para el futuro

Al principio del proceso, exploramos diferentes materiales para transmitir un enfoque moderno. Algunos de los materiales incluían metal, vidrio, líquidos e incluso cristales raros. El diseño del sitio web incorporó estas inspiraciones materiales, utilizando colores de tema neutros tanto para modos claros como oscuros.

El prototipado fue divertido para el equipo mientras identificábamos diferentes escenarios en los que herramientas como Spline (para objetos 3D), Unicorn (para gráficos WebGL) y la codificación de ambientes para prototipos de p5js eran perfectas para explorar diferentes maneras de lograr un diseño de alta gama.

Al principio del proceso, exploramos diferentes materiales para transmitir un enfoque moderno. Algunos de los materiales incluían metal, vidrio, líquidos e incluso cristales raros. El diseño del sitio web incorporó estas inspiraciones materiales, utilizando colores de tema neutros tanto para modos claros como oscuros.

El prototipado fue divertido para el equipo mientras identificábamos diferentes escenarios en los que herramientas como Spline (para objetos 3D), Unicorn (para gráficos WebGL) y la codificación de ambientes para prototipos de p5js eran perfectas para explorar diferentes maneras de lograr un diseño de alta gama.

Al principio del proceso, exploramos diferentes materiales para transmitir un enfoque moderno. Algunos de los materiales incluían metal, vidrio, líquidos e incluso cristales raros. El diseño del sitio web incorporó estas inspiraciones materiales, utilizando colores de tema neutros tanto para modos claros como oscuros.

El prototipado fue divertido para el equipo mientras identificábamos diferentes escenarios en los que herramientas como Spline (para objetos 3D), Unicorn (para gráficos WebGL) y la codificación de ambientes para prototipos de p5js eran perfectas para explorar diferentes maneras de lograr un diseño de alta gama.

Una marca que se amplifica a misma

Para dar vida a la complejidad de la marca, aprovechamos la dimensionalidad y el movimiento. Al integrar un modelo 3D existente del amplituhedro (una fascinante figura 4D), creamos una presencia dinámica en la web donde el ícono gira sobre su eje, deteniéndose al pasar el cursor para invitar a la interacción del usuario. 

La autenticidad se añadió aún más al colocar un mapa de calor interactivo, una poderosa visualización derivada de datos cristalográficos reales, en una única sección de alto impacto del sitio. Este enfoque centrado, combinado con un colorido acento amarillo vibrante para el modo oscuro, garantiza que la identidad visual de la marca no solo sea impactante sino que también esté genuinamente arraigada en la ciencia que representa.

Para dar vida a la complejidad de la marca, aprovechamos la dimensionalidad y el movimiento. Al integrar un modelo 3D existente del amplituhedro (una fascinante figura 4D), creamos una presencia dinámica en la web donde el ícono gira sobre su eje, deteniéndose al pasar el cursor para invitar a la interacción del usuario. 

La autenticidad se añadió aún más al colocar un mapa de calor interactivo, una poderosa visualización derivada de datos cristalográficos reales, en una única sección de alto impacto del sitio. Este enfoque centrado, combinado con un colorido acento amarillo vibrante para el modo oscuro, garantiza que la identidad visual de la marca no solo sea impactante sino que también esté genuinamente arraigada en la ciencia que representa.

Para dar vida a la complejidad de la marca, aprovechamos la dimensionalidad y el movimiento. Al integrar un modelo 3D existente del amplituhedro (una fascinante figura 4D), creamos una presencia dinámica en la web donde el ícono gira sobre su eje, deteniéndose al pasar el cursor para invitar a la interacción del usuario. 

La autenticidad se añadió aún más al colocar un mapa de calor interactivo, una poderosa visualización derivada de datos cristalográficos reales, en una única sección de alto impacto del sitio. Este enfoque centrado, combinado con un colorido acento amarillo vibrante para el modo oscuro, garantiza que la identidad visual de la marca no solo sea impactante sino que también esté genuinamente arraigada en la ciencia que representa.

Tuvimos tres semanas para renovar nuestro sitio web antes de un evento para inversores. Omar, Jader, Tania y el resto del equipo de Shortcut trabajaron arduamente y entregaron un producto pulido con una gran comunicación. ¡Recomendamos encarecidamente sus servicios para cualquier startup que busque un equipo de diseño rápido y de alto nivel!


– Daniel Lee, Operaciones en Atomic Tessellator

Autenticidad ciéntifica, Diseño atractivo

El resultado es una identidad de marca que traduce la complejidad de la ciencia de materiales en un lenguaje visual cautivador. A través de un sistema cohesivo de motivos científicos auténticos, Atomic Tessellator ahora cuenta con una marca que la posiciona como un líder accesible y visionario en su campo.

take

the

shortcut.

2025 · Toma el Atajo, S.A.P.I. DE C.V.

take

the shortcut.

2025 · Toma el Atajo, S.A.P.I. DE C.V.

take

the

shortcut.

2025 · Toma el Atajo, S.A.P.I. DE C.V.