History Redesigned

Question Everything

Throughout the first several week of class we had been creating a collective design history timeline. From our readings and discussions we explored the issues with how design and designers have been represented throughout history. Most of which revolves around our essential question "what had been lost, what has been remembered...why?".

We were then challenged to create a response to our collective timeline and readings. I chose to create this interactive website to help coax the user into thinking about design history as we have been. Users are challenged to create their own timeline based on what they know.

Ideation

Quick and Agile

With only a few days to explore the visual design, I quickly got my ideas into Figma to define some basic style such as type, color, and icons. I used neutral tones to allow the red type, and photography to stand out. The bold red lettering and graphics speak toward common themes amongst all humans, thus promoting ideas of global design and representation.

Implementation

Time to Code

I started implementing style and basic components within a style guide page in the Webflow project.

View Style Guide

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 + "%";
}

My Tools

Webflow

Adobe CC

Figma

GSAP