Jocelyn Zhao

Graphic Designer

WORK︎︎︎

Fabric Museum

Brand Identity, Generative Design,
Interactive Installation, Web Design, Publication

Fluid Dimensions

Thesis, Publication, Extensive Research,
Generative Deisgn, VR Installation


Alpina Dolomites Rebrand

Brand Identity, Publication,
Web Design, Experiential Installation

BAOBAB Collection Rebrand

Packaging Design, Brand Identity,
Retail Environment


ODD Hair Care

Packaging Design, Brand Identity






Fabric Museum


Brand Identity, Generative Design, Publication,
Interactive Installation, Web Design
Thanks to:
Brad Bartlett, Roy Tatum,
Ivan Cruz, Miles Mazzie


Fabric Museum stands at the intersection of contemporary art and innovative material exploration, specializing in collaborations with artists who employ textiles and unconventional materials. 

Drawing inspiration from the revolutionary Jacquard loom—which connects traditional weaving techniques with computer code—the museum's journey mirrors this integration. From a foundation in fabric, to an expansion into diverse media types, the refreshed identity bridges the tangible with the digital. This is exemplified in the use of creative coding for a variable logo system, a versatile logo generator tool, and an immersive interactive installation.



︎︎︎Logo System
A variable logo system and a custom typeface were developed to bridge traditional weaving methods with modern technologies.


︎︎︎F Generator
Made with Processing, the F Generator software enables users to craft, customize, and output their own version of the museum’s logo.

The software's core functionality encompasses two distinct modes: Layering and Animation. The Layering mode offers a way to combine up to three layers of Fs, each with eleven sets of grid units and seven color palettes, allowing users to experiment with a multitude of combinations. Animation mode provides four sets of shapes mapped onto ASCII characters, enabling users to timestamp and export individual frames. Creative coding serves as a beacon of innovation, drawing the eyes of the tech and art sectors and enhancing the museum's recognition.

︎︎︎Posters
Patterns and textures were incorporated into graphic elements, the punch card language and the weaving effect were applied to the poster design. The poster series expanded my graphic language as I experimented with pattern-making, dynamic scale, layering, messaging, data visualization, and ASCII art. Combined the subdued hues of natural fibers with vivid, digitally-inspired colors to reflect the museum's dynamic range of media.

Punchcard language represents information using a series of punched holes on cards, with each character, like a letter or number, encoded with a unique pattern of holes along a vertical line on the card.


︎︎︎Generative Typewriter Tool
Utilizing Processing, I developed a sound-reactive typewriter and pattern-making tool where letters are transformed uniquely based on diverse sound frequencies, ensuring no two visual outputs are ever the same.


︎︎︎Interactive Installation
TextLoom is an interactive installation held at Fabric Museum. Connecting traditional weaving techniques with computer programming, the installation allows users to generate text through the process of weaving.

The tabletop tray is designed to resemble a traditional weaving shuttle, integral to carrying threads across a loom. Linked with Arduino code, users must emulate the shuttle's action to transmit messages.

TEXT comes from textile, the installation fosters a hands-on experience with the weaving process and deepens audience engagement. By embodying the evolution of programming from the Jacquard Loom to contemporary computing, the experience makes the connection between time-honored craft and cutting-edge technology.


︎︎︎Website
By adapting the museum catalog’s content, the punchcard language, and the graphic system into an interactive digital format, experimental UI designs were used for the website.


︎︎︎Social Media


︎︎︎Museum Catalog
The museum catalog's cover replicates a punch card's actual dimensions. It employs techniques such as layering, die-cutting, and texture variation to signify transitions in media type.
︎︎︎Front Cover
︎︎︎Back Cover


︎︎︎Façade Entrance


︎︎︎Way-finding


︎︎︎Stationery
The stationery textured paper enhanced brand recognition and create a more tangible experience.


︎︎︎Brand Touchpoint