History of the WWW

Project:

Interactive website showcasing different eras of the internet.

Tools:

HTML, CSS, JavaScript, React, Adobe Photoshop, Adobe XD.

Team:

Sam Edelstein, Sean McQuillan

My role:

Research, wireframes, visual design, graphics, front-end development.

Idea:

My team wanted to build an easily navigated site for interacting with and learning about different eras of the internet. We wanted our website to mimic these eras with the browser and background surrounding the content, and for the content to be educational about the “recent” developments in the World Wide Web. This was a semester-long project completed for the course Computational Foundations of Emerging Media. It was required for our project to directly connect to the curriculum, but otherwise we had total freedom with it.

↓

The process:

We began this project by researching website design and determining the biggest and most iconic trends of the internet. We used websites like “The Wayback Machine” to ensure authenticity. In our pitch to our class, we included the slide shown below, which was potentially the timeline we wanted to implement.

↓

Preparation:

Before implementing our idea, my team first had to set up the basic website using React. My teammate Sean built the five page snap-scroll layout and made sure it was ready for content and functionality to be added. While Sean worked on this, my teammate Sam and I worked in Adobe XD on prototypes for the eras. We determined that we wanted to exhibit the internet of the early/mid 1990s, late 1990s/early 2000s, late 2000s, and late 2010s/modern day.

↓

Assets:

Using Adobe Photoshop, I edited browser images from Google to work as framing for our project. I also created backgrounds and logos. I especially like the late 2000s logo I created using noise and pixelation filters (shown below).

Frames 1 and 2.

Frames 3 and 4.

Early 2000s logo, late 2000s logo.

↓

Implementation:

Sean worked on major structural components while Sam and I did much of the front-end development using HTML, CSS, and JavaScript. We wanted to include interactive components, so we produced a sign up, a login page, and a post creation tool. We kept the internet browsing windows around the same size in each era for continuity in our site, and made each scrollable when the user has their mouse within their bounds. This project was done entirely remotely under Agile project management, with my team communicating through video call and pushing work through GitHub.

↓

Final product:

Below is a walkthrough video of our final website! It's also hosted on GitPages, click here to interact with it yourself! Try clicking the ads in the late 1990s era!