THE XENOMORPH TIMELINE

Concepting, Design & Front-end Development

HTML/CSS/JS

SPOILERS UP AHEAD!

Mockup for the page

INTRODUCTION

The timeline had to be unique to the character, featuring a fitting design, semantic HTML, a bunch of interactions and an easter egg. I chose to shape the timeline as vents, the primary mode of travel for the aliens through ships.

Check it out!

* Viewer descretion is advised and it works best on laptop screens

PROCESS

To start with the project, I needed a solid concept. Once I settled on the Xenomorph as my character, the challenge was to figure out how to make a fitting design. I had a few different ideas:

Sketch of the design, a clickable ship
The spaceship, each part is clickable.
Sketch of the design, clickable vents
A vent system, each vent entrance is clickable.

My preference went to the second one, but when I asked for some feedback from my teacher he told me it lacked the uniqueness associated with the Alien franchise. Following his advice, I chose for the first concept, focusing on the iconic image of the alien traveling through the vents.

For the content, I chose to show the life cycle and mutations of the Xenomorph across movies 1-6, excluding the Alien vs Predator movies and any of the games.

Certain design elements were inspired by the game Alien: Isolation, such as the vent-click interaction which resembles the terminals seen throughout the game. The easter egg is the iconic motion-tracker you carry with you in the same game. The beeping and the moving dot show the proximity of entities, usually being an enemy.

The popup when you click on a vent
The popup.
The terminal from the game
The terminal from the game.

Lastly, my teacher recommended me to make use of the signature gore that defines the franchise. I believe I succeeded in this pretty well; you can experience it firsthand by checking out the project and turning up the volume a bit. Enjoy! ;)

RESULTS

The results

For the time we were given, I’m proud of how far I came with this project. There’s things I’d like to refine someday, for example the way I added the content. Currently, this is done by using a series of JavaScript event listeners that add content on click. My teacher suggested adding all data to a JSON file and using a JavaScript loop to place the information in the right spot.

If you want to check out the code:

Github repo