The P

rojectDesignerChancellor Gardiner

I was talked 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.

ProjectI 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.

StoryWith 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 Doublelifts story.

Site

Timeline4 Weeks

LocationWestern Washington University

Insp

irationMultimedia Interactive SitesThe initial story for this site was inspired by a comic my friend wrote. I adapted it to fit a more general audience and wanted to combine it with multimedia elements seen across interactive modern experiementally designed websites.

3D ModelsI was really excited to challenge myself by learning how to 3D model to create the illustrations for my site.

Video Game Aesthetic Visually I was inspired by sites that made use of wholesome video game graphics to tell their story.

Target A

ud

ience

General Audience I wanted to make the site and story easily accessible to someone with no knowledge about video games or the specific game leageu of legends. So I didn’t want too many specific references that you would need previous experience to understand.

Specific AudienceI wanted people who play the game and are fans of Doublelift to be excited for this site and remeber all the moments in his career with nostalgia. So the visuals have small references that this specific audience can understand without isolated the general audience.

Mood

board

3D GraphicsBellow is my moodboard for 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.Interactive Story Website: Moodboard

Buzzwords: Cute, Simple, Low-poly, Funny, Adorable, Toy-like, Plastic

Sketch

esDynamic Navigation and Snap ScrollingMy 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.

Drafts

Dynamic Navigation and Snap ScrollingMy 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.

Lorem ipsum dolor sit amet, ad sea nominati dissentias,

integre torquatos mea at. Et case signiferumque nec, et

ancillae verterem comprehensam mea. Eum et tale

offendit mandamus, eam ludus principes deterruisset te.

Et vocent sadipscing per, mel exerci graeci sanctus an.

At detraxit repudiare mnesarchum ius, vix ut nullam

scaevola necessitatibus.

An exerci nostro ponderum usu, quod alia sea at, pro

dicunt accusam epicuri ad. Quo eu scripta laoreet

explicari, recteque temporibus pro an, dictas cetero

qualisque nam ex. Lucilius deterruisset his ad. Duo

clita feugait id, ludus accommodare cum ea, mel omnis

dignissim ne.

I.Homeless

54

6

3

7

2

2

homeless

8

Lorem ipsum dolor sit amet, ad sea nominati dissentias, integre torquatos mea at. Et case signiferumque nec, et ancillae verterem comprehensam mea. Eum et tale offendit mandamus, eam ludus principes deterruisset te. Et vocent sadipscing per, mel exerci graeci sanctus an. At detraxit repudiare mnesarchum ius, vix ut nullam scaevola necessitatibus.

An exerci nostro ponderum usu, quod alia sea at, pro dicunt accusam epicuri ad. Quo eu scripta laoreet explicari, recteque temporibus pro an, dictas cetero qualisque nam ex. Lucilius deterruisset his ad. Duo clita feugait id, ludus accommodare cum ea, mel omnis dignissim ne.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

Lorem ipsum dolor sit amet, ad sea nominati dissentias, integre torquatos mea at. Et case signiferumque nec, et ancillae verterem comprehensam mea. Eum et tale offendit mandamus, eam ludus principes deterruisset te. Et vocent sadipscing per, mel exerci graeci sanctus an. At detraxit repudiare mnesarchum ius, vix ut nullam scaevola necessitatibus.

An exerci nostro ponderum usu, quod alia sea at, pro dicunt accusam epicuri ad. Quo eu scripta laoreet explicari, recteque temporibus pro an, dictas cetero qualisque nam ex. Lucilius deterruisset his ad. Duo clita feugait id, ludus accommodare cum ea, mel omnis dignissim ne.

Home?

3D

Mod

elsDepth to a flat pageThe 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.

3D

Mod

elsEmotionsAn 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.

Final P

rodu

ctIntro PageThis opening page introduces you to the character that the story follows. It also provides the title of the story so you gain context for the rest of the site.

Final P

rodu

ctChapter 1First chapter covers his relationship with his family and how he got his start in the professional gaming world.

Final P

rodu

ctChapter 2The second chapter covers the community of League of Legends and how they supported Doublelift. The graphic is him with his friend Travis who gave him a place to stay.

Final P

rodu

ctChapter 3Chapter three follows the first major team Doublelift played on and how he formed his brand. The graphic is him with his teammates from this era.

Final P

rodu

ctChapter 4Chapter four talks about his mentors on the team who helped him become a better player and a better teammate.

Final P

rodu

ctChapter 5Chapter five shows the drama and conflict that plagued his team and tore them apart. It was one of the most famous moments of his career.

Final P

rodu

ctChapter 6This chapter refers to the first big success in Doublelifts career. The happy ending to the years of conflict and strife.

Final P

rodu

ctChapter 7Unfortunately that chapter is followed up by chapter seven which follows him getting kicked from his long time team and joining the rival team TSM.

Final P

rodu

ctChapter 8The final chapter provides you a small description of where he is right now in his career and shows the growth of Doublelift of his years as a professional gamer.

Looking

Back

I am so happy with being able to use this project to learn how to use the 3D modelling program Blender. I hope I can take these skills I learned during this short term project and expand on them in the future.

SuccessesCoding this project wasn’t the hardest thing in the world. However, I think I spent so much time on the 3D modeling that I wasn’t able to hone in the design/code of it to the level that I had hoped for.

DifficultiesI wish I had been able to create a more interesting experience visually with this. I felt restricted by my limited skills in both 3D modeling and coding that I got spread too thin when I combined both of these with design.

Wishes

The E

nd

Thank You