Café Commuter.

Nordstrom's Pop-In: Vans

An off the wall website

I had the pleasure to work on the Vans website for the Nordstrom Pop-In shop. It only lived for a short while but you can see a demo of the functionality in the video above.

I made heavy use of <svg></svg>. The shoe-wall was achieved by stitching together hexagonal <svg>.

<svg> had 3 benefits:

  1. The designers could provide small JPG assets of each shoe instead of PNGs with transparency. That drastically cut down on the network load.
  2. By clipping the JPGs with a hexagonal vector I could stitch them together to achieve the overall honey comb.
  3. <svg> hit detection is not a rectangle, its whatever shape you make it. If it were a rectangle the hover effect would apply to the wrong shoe at the corners.