Advanced Interactive Design - Task 2

xx/xx/2026 - 14/06/2026 (Week x - Week 8)

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

TABLE OF CONTENTS

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

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

Lofi

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

Shape blocking in Figma

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

Detailed sketches of Agent O and all website pages

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.

Reference used for the outfit

Agent O Process 1

Agent O Process 2

Agent O Process 3

Agent O Process 4

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.

Agent O Front and Side Views

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

Element Process 1

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.

Element Process 2

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.

Separating Elements with Artboards

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.