Advanced Interactive Design - Task 1: Thematic Website Design Proposal

on

23/04/2026 - 14/06/2026 / Week 1 - Week 8

Brenda Wynn / 0372128

Advanced Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University

Task 1


JUMP LINKS


LECTURES


INSTRUCTIONS


<iframe src="https://drive.google.com/file/d/1OhJvwPizBbma-LeDC3b67bNyg_n7yPwh/preview" width="640" height="480"></iframe>

TASK

We were tasked to create a proposal for our interactive website. We had the opportunity to create a interactive website based on a product, promotion, etc. These are the first few ideas I proposed to Mr. Shamsul:

I also created logo sketches for the ideas I had, but Mr. Shamsul told me to focus more on the wireframes first.

After the feedback, I decided to create new ideas to see whether I could find better ideas. I also created wireframe sketches for the previous ideas that got accepted, including the new ideas.

Based on the feedback, I decided to continue with the "Marine Life" website idea and drew the wireframe sketch.

Once I got the newest feedback and guidance from Mr. Shamsul, I decided to start my proposal and build my prototype.

The first thing I created was the logo, the design I intended to do did not stand out as much as I thought when placed in the web page so I tested and revised the logo design. Then, I created the background image in IbisPaint and started setting up my Figma file with the navigation.

After I finished setting up the Figma file, I continued by creating the assets in Adobe Illustrator. While drawing the assets, I used the images I found while researching as reference to trace the main body shape so that I can add further details. I mainly utilized the blob brush tool and pathfinder tool to create the assets.

Once the assets were created, I imported it to Figma and started creating the web page. I also created a bubble in Adobe Illustrator to put text in. I managed to create a carousel with the assets I created. However, I was not able to complete the full prototype and was only able to create a flow from the home page to the endangered page. I was also not able to include the animals information.

PROPOSAL RESULT
Advanced Interactive Design - Task 1: Thematic Website Design Proposal by Brenda W


After I finished my prototype, Mr. Shamsul suggested that I change my logo and guided me on how I can utilize the current components that I already have. Using the guidance from the feedback, I experimented with a few different styles. I decided to change the brand name from "Marine Life" > "Eden". However, I opted for "Tranquil" instead that means living in a peaceful sanctuary since I wanted to spread awareness about the endangerment of marine species and hope the sea creatures in the deep sea could live peacefully.

I experimented with a lot of layouts, but decided to change it to the logo below since it has the best readability.

During the last feedback, Mr. Shamsul agreed on the idea of adding animations instead of long pieces of texts to add more value to the website. I created the cause of both endangerment and extinction in Illustrator, mainly using the blob brush tool and pathfinder tool. I made sure that the visuals are able to be captured in a circle shape since I want to present the animation in a bubble shape.

Sketches created and used as reference to draw the visuals above:

Next, I changed and updated the feature in Figma using the new components I created in Illustrator.

I also decided to add text boxes in the endangerment, extinction, and evolution page to convey the information more clearly to the users.

As for the cause, I sketched methods of prevention that I wanted to include in my website. This is the sketch:

Using the sketch I drew, I used it as a reference to create it in Illustrator. I also used the blob brush tool mainly to create the visuals and updated the Figma file.

During the creation of the new visuals/assets, some pictures were used to better visualize the action. All of the materials used can be viewed HERE.

FIGMA PROJECT
https://www.figma.com/design/jaflw5hS1qnVZwabWwSVhp/AID_TASK-1--PROTOTYPE?node-id=0-1&t=FMuoSstgMHRMZF8b-1

FINAL PROPOSAL


Figma Prototype Preview Link:

Google Drive Link: 

FEEDBACK

Week 2
The first idea leans too much towards the e-commerce market. The second idea can work but needs more expansion on how it's going to fill 5 pages. The third idea is good, has potential. It would be better to come up with an idea that offers educational value.

Week 4
The first new idea is good, but making it more focused on endangered marine life could be more interesting. The second idea is interesting, but it does not have a lot of content.

Week 7
Mr. Shamsul recommended me to utilize the spider web method for my website. He also advised me to decrease the amount of marine animals that I will have in my website.

REFLECTION

During the period of creating this proposal, I had a lot of fun while creating the prototype. Since the idea that I decided to proceed with was within my scope of interest, I was able to have a much more enjoyable time creating this task. From this task, I have seen some of my peers work and thought that their work was very creative and pleasing to look at. In addition, I have also learnt much more about the Figma software while creating the software.

RESOURCES

https://pin.it/3eufrBzBV
https://share.google/FhnsYXeYxqGGmzpAb
https://pin.it/4n3rq0cvE
https://pin.it/4nx96ahJU
https://pin.it/3zf4lnz7v
https://pin.it/148kGXuJU
https://pin.it/6VmiylF17
https://pin.it/6XiyrFRbB
https://pin.it/5tNQO52Dt
https://pin.it/2T9zmGyA0
https://pin.it/7dYGJ74A7
https://pin.it/2kxilsVOJ
https://pin.it/2tBnM2uC0
https://pin.it/1CP2M8KII
https://pin.it/mgU2saHla
https://share.google/HDzASuKnWKJYHNPw9
https://news.mongabay.com/2023/12/farewell-java-stingaree-scientist-declare-the-first-marine-fish-extinction
https://share.google/3KMSEQq43NbholoZC
https://share.google/8UNvoZ4hlbfiNNwWp
https://share.google/w30mA4LTPT73hX9UO
https://share.google/43h10sxTGUMJLjbqx
https://www.britannica.com/animal/sea-cow
https://share.google/YNCTucXdTMZVTFoQe
https://share.google/lv3hPYqSmSZNAqaPt
https://share.google/bvbfzTdlzSwga3Le3
https://news.mongabay.com/2008/06/caribbean-monk-seal-is-officially-declared-extinct
https://www.marinebio.org/caribbean-monk-seals-declared-extinct
https://www.marinebio.org/species/caribbean-monk-seals/monachus-tropicalis
https://share.google/d3lsp5zUyBewiTbrT
https://share.google/jf5aotY11wSsvXvYE
https://share.google/vWZVHPWcC25YiKrar
https://www.britannica.com/science/extinction-biology
https://www.nhm.ac.uk/discover/worlds-collide-great-auk.html
https://share.google/ffR9JXblfLuyTE84l
https://share.google/AEf1VBSE9LmgNbUeT
https://share.google/ZL4A3wBCqaz2FZjAv
https://share.google/dU8ARFWjFBMbSuDXt
https://www.nippon.com/en/japan-topics/g02299
https://www.extinction-cometh.com/japanese-sea-lion
https://share.google/or7ZZV5eKLzBSZu1O
https://share.google/zbJWIz6XbfD3eCZeh
https://share.google/1ORmhvmkBxrNxKixo
https://www.worldwildlife.org/species/dolphin-and-porpoise/vaquita
https://www.fisheries.noaa.gov/species/vaquita
https://share.google/D7zcSKrPOK1T92D1w
https://share.google/c4r9WYYemMiCU5X42
https://share.google/ewVrzhSoXfksPXrpY
https://www.fisheries.noaa.gov/species/hawaiian-monk-seal
https://share.google/QA834oN4FvF0syeVc
https://share.google/gvxp262QoFxMPcflU
https://share.google/cGqXT2NiNwqfLeVh5
https://share.google/mlQz2RMqjPeeVWEmL
https://www.fisheries.noaa.gov/species/north-atlantic-right-whale
https://www.whalingmuseum.org/research/research-resources/whale-science/biology/about-whales/species-of-local-interest/north-atlantic-right-whale/
https://www.sciencedirect.com/topics/agricultural-and-biological-sciences/eubalaena-glacialis
https://share.google/lZi0LEhxS7kIukO2m
https://share.google/Zffiy79hjNFXvXObt
https://share.google/8H2nz0Zm7YjZH0NaI
https://www.fisheries.noaa.gov/species/hawksbill-turtle
https://conserveturtles.org/species/hawksbill
https://www.fisheries.noaa.gov/species/oceanic-whitetip-shark
https://www.floridamuseum.ufl.edu/discover-fish/species-profiles/oceanic-whitetip-shark
https://share.google/vb4UaFolh7CIHaHIZ
https://share.google/frtNA0bPPdpqIONwt
https://share.google/uTIMU4LTmslgFQYy
https://www.researchgate.net/publication/350810288_Carcharhinus_longimanus-Oceanic_Whitetip_Shark_The_IUCN_Red_List_of_Threatened_Species_2019
https://myfwc.com/wildlifehabitats/profiles/reptiles/sea-turtles/hawksbill
https://www.fisheries.noaa.gov/national/endangered-species-conservation/north-atlantic-right-whale-health-updates
https://share.google/UHBCaFLPfk54qh4ts
https://share.google/ZrMvGRWl8p1UrVPsN
https://share.google/JPnCk1WG0q5wEodOn
https://share.google/ujFF54yPjFmSTj9RD
https://share.google/tNgr8PPNHHmreZIE6
https://share.google/rqPfCui1qdoeSHpEr
https://share.google/3JrWlD4rOVqfpLfRX
https://share.google/qP3uiVU5UXt7MvQ4x
https://africanaquaticconservation.org/blog/2012/10/11/ancestral-manatee-fossil-found-in-senegal
https://share.google/pBzUeSB8EHJLDy501
https://share.google/ldV2864SoS2fg2LBI
https://share.google/0XnEMhdOo6j4GmXUk
https://share.google/S1fGoXWxtvio4lvU9
https://share.google/Zoj71yttVs9Wt8imE
https://share.google/mOsaLmmIiONT9n3S9
https://share.google/SI48ro7pxER06wA8t
https://nationalzoo.si.edu/center-conservation-genomics/news/evolution-fast-track-otter-genetic-history-provides-clues-future
https://share.google/kb7NHaH3hXheAAgkH
https://share.google/qRE9SUEBFHr1aYxvE
https://share.google/D5sYXXlLNcmwYwWHG
https://share.google/FunVwXB50g1zpqza2
https://share.google/1o0ySyq7wd1CKXLqn
https://share.google/WH5SqmYLwp1N4UzdP
https://www.dolphin-way.com/dolphins-the-facts/evolution
https://share.google/VH3XU8hhR5MKg2heP
https://share.google/YNzEEsvAL6xfY2YES
https://share.google/HM8CZoFUDXtw1Jb11
https://share.google/Ca0qZzdcPGfZtBV0F
https://share.google/PmeT82IAMA4EBSIML
https://share.google/odDpOGnb6klcuXpdu
https://www.turtle-foundation.org/en/sea-turtles/sea-turtles-biology-and-natural-history
https://share.google/g05ddqmCTQeSI2Sy8
https://thexzachronicle.wordpress.com/2022/01/15/evolution-of-turtles
https://fossil.fandom.com/wiki/Odontochelys
https://share.google/IOkkYWUjkM05h5bwm
https://share.google/otPWifTYmy35FTYcg
https://share.google/yNzMmyK3CGhxKrDJj
https://share.google/pkXFURBTRa23vffHJ
https://share.google/7kmLRCqMOJerA0ZQa
https://share.google/1RElfZsUIVXEUhzhU
https://share.google/0zillCq1Zjkx1rVgO
https://share.google/cyFaBAgTRLet7EkCn
https://www.worldanimalprotection.org/latest/blogs/marine-wildlife-at-risk-how-we-can-stop-ocean-exploitation/
https://share.google/LIcBG0wveJccEiZgB
https://share.google/xa24ywq8y30B9U5rP
https://share.google/y5z7FBwUAYBdEUaEN
https://share.google/T5vwhD8YSmLcElKbT
https://share.google/nwVRw7kpcUd439qwh
https://share.google/sBsLFKuzPF1vvwkZM
https://share.google/cxKhfinQRmEqx8P3m
https://share.google/F2kWr8Ne74uGSI8un
https://share.google/0yLltp7qjZKwKZySE
https://share.google/pv885fJrbQUUnR8RM
https://www.ifaw.org/international/journal/fifteen-ways-protect-the-ocean-marine-animals

Comments

Post a Comment