Loading ...

Responses by Max Niblock and Stefan Vitasović.

Background: This site is a passion project commemorating a century of expeditions to Mt. Everest, which began with a reconnaissance expedition in 1921. It also asks: Did mountaineer George Mallory achieve the first ascent of Mt. Everest before succumbing to the elements on his fateful attempt in 1924, 29 years before Sir Edmund Hillary and Tenzing Norgay succeeded in 1954?

Fascinated by the human drive and determination to achieve the impossible, we wanted to bring this story—alongside some incredible photography—to an audience in the global design community that may have never seen it before.

Design core: Based on an editorial style that keeps the focus on the photography, the site’s design reflects the imposing nature of the mountain with full-bleed imagery and 50-percent divisions. This also abstractly mimics the flow of blocks in the Khumbu icefall, while the combination of a sharp sans serif with a flowing, elegant serif mirrors peaks and slopes.

A random loading image gives a glimpse into the experience. We utilized page lengths to add dynamics, interchanging busy and discrete sections with an asymmetric flow to provide contrast and add visual interest. The images also move in parallax at different speeds, primarily based on their aspect ratio. To avoid scaling them up and losing quality, we created a subtle effect by chaining these images together seamlessly, forming a continuous tile pattern and covering what would otherwise be empty space. These edges are then filtered and overexposed to mimic a film strip, complementing the analog nature of the photography and building on top of the more prominent focus and grain effects.

Navigation structure: The navigation is intended to be intuitive and allow a simple flow through the story by clicking to the next chapter at the end of a page or bringing the main navigation back down by scrolling up slightly and jumping at any point. We used difference-blending mode and experimented with the base color to achieve something functional when overlaying images while not being garish.

Challenges: From the start, we aimed for a subtle smooth-scroll behavior, which came with its challenges due to the image-heavy content and lengthy pages. Subtlety being key, the content needed to load unnoticeably. Therefore, we divided the long pages into segments to enable a more performant smooth scrolling, applying interpolated vertical translation to one section at a time rather than in large DOM chunks. After a few iterations, we decided to base the scroll on Jesper Landberg’s JScroll.

Technology: We developed the project as a static website utilizing React and Gatsby and pulling in content from Prismic. The site programmatically loads images using IntersectionObserver while relying on the HTML5 picture/source feature to allow optimal network requests based on screen size. Dealing with asymmetric layouts across devices was based on an “all-fluid” principle. This was key when it came to treating typography and white space. Following the style guide, the treatment of these core building blocks was clamped by pixel value while enabling the content to stretch in viewport units whenever possible.

first-ascent.website

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In