Una hoja geométrica como punto de partida del sistema.
← Volver a proyectos01 / ContextoDiseño generativo
Una identidad flexible para una marca que no necesitaba repetir siempre la misma composición.
Soap Lavender Up parte de una línea de jabones artesanales y plantea un lenguaje visual adaptable: reconocible en conjunto, variable en cada soporte.
- Mi rol
- Programé el patrón generativo en p5.js
- Definí las reglas del sistema: unidad, retícula y paleta
- Apliqué el patrón al packaging, la bolsa y el neceser
- Construí una portada web animada con interacción de ratón y teclado
- Contexto
- Proyecto académico · Programación para las artes y el diseño
- Herramientas
- p5.js, Illustrator, Photoshop
- Resultado
- Identidad generativa aplicada a packaging
Coherencia
sin repetición.
Fue el reto final de la asignatura de Programación para las artes y el diseño: construir, con bucles anidados y aleatoriedad en p5.js, un patrón generativo aplicado al packaging de un producto propio. Elegí un jabón artesanal como caso de aplicación real.
Decidí no diseñar una única gráfica cerrada, sino un sistema: quería comprobar cómo una misma lógica visual podía producir composiciones distintas sin perder una dirección reconocible.
Construí esa lógica sobre tres decisiones propias: una unidad base (una hoja vegetal), una retícula fija que ordena la composición y una paleta limitada que mantiene la coherencia entre variaciones.
Una retícula fija que ordena las composiciones.
Color, opacidad y orientación dentro de una misma lógica visual.
03 / Sistema visual
Una regla.
Una regla.
Un sistema variable.
El módulo base se combina dentro de una retícula fija. El código cambia orientación, color y opacidad para generar nuevas composiciones sin perder estructura.
04 / Variables controladas
Lavanda
Lavanda
salvia
crema
La paleta mantiene la variación dentro de un territorio visual suave, natural y reconocible.
LavandaCalma#B6A0DC
Verde salviaNaturalidad#A0AFA0
Crema tierraSuavidad#FFDFD3
El sistema
marca el ritmo.
Usé la retícula para aportar orden, la hoja para introducir un gesto orgánico y limité la paleta para reducir el ruido visual.
Diseñé la variación como parte del sistema, no como un extra: cada aplicación cambia, pero sigue respondiendo a la misma lógica de código.
El código como herramienta de diseño.
Esta portada animada fue la segunda entrega del curso: reutilicé el mismo sistema visual para construir una interacción web con animación, ratón y teclado, en lugar de partir de cero.
square()Construye la hoja desde una forma geométrica simple.
random()Introduce variación en color, opacidad y orientación.
rotate()Permite que el módulo cambie sin perder su estructura.
Soap
Lavender
Up
Lavender
Up
Cuidado natural inspirado en geometría, calma y diseño artesanal.
Haz clic para cambiar de soporte
Un patrón
que cambia
según el soporte.
El encargo pedía aplicar el patrón al packaging del jabón. Fui más allá y lo extendí a la bolsa y al neceser para probar el sistema en más soportes.
08 / Mirando atrás
"Diseñar la regla, no solamente el resultado."
3 soportesEl mismo patrón generativo aplicado a packaging, bolsa y neceser sin perder coherencia.
Este proyecto me ayudó a entender la identidad visual como sistema: una estructura clara que puede adaptarse sin perder intención.
Volver a proyectos ↗