Advanced Interactive Design / Project 1

25/04/2024 - / Week 1 - 
Iman binti Kamarudin / 0364014
Advanced Interactive Design / Bachelors of Design (Hons) in Creative Media

---

---

INSTRUCTIONS

TASK

1. Create a proposal for an interactive website based on your chosen topic.

I decided to create my proposal based on one of my favourite games 'Life is Strange'. It is an episodic story game based in 2013 and follows an aspiring student photographer, Max, and her childhood best friend Chloe as they investigate and search for Chloe's missing friend, Rachel.

I started by coming up with a few rough visuals using Canva to see how my ideas would translate into real life.

Fig 1.1 - Loading Page Rough Visual

Fig 1.2 - Landing Page Rough Visual

Fig 1.3 - Home Page Rough Visual

Fig 1.4 - Character Page Rough Visual

Afterwards, I created a userflow using Miro to define how I wanted the website to work. 

Fig 1.5 - Miro Userflow Layout

Once my userflow was made, I sketched out a full layout of what I wanted the whole website to look like using Procreate. 

I included a lot of polaroid photos since the main character is a photographer and polaroids are very prominent in the game. I also added a bunch of crumpled paper and receipts since they give off a very 'messy' vibe that I wanted.

Fig 1.6 - Rough Website Sketch

Then, I went on Pinterest and searched for some game assets and photos and created a moodboard.

Fig 1.7 - Moodboard

Once I decided on my art direction, I went onto Figma and created my wireframe and prototype.

Fig 1.8 - Figma Prototype Progress Screenshot

Fig 1.9 - Final Figma Wireframe

After consulting about my website design, I made some additional drawings to convey what the animations in each page would be.

Fig 1.10 - Animation Diagram

FINAL WEBSITE PROPOSAL

Fig 2.1 - Final Website Proposal PDF

Fig 2.2 - Final Proposal Presentation 

(p.s sorry for the bad quality, Blogspot made me compress the video super hard)

(p.p.s also feel free to speed up the video I talk pretty slow)

---

FEEDBACK

Week 1

Specific Feedback - Okay, sound interesting. Keep developing your proposal.

Week 4

Specific Feedback - Think about the animation. Maybe the papers behind the journal could be moving and the pictures could turn from black and white to colour.

---

REFLECTION

My experience with this task was quite positive. I enjoyed trying to come up with website layouts and figuring out what content I wanted the website to have and how I wanted to display it. While I know that I can definitely improve, and perhaps I may have been a bit ambitious, I am happy with what I've come up with so far and I hope that I can do it justice.

I've observed that there are so many ways to make a website interactive and interesting and there are so many different features that you could add and I find it really fun. I've also found that it's easier to finish projects when you're making it about something that you love.