Marianas Trench Process Cover

This was one of the first experiments of front end development. This project was made interactive on a desktop format due to the the specific coding technique.

Research Organization

Each zone of Marianas Trench contains specific temparatures, pressures, and characteristics. It was crucial to visually organize the information before the design phase. Each set of dotted lines represent each zone.

Marianas Trench Diagram
Marianas Trench Wireframes Sample
Translating Information to UI

These wireframes represent a rough outline of how the information in each zone of the trench can be organized from page to page. In this stage, it was important to ask: Should each section be split into seperate pages? Should the entire website be one long page? What are some of the interactions that can tell this story in an immersive way? What's the hierarchy structure like?

Marianas Trench Wireframes Sample Second Set Marianas Trench Wireframes Sample third Set
Visually Naming the Content

Once a general idea was captured as to how the project's structure would exist, it was time to turn all of the elements from frames to forms in order to further visually understand what may or may not work.

Marianas Trench First Set of Sketches Marianas Trench Second Set of Sketches
Marianas Trench third Set of Sketches Marianas Trench fourth Set of Sketches
Digital Test

Once the structure was ruled, a digital rendition of the top three concepts was created. Each concept contains a seperate art direction, and each concept contains a before and after state of interactions. These concepts were tested on the home page and the first zone of the trench.

Concept One

The user takes form of an anchor diving into the trench and weighing to the bottom while taking in information about the trench along the way. Once the user hits each zone, elements shake vigourisly due to the rise of pressure as creatures peek from behind objects.

Before Interactions on Concept One

Landing page without interactions

After Interactions on Concept One

Anchor drops as user scrolls down

Second Interaction of First Concept Before

Abyss page without interaction

Second Interaction of First Concept After it Shakes the Screen

Elements shake to indicate pressure

Before Interactions on Concept One

Landing page without interactions

After Interactions on Concept One

Submarine submerges as user scrolls down

Concept Two

The submarine is the user's vehicle. White lines show the user that they've crossed into another zone. A light shines as a cue showing that creature are interactive. A balloon lies on the bottom right of the viewport and gets larger as if it was about to pop, indicating pressure levels.

Second Interaction of the Second Concept Before

Abyss page without interaction

Second Interaction of the Second Concept After it Shakes the Screen

Spotting the creature

Concept three

This concept brings out the mystery through a trippy experience. The user dives into the title as typography ripples on top of the ocean's surface. In each zone, a large title appears while swirling in order to make each zone feel eerie. Each of the zone's information rests on the top left hand side of the viewport, making room for the larger elements. When the user comes across a creature, it surprises the viewer with a light shining on them to indicate depth.

Before Interactions on Concept three

Landing page without interactions

After Interactions on Concept three

Diving into the title

Second Interaction of First Concept Before

Abyss page without interaction

Second Interaction of First Concept After it Shakes the Screen

Spotting the creature

Final Direction

Concept two was ultimately chosen to move forward with as it made the most sense visually. The entire trench was mapped out in a flat profile structure, allowing the viewer to easily follow along with the overall narrative of diving deeper into trench and the iconic game-like rendering of the creatures would allow an audience of all ages to be included. Issues that arose with the other concepts included the perspective that didn't fulfill this narrative as well as concept two did due to the visual abstraction. The horror-like rendering of the creatures left out the very young portion of the audience as well as it could potentially scare kids. The next step included fully building every page from the chosen direction.

Revising Chosen Direction

The entire project was visually built out from the chosen direction. Changes in the revision from this full iteration included removing the thin white line from each section (as each zone's title was enough of an indicator that the user was entering another area), making the submarine dive in behind the scroll indicator on the home page to give the user a notion of submerging into the ocean's surface, rendering the bubbles to be more readable, changing the rendering of the creatures to fit together stylistically (as some still felt too horror-like), and adding a navigation diagram inspired by radars from ship's on the bottom right corner of the viewport in order to show the user where they are within the trench at all times.

Editing The Very BottomPage Editing the Midnight Zone Page
Editing The Trenches Page Editing the Midnight Zone Page
Final Comp

Once all of the revisions were made, it was time to make a full comp to use a visual reference while building the website and to turn each element into a useable asset.

Final Comp of Home Page Final Comp of the Midnight Zone Page Final Comp of the Abyss Page
Final Comp of the Ocean Basin Page Final Comp of the Trenches Page Final Comp of the Very Bottom
Planning the Markup

In order to get a solid start at translating all of the elements into viable pieces of code, it was crucial to map out how code could be implemented. This meant writing out all of the color values, writing out the details and grids of the typographic structure, and writing out the spacing and placement of all of the elements. Some of the spacing annotations came from a rough guess in order to have a sense of direction while coding.

Planning the Markup for the Home Page
Planning the Markup for the Abyss Page
Note

Between the final comp and code write-up stage, the navigation switched to a labeled form for clarity. The idea was to have the user click on a hook at the top right of the viewport and a dropdown navigation box would appear. This changed in the coding phase as the dropdown navigation menu made the website too busy and it took attention away from the rest of the interactions.

 

The flashlight idea was dropped as well as it felt unnecessary since the user was already able to see and hover over the creatures. In the coding process, the concept was geared back to the original final comp.

 

The radar diagram was facing an issue that made it difficult for the user to get a clear idea of where they were in the trench. Over all the radar wasn't needed due to the other visual cues (the gradual darker background, the form of the trenches, and the direction of the submarine's movement).