SNS prototypes

Second Nature Services — working sketches · in the grid and ball prototypes, press H to show the panel

Index page

  1. 15 index-v1c index-v1b, filtering by rolling: pick a filter and the ball rolls across every sticker it takes off, each wrapping onto it and leaving an empty slot, then grows into a globe of them you can spin
  2. 14 index-v1b index-v1a with the single-ball menu bottom right instead of the SN.S logo: a glass ball with the animated SN.S logo and a magnifying lens, big when shut, shrinking into the tube on hover
  3. 13 index-v1a The Index page from Figma: die-cut project stickers you can peel (coloured backs); click one and its card opens out of its coin tag; SN.S logo menu top left

Ball

  1. 12 ball-v4b v4a's SN.S logo as the menu, bottom left: hover a ball for its page (H, A, B), the dot for the filters; the silver sweeps
  2. 11 ball-v4a The SN.S logo from Figma with its letter circles as balls — they roll out of their tubes; drag one to stretch its tube, hover to spin
  3. 10 ball-v3a The SNS menu from Figma with a ball as its (S) — grey, glass, project-card colours, and the striped pool ball; hover to spread the tube, turn the ball (H, A, B, F) to change the item
  4. 09 ball-v2a Two linked balls: v1a with the page word on its disc, and a glass one with 3D letters floating inside — swipe up/down for the next page
  5. 08 ball-v1a A numbered pool-style ball, pink-red stripes and dark poles in its material — drag to spin

Grid

  1. 07 grid-v2c v2b + dents and grain in the sphere's surface
  2. 06 grid-v2b v2a + stickers paste down as they spin into view
  3. 05 grid-v2a Stickers on an invisible sphere — drag to spin, sheen follows the curve
  4. 04 grid-v1a Draggable sticker canvas, new random layout each visit

Squishy matter

  1. 03 squishy-matter_v2b Video and cut-out images traced into soft bodies, each clip playing inside its own squishing outline
  2. 02 squishy-matter_v2a Cut-out images traced into soft bodies and packed snugly into a selection box
  3. 01 squishy-matter_v1a Soft-body letterforms that bend, squish and collide inside a selection box
  4. 08 grid-v2d v2b with the SNS logo repeated on the sticker backs when they peel
  5. 09 sphere-ui_v1a grid-v2b + a glass ball in the corner you spin to move between pages
  6. 10 sphere-ui_v1b v1a with the ball bottom-left, half off the page, logo straight on the glass
  7. 11 sphere-ui_v1c v1b with labels refracted into the rim as they roll round the back
  8. 12 sphere-ui_v2a v1b + sub-page tags curved round the ball that turn with it
  9. 13 sphere-ui_v2b copy of sphere-ui_v2a, for the next round of edits
  10. 14 sphere-ui_v3a the ball rebuilt as real three.js glass (UNCHILD-style), with stickers floating inside
  11. 15 nav-bar_v1a grid-v2c with the Figma bottom bar: pages, filters, contact, Instagram and LinkedIn