Advanced Interactive Design - Task 2

01/06/2026 - 14/06/2026 (Week 6 - Week 8)

Carren Yeliandi / 0376990
Advanced Interactive Design / Bachelor of Design (Hons.) in Creative Media
Task 2 - Proposal

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Reflections

Lectures

Refer to Task 1 - Exercises

BACK TO TABLE OF CONTENTS

Instructions

Task 2 - Thematic Interactive Website Proposal

I first began with making the proposal on Canva on what kind of website I want to make. After long consideration, I had a few options which I had run through with Mr.Shamsul and in the end chose the topic of Carrots which I loved. After finalizing them, I proceed to finalize all the details in the proposal and went to the wireframes

Fig 1. Wireframe (14/05/26)

From there, I made a low fidelity version of the functionality on Figma.

Fig 2. Low fidelity (14/05/26)

I then made a blocking of what I envisioned my website will look like.

Fig 3. Shape blocking in Figma (14/05/26)

Then, I began with making a detailed sketch on how everything would look like and breaking down what components I need to make.

Fig 4. Detailed sketches of Agent O and all website pages (30/05/26)

After determining the details, I proceeded to adobe illustrator and using the shape tool, direct selection tool, add anchor point tool as well as pen and curvature tool, I made all of my components for my chosen 3 pages which is homepage, funfacts and types of carrots.

I first started with the main character Agent O. As you can see from the sketch, I envisioned it using a trenchcoat, hat and sunglasses. The carrot marks on the cheek can be interpreted as scars and the leaves pushed down by the hat acts as it's hair.

Fig 5. Reference used for the outfit (30/05/26)

Fig 6. Agent O Process 1 (30/05/26)

Fig 7. Agent O Process 2 (30/05/26)

Fig 8. Agent O Process 3 (30/05/26)

Fig 9. Agent O Process 4 (30/05/26)

Midway in the making, I realized that I have to make a side view of Agent O as Agent O animation will include him walking. So I just very quickly made a simplied version of Agent O right sideview, duplicate it and edited it slightly to make the left sideview.

Fig 10. Agent O Front and Side Views (06/06/26)

After the character is done, I proceeded to the components. Starting with the homepage with all the basic elements that will be reused in all the pages.

Elements :

Clouds, Sun, Wooden Sign, Grass and Carrot Logo (Speech Bubble is just an addition for now, depending on if it'll fit the screen and arrangment later).

Fig 11. Element Process 1 (11/06/26)

I proceeded to the Fun Fact page with the two person, one holding the world heaviest carrot and the other holding the baby carrot and the disfigured carrot. I just made the character very simple with rounded rectangle shapes.

Fig 12. Element Process 2 (11/06/26)

For the Types of Carrots, I took the carrot logo and made 5 different shape of carrots based on the 5 different type of carrots. Although there's more types of carrots, these 5 are the main ones. After everything is done, I just separated everything into artboards and export as SVGs.

Fig 13. Separating Elements with Artboards (14/06/26)

Originally, the "Types of Carrots" page is supposed to be a carrot museum and the user will click on the image to open the overlay but during the making of the elements, I decided to make it interactive by having a pull the carrot button and once the carrot is pulled then a "paper" will pop up telling you what carrot you just pulled.

Fig 14. High Fidelity Prototype (14/06/26)

PROPOSAL LINK

FIGMA LINK

BACK TO TABLE OF CONTENTS

Reflections

I had a bit of a hard time decided on what kind of website to do. It was here that I realize how much of myself that I don't really know and have because I don't have a favorite artist, movie or game which makes it kinda sad if you think about it. Nevertheless, I do have one thing about me that everyone will think about me when they see it which is Carrot cuz you know Carren, Carrot ? Get it ? Hehe. Anyway, had a pretty fun time making the character itself but maybe next time I can make a simpler character that's perhaps more memorable. I don't know how to do the coding yet but we'll see how I do in the future.

Carren Yeliandi (0376990)

Search This Blog