Digital Scrapbook


OCT 2024
Skills: Interaction Design
Technology: JavaScript, HTML/CSS 

Start scrapbooking here!

this symbol means you can interact!

Overview



My digital scrapbook encourages users to explore scrapbooking in a commitment-free way, while being able to collaborate with users on the same website. As someone who scrapbooks, keeps a journal with me at all time, and works with a lot of physical documentation of life, I was inspired to weave my personal items into a digital interface. The main functions of my project include dragging images around to the desired location on the page, and generating randomly placed stamps like stars and grid tape. 


Process



Goals
  • Bring collaboration to a primarily individual activity
  • Inspiration of a collage builder on top of the user’s webcam
  • Accurate representation of my own scrapbooks

Execution
  • Scanned receipts, movie tickets, and doodles 
  • Import assets into HTML and modify with JavaScript and CSS

My first draft and ideation! 



Coding Integrations
  • Drag all of the scrapbook elements across the page
  • Date will always be updated to the current day!
  • Star button generates a randomly placed purple star
  • Tape button generates a randomly placed grid tape 

Product






In all my works I aim to bring a sense of humanity and connection, but in this one particularly, I focused on capturing intentional roughness in a digital and seemingly “perfect” medium.


Related Projects



Flip Through my Journal!

The Romance Issue



KYRA REILLEY  © 2025