SNS prototypes

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

About page

  1. 20 about_sticker_v1a the About statement with stickers set into the lines, the glass ball (on About) and the glass menu
  2. 21 about_sticker_v1b v1a wrapped onto a sphere like sphere-ui_v4b, scrolling up and down, with a panel for the curvature
  3. 24 about_sticker_v1c v1b looping endlessly up and down; stickers paste down again each time they come back into view
  4. 22 about_sticker_v2a v1a plus a sticker-covered balloon on a string to push about and squash against the edges
  5. 23 about_sticker_v2b v2a with a second, slightly smaller balloon in green (#13FF00); they bump off each other

Sphere UI

  1. 09 sphere-ui_v1a grid-v2b + a glass ball in the corner you spin to move between pages
  2. 10 sphere-ui_v1b v1a with the ball bottom-left, half off the page, logo straight on the glass
  3. 11 sphere-ui_v1c v1b with labels refracted into the rim as they roll round the back
  4. 12 sphere-ui_v2a v1b + sub-page tags curved round the ball that turn with it
  5. 13 sphere-ui_v2b the full-featured version: v2a plus filters and the info tooltip
  6. 16 sphere-ui_v2c v2b with the SNS logo on the ball as raised holographic foil
  7. 14 sphere-ui_v3a the ball rebuilt as real three.js glass (UNCHILD-style), with stickers floating inside
  8. 17 sphere-ui_v4a v2c, with the ball dropping in and settling bottom left, a shadow on the page, and tags that swing round to face the screen
  9. 18 sphere-ui_v4b v4a with the ball riding and rolling on the page as it scrolls, bouncing off the screen edges
  10. 19 sphere-ui_v4c v4b on a flat page (curvature 0) instead of the sphere

Squishy matter

  1. 01 squishy-matter_v1a Soft-body letterforms that bend, squish and collide inside a selection box
  2. 02 squishy-matter_v2a Cut-out images traced into soft bodies and packed snugly into a selection box
  3. 03 squishy-matter_v2b Video and cut-out images traced into soft bodies, each clip playing inside its own squishing outline
  4. 04 squishy-matter_v3a The SNS stickers as squishy soft bodies on the grey page, with the glass ball UI
  5. 05 squishy-matter_v3b v3a without the white outline round the objects

Index page

  1. 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
  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. 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
  4. 16 index-v1d index-v1c with the rest of the site: the ball's menu goes Index, Projects, Bulletin, About; shake it and a slot machine of the projects spins (three of a kind opens that project); the footer switch turns the stickers into blobs

Ball

  1. 08 ball-v1a A numbered pool-style ball, pink-red stripes and dark poles in its material — drag to spin
  2. 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
  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. 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
  5. 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

Grid

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

Nav bar

  1. 15 nav-bar_v1a grid-v2c with the Figma bottom bar: pages, filters, contact, Instagram and LinkedIn