Studio Somon
Design Lovers Since The Big Bang
fragments.jpg

FRAGMENTS

FRAGMENTS

 

CONCEPT

We have never seen a product of mass customization in luxury cosmetics sector which is sometimes utilized by brands such as Absolut and Coca Cola to create distinct products for each and every consumer thus creating a special bond between the brand and its consumers by making them feel special and unique. That's why I wanted to create a fragrance brand which has a different package for each perfume bottle to make each of its customer feel unique. Using coding to create each gradient, I tried to achieve a beautiful and timeless design which has the DNA of Abstract Expressionism, one of my favorite art movements. Code gave me the possibility to create infinite number of images, each quite different from the other, yet all packages having the same visual language. A bold, big and strong wordmark complimented the gradient bars. Black package color helped to bring the wordmark and the gradient to the front, unifying the whole design.

I used Illustrator API to create generative gradients with selectively random colors. Then I picked random slices and used them on each bottle. I also picked the dominant color from each slice and used it on the cap. In a real production environment, the output from Illustrator will be directly connected to the printers.

 

I am very proud that this project is published on Packaging of The World, the popular design blog.

 

Here is the Illustrator Javascript code that generates the infinite gradients:

var width = 600;
var height = 4000;
var docPreset = new DocumentPreset();
docPreset.width = width;
docPreset.height = height;
docPreset.units = RulerUnits.Pixels;
docPreset.colorMode = DocumentColorSpace.RGB;
var doc = app.documents.addDocument("test", docPreset);
app.activeDocument = doc;
doc.defaultFilled = true;
var artLayer = doc.layers.add();
var numStripes = 200;
var minSegment = 3;
var maxSegment = 15;
var stripeHeight = height / numStripes;
var currOriginY = 0;
var gradientColor = new GradientColor();

for (i = 0; i < numStripes; i++) {
    createStripe();
    currOriginY += stripeHeight;
}

function createStripe() {
    var currOriginX = 0;
    var numSegments = Math.round((Math.random() * maxSegment) + minSegment);
    for (j = 0; j < numSegments; j++) {
        var remainingWidth = width - currOriginX;
        var randomWidth = 0;
        if (j < numSegments - 1) {
            randomWidth = Math.round(Math.random() * (remainingWidth / numSegments + (remainingWidth / 3)));
        } else {
            randomWidth = remainingWidth;
        }
        var rect = artLayer.pathItems.rectangle(currOriginY + stripeHeight, currOriginX, randomWidth, stripeHeight);
        rect.filled = true;
        rect.stroked = true;
        getGradientColor();
        rect.fillColor = gradientColor;
        currOriginX += randomWidth;
    }
}

function getGradientColor() {
    var gradientStartColor = new RGBColor();
    var gradientStopColor = new RGBColor();
    var newGradient = app.activeDocument.gradients.add();
    newGradient.type = GradientType.LINEAR;
    gradientColor = new GradientColor();
    gradientStartColor.red = Math.floor(Math.random() * 230);
    gradientStartColor.green = Math.floor(Math.random() * 120);
    gradientStartColor.blue = Math.floor(Math.random() * 230);
    gradientStopColor.red = Math.floor(Math.random() * 230);
    gradientStopColor.green = Math.floor(Math.random() * 120);
    gradientStopColor.blue = Math.floor(Math.random() * 240);
    newGradient.gradientStops[0].rampPoint = 0;
    newGradient.gradientStops[0].midPoint = 50;
    newGradient.gradientStops[0].color = gradientStartColor;
    newGradient.gradientStops[1].rampPoint = 100;
    newGradient.gradientStops[1].color = gradientStopColor;
    gradientColor.gradient = newGradient;
    gradientColor.angle = 90;
}
 
 

INSPIRATION

inspiration.jpg