Nubank Brand System
Nubank Brand System
During 2019/2020 we worked on Nubank's Brand System and the update of our brand assets. Part of this project is a system of guidelines and templates for animation.
The main challenge was to build a system that could guarantee consistency and scalability for a team that went from 20 to 100 designers of all disciplines (UX, graphic, motion, writers) in less than one year without limiting the creative possibilities and individual explorations for our designers.
The main challenge was to build a system that could guarantee consistency and scalability for a team that went from 20 to 100 designers of all disciplines (UX, graphic, motion, writers) in less than one year without limiting the creative possibilities and individual explorations for our designers.
A project made with:
Paulo Assunção (Brand designer)
Duda Di Pietro (Design Manager)
Maltchique (Photographer)
Paulo Assunção (Brand designer)
Duda Di Pietro (Design Manager)
Maltchique (Photographer)
Motion Brand
In order to bring unity to the way we use animations at Nubank we established some motion patterns split into categories. We aimed to build these behaviors so that they "anchor" the animation in a way that it looks like Nubank's while still leaving space for motion designers and videomakers to create motion that is new and creative.
Timing
The first category we added to our Motion Brand has guidelines on acceleration curves, suggested durations based on the distance being covered by elements and other tips to grant a good flow in animation.
Choreography
The choreography section of the motion system would show guidelines for relationship among multiple elements, trajectories on the screen, spaciality etc.
One motion pattern we adopted in our choreography was the inverted symmetry motion. We decided to reinforce one of the features of our logo which is the fact that its an ambigram, with the "n" and the "u" inverted in a symmetrical way.
Addtionally, we knew that the sign for Nubank in Libras (the brazilian sign language used by people with auditory disorders) is a symmetrically inverted motion with both hands. So we decided to incorporate this motion pattern for our logo, transitions and other animations.
Animated Assets
We created standard behaviors for most of our design assets like typography, photos, icons, calls to action etc. The Brand System would let motion designers make their decisions for animation based on the narrative they're working on but would advise them to stick with the branded behaviors every time a design asset didn't need to express a very specific idea or was entirely functional.
Templates
Since we were creating standard behaviors for visual elements we took the chance to create part of them as customizable templates inside After Effects.
Although this is a presentation focused in the Motion aspect of our Brand System, animations were just a part of it and the one I worked on in more depth. But we we also worked on every other aspect of our brand identity such as typography, photography, grid, iconography and layouts.
Grid generating tool
After defining the framework for the grid in our layouts we used javascript to create a grid generating tool. The designers in our team used it by defining the specific kind of grid they needed and then downloading it to whatever application they were using
XRevolution
XRevolution
XRevolution is an event for customer experience
professionals where the get together to learn and develop their skills. When you learn new things, you give a new shape to your life and career. So, the concept of the event was: XRevolution: Reshape.
A project made with:
Paulo Assunção (Brand designer)
Isaac Serruya (Copywriter)
Paulo Assunção (Brand designer)
Isaac Serruya (Copywriter)
For this identity we decided to go with the idea of a pattern of shapes with progressive transformations, with the following logic:
1. A simple shape is iterated in a horizontal row with progressive changes in one or two of its vertices (left).
2. The horizontal row is then replicated vertically. At this time, changes are made in the vertexes that were untouched in the first iteration (right).
While this method allowed us to create all sorts of interesting patterns, it takes time to do it manually an it's very hard to imagine the final result once you start iterating the shapes. So we decided to use processing to write a simple tool that lets us create the patterns in real time and then export an svg file. If you're using a computer can play with the tool by using with the sliders below:
The cool thing about having this tool is that it let us have much richer explorations in a really short period of time. We also developed a grid system. That makes the layout as intuitive as our tool. All the shapes go in the midle of the layout and the information is always sticked to the closest edge.
HOFE - Motion Brand
A project made with:
Cacá Barabás (Art Director)
Vitor Gurgel (Designer)
Otto (Software engineer)
House of Entertainment is a multicultural lab for artists and brands. Our main goal in this project was to represent HOFE's soul: a place that moves through different artistic areas, expands people’s voices and creates connection with fans.
HOFE is all about artist's voices being amplified and spread. Music and visuals that manifest physically as waves in the air and have the power to ressonate with people.
We used motion to convey this idea by making visual elements scale from a central point while distorting through a ripple pattern. This behavior represents ideas being materialized and expanding into waves .
Estudi.o - Motion Brand
A project made with:
Cacá Barabás (Art Director)
Estudi.o is a creative boutique, a production house and an agency representing artists. It' creative, dynamic, curious, vibrant, spontaneous Such a different place needs a different visual id.
Nubank Design Team
Nubank Design Team
A project made with Vitor Gurgel
Visual identity for the Design Team at Nubank (2018/19)
