Pentagram has designed a novel brand identity for Dashlane. It centers around a distinctive “Dashlane D” formed of dash-like shapes. As the identity will be applied in a wide range of media, we created a tool that helps graphic designers to generate patterns according to the direction Pentagram designed.
As the app launches, graphic designers are presented with a grid of rounded rects. There is a menu bar on the left that enables them to tweak the number of rows and columns, the size of the grid and the column offset. They can also manipulate the shape scale and rotation. The color of foreground and background can be chosen from a hand-picked color palette in the menu down below.
When finished, designers can export the generated pattern as an svg file. There is also an option to copy to clipboard and paste in Adobe Illustrator without losing quality.
We develop the app with Paper.js as it provides 2d shape transformation: translate, rotate and scale. We custom made a couple functions to imitate 3d effects such as rotating around Y axis. With the Progressive Web Application (PWA) technology, this app can be opened on any platform and can be downloaded to use in offline mode.
