Impulso
Logo & Visual Identity
Projeto
General description
Develop a brand identity for a music festival in Caldas da Rainha. The goal was to explore techniques that connected with the festival and its audience, creating an identity adaptable to any material and format, both print and digital. The strategy and development of all materials were the sole responsibility of the designer.
Process
Start by exploring what was previously done for this festival, and understand what can be done differently and what can resonate with the audience.
Solution
A flexible system was created. The brand can mutate and spread across the support. It was built using p5.js, resulting in a brand that can change according to its needs.
Some references
Before starting, we looked at what had already been done. We gathered references from different projects to understand which directions were worth exploring and, just as importantly, what we wanted to stay away from.
(there is much more references missing from this section, but I don't want to make it too long)
(there is much more references missing from this section, but I don't want to make it too long)
Initial concept
The starting point was the word "Impulso" itself. Researching its different meanings led us to the physics formula for impulse: I = F · Δt; an impulse equals the force applied to an object over a period of time. We decided to bring this logic into the festival: in this context, the force would be the audience. This concept became the foundation for every decision that followed.
I=F⋅Δt - Where I is the impulse, F is the applied force and Δt is the time interval.
I=F⋅Δt - Where I is the impulse, F is the applied force and Δt is the time interval.
Sketches
With the concept in place, we started sketching to figure out what could come out of it. We wanted something with movement and energy, an identity that wasn't static, that could react and mutate. This is where the idea of exploring generative art through P5.js came up: a tool that would let us build something truly dynamic.
Formula testing
At the same time, we ran some tests with the impulse formula to see if it could play a visual role in the identity. We explored the idea of building a pattern from the formula to use alongside the logo, an idea that ended up being dropped, but helped clarify the direction.
First tests in P5.js
In the first P5.js tests, we drew the word IMPULSO as an outline and made it react to the mouse cursor. This allowed us to generate different versions from the same base, and helped us understand what a reactive identity could actually look like.
Perlin noise P5.js
Explorámos também o Perlin noise, um algoritmo que gera padrões orgânicos e fluidos, como forma de criar um movimento mais natural na palavra. O objetivo era afastar-nos de algo mecânico e aproximarmo-nos de algo que parecesse vivo.
(clicar na palavra IMPULSO para ativar o efeito)
We also explored Perlin noise, an algorithm that generates organic, fluid patterns, as a way to bring a more natural kind of movement to the word. The goal was to move away from something mechanical and get closer to something that felt alive.
(clicar na palavra IMPULSO para ativar o efeito)
We also explored Perlin noise, an algorithm that generates organic, fluid patterns, as a way to bring a more natural kind of movement to the word. The goal was to move away from something mechanical and get closer to something that felt alive.
New approach in P5.js
The early P5.js results weren't quite hitting what we were looking for — the idea of movement and "mutation" was there, but the results didn't have the impact we wanted. So we decided to try a different approach.
We started exploring the idea of sound waves and thinking about how to bring that into the identity.
This is where the first tests began — trying to bring the movement of a sound wave into the word Impulso. We broke the word horizontally and created a wave-like motion, something that felt close to sound waves. We also gave more weight to the typography to create a stronger visual impact.
Continuation of previous tests
These examples follow the same logic as the previous ones, but we wanted more noise and more movement. Still wasn't quite what we were after — it still felt too static and "rectangular", but they were necessary steps to understand what was missing.
P5.js — Without horizontal cut
We tried removing the horizontal split and adding more depth to the wave movements. Some interesting moments started to emerge, but we quickly realised the horizontal division was an essential feature, not something we could leave out.
P5.js — Combination of versions
We combined the two previous versions and ran new tests. Sometimes the word would split into four horizontal lines, visually interesting, but already drifting from what we had in mind. The noise being generated, though, was getting much closer to what we were looking for.
Almost there
At this stage, we knew what we wanted, we just had to find the right values to balance noise, depth, and movement without making the word too abstract. Due to export limitations with SVG, we scaled up the canvas and exported as a high-res PNG, then edited the shapes in Illustrator to convert them into vectors.
Final logo result
After a lot of testing, we got to the final version: a wave with smooth movement, a noise that simulates the vertical bars of sound waves, and a logo that could be adapted to any size and material. The logo is always in motion, each export is unique, but it always keeps its identity. These are the six main static versions to be used across the graphic materials.
This was the P5.js animation that led to the final logo versions.
Other tests
After the logo, we tested the same base for other materials. The goal was to understand how the identity could mutate into other elements while staying coherent with what had been built.
Combining the formula with the logo
We tested bringing the original Impulso concept directly into the logo, the formula would always accompany it across versions, subtly present but never too prominent. This idea was later dropped due to constraints with the word.
Other logo tests
Side tests to explore different ways of using the logo at different stages (warm-up, pre-release, etc.).
Initial poster tests
These were the first poster tests, colour tests with textures, and then combining those textures with photos. We wanted movement and noise. This ended up being scrapped; it just felt a bit too generic.
These tests follow the same logic as the first ones, trying to bring movement and texture. In the first 3 examples, we took long-exposure photos using Christmas lights, a guitar we had at home, and traced the guitar's outline with those glow sticks you snap to activate. We took a few shots and, for the poster, we used the lines we already had as a mask to create this effect.
We noticed it was getting too dark and lifeless, so we decided to add more colour, as you can see in the last example.
We noticed it was getting too dark and lifeless, so we decided to add more colour, as you can see in the last example.
P5.js tests with textures created for the identity
We went back to doing some tests in P5.js to figure out if what we'd generated for the logo could work as a texture for the poster and other materials.
We ran a bunch of tests with shapes, combining them with different colours and gradients. We could generate patterns and more abstract shapes that could be useful, but it still wasn't quite what we were after.
Exploration of layouts and colors
We kept going with the previous explorations, this time pulling back on the colours.
Layout tests — combining shapes with content
To make sense of what we had, we started combining the texture explorations with the rest of the poster's content, just to see what could work.
We quickly realised that legibility was a problem.
New exploration of colors and shapes
We went back to exploring and combining textures and colours. This time, we were looking for less density, something that would let us work with the poster's content without killing the legibility. At first we tried other colour combinations, pastels, and so on, but we ended up cutting back on the number of colours to clean up the composition.
Final combinations
These were some of the final combinations to be used across the graphic materials.
Examples of textures and shapes used
Since we had loads of textures generated in P5.js, we could use them on their own or combine them to create the desired composition, always keeping some randomness in the mix.
Typographic tests
At this stage, we went back to testing different typefaces for the poster. We wanted to try out a few and figure out which one worked best with our elements. It also had to be free to use.
Selected typeface
The chosen typeface was Poppins, its rounded shapes create a nice contrast against the noise of the textures. Plus, it is free, and comes with a lot of weights, which gives us plenty of flexibility.
Poppins Black
a A
a b c A B C 1 2 3
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 (!”#$%&/@£§€=?)
Poppins Thin
a A
a b c A B C 1 2 3
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 (!”#$%&/@£§€=?)
Color
In terms of colours, we went with yellow, red, black and white/beige. The white/beige and yellow would come from the paper itself.
We also had gold as an option, a colour saved for more special use, just for the Warm-up or a pre-release (we did some tests with gold paper).
Poster combination test
We tried creating a set of posters that, when placed side by side, would spell out the word IMPULSO, mutated by the identity we'd built. And when shown on their own, they'd read as something more abstract.
Horizontal poster test
A few horizontal versions built on the same base as the previous examples.
More tests
First tests with the new textures and colours. The names would come in a single block of text, in a colour that contrasts with the background and the textures.
Other horizontal versions
Some tests for the horizontal poster format.
Paper and color test
3-colour poster.
Poster test with overlapping shapes where the colours, when layered, create an inverted version of the original colour.
This only really worked in digital, due to the RGB spectrum. It would've been possible with spot colours, but that was out of budget.
Fold-out program. Paper tests
We tested different paper weights and colours. Since this is a folded programme, we had to be careful about which paper to use to make sure the ink wouldn't crack when folded.
We also did a test with gold paper, where the printed ink took on a metallic finish.
A5 flyer tests
Just like the other examples, we tested different paper weights and colours, as well as metallic papers (gold).
Metallic paper
We wanted to try something completely different for the festival's Warm-up and Teaser, so we decided to test printing on metallic papers, gold and silver, just to see what it would look like.
We really liked the result and what the paper brought to it, the metallic, mirror-like finish was something interesting that reacted to light, both during the day and at night.
We did spot one small issue: the ink scratches pretty easily. You can see some of those scratches in these examples.
More horizontal layout tests (paper and color)
A few more layout tests with different paper colours and weights. More colourful examples for the horizontal poster format.
More vertical layout tests (paper and color)
More layout tests for the vertical poster format, with different paper colours and weights to see how the shapes and text reacted with the colour and the paper.
These tests are already getting close to the intended result.
Compilation of selected printed materials
This is a small compilation of some of the final material tests for the festival, you can see different formats, papers and colours. Lots of ideas were scrapped, but plenty of them ended up sparking the final results.
Stickers
The identity extended into stickers.
Pins
The identity extended into pins.
Fold-out program
Festival programme and map.
The photos further below show the printed version. When folded, it fits perfectly in a pocket, designed to be easy to carry and stay out of the way.
Warm-up / Pré-release
Besides the main posters, we did some tests for pre-releases that would serve to build up to the festival announcement. In some examples, the formula's textures were used.
The idea was to release things progressively, building up to the official poster. First dropping the "F" poster, then "=", "Δt", and finally "IMPULSO".
Program photographs
Some photos of the printed programme.
We made one version with gold paper as the base colour and another in white. The goal was a practical programme that could be easily tucked away without sacrificing the readability of the content.
Impulso tote-bags
We wanted a different kind of bag, something more practical and durable than the usual.
Both bags are made from a thicker, sturdier fabric, and due to production limitations, the textures were heat-pressed (screen printing became an option later on).
We created a simpler bag with an inner pocket, and a second bag that's reversible, meaning you can flip it and use it with the white side or the red side.
Final poster versions
Final versions for the festival poster.
These versions would be used at the same time, the first two being the white background and the red background versions.
Identity evolution
Here’s a quick look at how the Impulso poster identity evolved. There’s a huge difference between the first and the last version. A result we’re really happy with, especially when we look back at where it all started.
The project
This was a challenging project, with a lot of different materials to develop. It was a long process, full of explorations and tests, and that’s exactly what made the final result richer. The process was never linear: we kept discovering along the way what we wanted to explore, and the early stages helped us figure that out. A lot of the ideas we had didn’t work out, or while testing them, new ways of developing the project started to emerge. On this one, we took a risk by trying to build the foundations through P5.js, a tool we didn’t know that well, but a lot of the unexpected results ended up shaping the final outcome.
