IN WHICH I FIX MY GIRLFRIEND’S GRANDPARENTS’ WIFI AND AM HAILED AS A CONQUERING HERO

WEBSITE_PROCESS.PDF

RESEARCH_SECTION

Initially, my concepts and ideas for this project was all over the place. There were a lot of stylistic choic-es and paths to go to and I didn’t know what I wanted to do because all of them looked cool. These were some of the websites that I think looked pleasing and could be applied to tell this majestic story.

research examplesIn Pieces: Interactive collection of en-dangered species.http://species-in-pieces.com/#

My Mother’s Lingo: https://www.sbs.com.au/mygrand-motherslingo/

Solace: Interactive story. Uses click style interactions with a lot of voice over to tell the story.http://www.rememberspook.com/

DEVELOPMENT_CO

The whole website will be following a line representing the internet and power lines throughout the story. As the user scrolls, the lines are slowly moving telling where it goes. It’ll be using clean but bubbly graph-ics. The whole site will basically be a huge timeline with a couple of quick time events and a couple of popups that will show specific details of the story, as well as the text.

In terms of showing the actual written story, text will pop out when scrolling alongside with the supple-mentary images. There might be a voiceover option available with the text with sound effects in order to give depth. Since the cable are kinda plain and boring. I will implement a parallaxed background and fore-ground of the setting. Slowly transitions from setting to setting.As for extras, there would be a splash screen that will feature a loading screen in order to buffer all of the items (if the load times are fast, I’ll still include it for an extra effect). Then the user will see an animated title of the story then a play button. On click, an internet line will show up and an arrow telling the user to scroll to progress the story. At the end, there will be an option to start again and also will show the cred-its.

During the development of the first concept protoype website, my satisfaction level went lower and lower. So at the final week, I decided to scrap everything and start over. I settled with a smooth flowing verical scrolling website that transitions in color based on the tone of the story. It starts of bright, then darkness comes in and then the darkness slowly lifts until it goes back to the bright blue showcasing the achievement of the warrior’s battle against the router. The illustration style went from flat to thick out-lined sketches.

initial concept

second concept

TAARGET + MOODBOARD

It would be readers that would probably in their late teens and up to their late thirties. These readers are probably scrolling through reddit, twitter or facebook, waiting for the right op-portunity to procrastinate and spend five minutes of their time reading a cute little story with illustrations to accompany it.

target audiencemoodboard

SKETCHES_ASSETS

These are sketches and illustrations that I made for the second concept of the website.

second draft

DESIGN_COMPOSITIONS

for the sake of time, there wasn’t any time to make a rough draft of the website concept, so I just dived right in.

Desktop on the top and mobile on the right

second draftfirst draft

WIREFRAMES_WEB

desktop mobile

FINAL_WEBSITE_PROTOTYPE

desktop

http://myweb.students.wwu.edu/dacu-laj/360/project-1/index.html

mobile