Digital Tool
Using math to discover design ideas
Patterns are a part of our design language that we advocated to utilize as a part of the rebrand. It has many applications in retail, packaging, venting on our hardware, and texture for digital experiences. As we explored patterns, I noticed that it was time consuming, always a few pixels off, and lacked the ability for playful discovery. To try to solve this problem, I partnered with experience design engineers to build a web tool that would allow us to create patterns using math and code.
Inspiration
To design the tool, I referenced the patterns that we had explored with teams. We had conducted a few workshops with brand and product teams to see how patterns could cross from digital, print, and physical forms. My goal was to translate those ideas into a set of properties that the designer can manipulate and get real time visual responses.
Through looking at the work and how we were designing our patterns, I found that they fell into two categories. Based on those categories I was able to then associate properties that would inform the input controls.
Shape
All of our patterns are built with rectangles. The shapes vary through manipulating their corners and size. The tool allows the designer to create the shapes which become the objects inside of the pattern.
Properties
- Radius: Ability to manipulate corners independently
- Height: Adjust vertical height
- Width: Adjust horizontal width
Pattern
Patterns are a defined tile size that fits inside of a grid. The grid controls how tight or loose the shapes are to each other. Inspired by how noise and seeds work in Cinema 4D, our patterns have randomization to manipulate scale, rotation, and color
Properties
- Shapes: Shapes included in pattern
- Canvas: Size of tile area
- Padding: Space between shapes
- Scale: Randomizes scale of shapes selected in grid
- Rotation: Variance threshold of shape rotation in 90º
- Color: Color variation
Design
Once the categories and properties were defined and agreed upon with my engineers, I started to layout the design. The app is pretty simple and has really 3 core components to it.
Header
The header allows the designer to toggle between building shapes and patterns. It also has a global setting for light and dark mode.
Property panel
The panel allows the designers to manipulate the shapes and patterns based on the defined properties.
Canvas
The canvas is where the pattern is visualized. The designer has simple controls to adjust features of the canvas.
Panel Designs
Build
The tool was built through a grass root effort outside of our core responsibilities so time was precious. Our engineers were able to leverage our design system to build out most of the front end, opening most of the time to focus on harder technical challenges. In a sprint, we were able to complete an MVP version of the tool that designers could try out.
