Doublelift: A Gamer's Story

A playful interactive story on professional gaming

The Project

Sports mythos in gaming

Doublelift: A Professional Gamer's Story is a visual telling of the journey of Yiliang “Peter” Peng, famously known as Doublelift, a professional League of Legends player. The site tells his story through eight chapters highlighting big moments in his career, each accompanied with a 3D rendered model related to the chapter.

Project

I was tasked with concepting and developing an interactive website thats content told a story. We had to either write our own story or find one online to use for our site. We then ideated and wireframed around the HTML structure Skeleton to code our site.

Story

I went ahead and wrote my own story, which is a simplified biography of the professional League of Legends player Doublelift. It follows his journey as a pro gamer from his start to his current place in the scene. It is catered for someone who does not play the game or watch esports to understand it with as little difficulty as possible.

Site Goals

With this site I wanted to make an accessible story about a niche community. I also wanted to create toy-like, game-esque, visuals to accompany Doublelift's story and challenge myself by doing in 3D.

Moodboard

My moodboard is directed towards the style I wanted my illustrations to be. This was the first thing I focused on since the content of my website was primarily going to be carried by the 3D models I created.

Drafts & Sketches

My wireframes where built around the concept of an isometric view of the graphics and the navigation being in the same perspective. This changed to just be a simple rectangle with snap scroll to differentiate each scene from itself.

Modeling in Blender

The 3D models were designed to create a pop of depth on the rest of the flate webpage. The style was inspired by stylized geometric illustrations, but instead of flat 2D drawings they are 3D with harsh shadows.

TAn important part of these characters was to use their simple geometry to show intense emotion for the reader to understand the situation without having to fully read the thick body paragraph next to it.

Site