Andrew Rossi
An interactive website that challenges our perceptions of design history.
Development
UI/UX
Web
Over the first few weeks of class, we collaborated on a collective timeline exploring how design has been represented throughout history. Guided by the question “What has been lost? What has been remembered, and why?”, we examined the gaps and biases in design history.
In response, I created this interactive website to invite users to reflect on their own understanding of design history. By building their own timeline, users confront the same questions we’ve been asking, prompting deeper awareness of what stories are told, and which ones are missing.
With only a few days to explore visual design, I quickly translated my ideas into Figma, defining core styles like typography, color, and iconography. I chose neutral tones to let red type and photography take visual priority. The bold red elements highlight shared human themes, underscoring ideas of global design and inclusive representation.
I utilized Webflow for the bulk of the implementation, and utilized custom code for certain effects.
Particles JS
Furthering the theme of global design, I wanted to create the illusion of stars in the background, I used Vincent Garreau's particles.js library. This was super easy to setup and configure .
View Particles.js<style>
canvas {
display: block;
vertical-align: bottom;
}
</style>
particlesJS("particles-js", {
"particles": {
"number": {
"value": 221,
"density": {
"enable": true,
"value_area": 1920
}
},
"color": {
"value": "#920707"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 3
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.552,
"random": true,
"anim": {
"enable": false,
"speed": 0,
"opacity_min": 0.016205222943354653,
"sync": false
}
},
"size": {
"value": 2.9,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 0,
"color": "#ffffff",
"opacity": 0,
"width": 0
},
"move": {
"enable": true,
"speed": 0.3,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 0,
"rotateY": 0
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 0
}
},
"bubble": {
"distance": 291.6940129803838,
"size": 2,
"duration": 3.7272012769715706,
"opacity": 1,
"speed": 3
},
"repulse": {
"distance": 72.92350324509594,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
gsap.registerPlugin(Draggable);
Draggable.create(".event-card", {
bounds: document.getElementById("drag-container")
});
Dragging
To easily allow the user to drag and drop the cards, I used GSAP draggable.
Random Position
I wanted each card to be positioned randomly upon entering the site, so the user would not have any inclination as to where the cards should go.
var divs = document.querySelectorAll(".event-card");
for (var i = 0; i < divs.length; i++) {
divs[i].style.position = "absolute";
divs[i].style.left = Math.random() * 60 + "%";
divs[i].style.top = Math.random() * 60 + "%";
}
Webflow
Adobe CC
Figma
GSAP
