| Link | released internally, also hosted on Github↗︎ |
| Role | creator (UI designer, developer) |
| Info | prototyped in Processing, developed in P5.js |
| User | Compass Creative Studio & Marketing Team |
Compass designers use the needle field as a texture to divide and delineate white space in a design. I developed the Needle Tool to streamline their design process. The tool generates a field of needles that are angled according to a set of design priniciples.
Use Case
The tool tip illustrates the primary design parameters. Many of these are controlled via sliders. The parameters were chosen to provide design flexibility while remaining true to the brand system.
I presented the idea for a parametric design tool to Compass' design team and developed an experimental prototype using Processing.
I explained the underlying algorithm to the design team during our weekly design crit. Hearing about their typical workflow in Adobe Illustrator yielded useful user stories and use cases. I later taught a workshop ↗︎ on this algorithm and computational approaches to design.
Certain prototyped interactions yielded visually interesting results but did not conform to the brand system. These findings informed the parameter set and ranges implemented in the final tool.
Needle Weight
Attraction
Needle Angle Animation
Compass Circle Animation
The final tool offers two different design modes— the needles can be angled towards a fixed focal point or arranged using a set of preset pattern algorithms.
The development process was shared on @compasscreates, Compass' design-oriented Instagram account used to generate interest in it's innovative design and marketing talent.
Exploring parametrized design & creative code ↗︎
Experimental needles ↗︎
The Topo Tool was concieved to create Compass's topo pattern. Compass designers used the topo pattern as a background texture that reflects Compass' way-finding nature, on which marketing content can be superimposed.
Use Case
I implemented the first prototype using 3-dimensional point map generated from perlin noise. Rendering the topo pattern as a point map, as oppossed to a set of line segments calculated by taking intersections along a noise-disturbed surface, allowed the sketch to run fast enough to demo and modify in real-time. The next step would be interpolating along the points in the map by layer, using curves to generate the topo pattern's smooth lines.
The prototype tool featured parameters that allow the user to modify the size of topology's surface, it's maximum amplitude, as well noise factor variables that contribute to it's shape in both the x and y direction. The user could also pause the animation to observe the static graphic at a point in time.
Unfortunately the topo pattern was discontinued as a brand element just as I began developing the prototype tool.
Business and brand strategies change quickly at a fast-paced startup. Nonetheless, I was happy to release at least one parametric design tool into the wild to make Compass designer's lives easier.
