The Loom Menu: San Jose Museum of Quilts & Textiles
SJMQT · Web Design · Interaction Design
A hamburger icon rebuilt as a tiny loom, and a menu that weaves itself together.
View the redesignROLE
Solo Designer and Developer
TEAM
1 Designer (Me)
TIMELINE
1 day
WHAT I DID
The San Jose Museum of Quilts & Textiles homepage shows off its collection through still images, but the header gives away nothing about the craft behind them. I kept this redesign inside the header and rebuilt the menu around weaving itself, the technique every quilt in the building starts with. The rest of the page stayed out of scope.
CONTEXT
Directed research, one of 25 website redesigns completed over the semester
TOOLS
HTML, CSS, JavaScript
Left, the museum's current menu. Right, the redesigned woven menu.
THE CHANGE
The hamburger icon was the starting point. Its three stripes are now crossed by vertical ribbons, six strips in total that slide continuously over and under each other on a short loop, so the icon reads as a loom mid-weave instead of a stack of lines.
Opening the menu fills the screen with a grid of cloth ribbons, some running horizontally, some vertically. The eight ribbon colors are sampled from the hero quilt image on the museum's homepage, so the menu's palette comes straight from the collection. Each ribbon slides in from alternating sides, and at every crossing the ribbons are cut into segments that pass over and under their neighbors, which makes the grid read as one interlaced surface rather than layers stacked on top of each other. Choosing a section re-weaves the grid into that section's pages, and closing the menu runs the weave in reverse until the ribbons slide back out.
REFLECTION
The hardest part was the crossings. Getting each ribbon segmented and ordered so it passes over one ribbon and under the next, consistently across the whole grid, is what sells the illusion of real weaving, and it took the most iteration to get right. If I kept going, I would carry the weave language past the menu into other parts of the page, and start working real textile textures into the design alongside it.