Interactive Design - Final Project

Week 15
Jessica Tjoe / 0361482
Interactive design/ BDCM/ Institute of Innovation and Technology
Final Project

Instructions

<iframe src="https://drive.google.com/file/d/1Tl2HpGpLdTyiD_026SdVZdck9gzyDUHn/preview" width="640" height="480" allow="autoplay"></iframe>

Final task

For our final task we were instructed to create a website dedicated to our favorite topic/ artists. A single page website that had about 5 sections. 

Phase 1 -Drafting-

This was where I first planned out my website. For my topic I decided to do a fan-site for Goodkid who are one of my favorite indie bands. I made slides in class that day because that I was not prepared, I had finished a deadline a day prior. 


<iframe src="https://drive.google.com/file/d/1Cq9FcBO-BmMNsfi04A3AyAYpb3zWdPvJ/preview" width="640" height="480" allow="autoplay"></iframe>

Phase 2 -Figma and Prototyping-

Once I had a rough Idea of a design I opened up figma and started prototyping. It was sort of hard because of the broken ac, but I manage to pull through. My lecturer suggested that I add a section for their albums and socials so that fans visiting the website could listen to the music themselves. 


Figure 1.0_figma prototyping final

Phase 3 -Building the site-

So to start I collect all of the information I placed on my figma and transferred it all into adobe dreamweaver. I started off building the website by color and then adding sections, it doesn't look exactly like it in the final because I had structuring issues. 

Phase 4 -Final Touches-

For the last I structured the site to the best of my ability and time. 

Figure 1.2_screenshot of first page

The images didn't appear on this screen shot due to circumstances  however I assure you that the site has the discography all on display and is very much functional as displayed below. 


Figure 1.3_screenshot of discography section

 
figure 1.4_screenshot of origins page
Figure 1.5_ screenshot of member's screen

Funny enough the site itself does not look like the screenshots above but for some reason it does this whenever I take a full screenshot using ctrl shift P. 



You can view the site here!

Final Project Website 

Reflection

Observation
I Learnt a lot of things doing this module, how certain aspects influence other things in the design. 

Finding
coding is hard. I hate it. 

Experience
Figma was the easy part. I regret having to make things really creative, I should've gone into it very simple, less elements. 

Comments

Post a Comment

Popular posts from this blog

Information Design - Exercise 1

Image
Week 1 - 2/7/25 Jessica Tjoe / 0361482 Information Design/ BDCM/ Institute of Innovation and Technology Exercises  Instructions <iframe src="https://drive.google.com/file/d/18ZbFRYA_RldeKabEIgx7oSZinkB_JJ8q/preview" width="640" height="480" allow="autoplay"></iframe> - Quantify raw data and visualize information as a photograph - Visual representation of numerical data that allows for easy interpretation and analysis. Instruction: Gather a set of objects and separate it into category such as color, shape, pattern, and other quantifiable factor. Example: 1. Box of Lego 2. Jar of button 3. Jar of marble ball 4. Set of colourful rubber strap & more. In this exercise you're required to quantify our chosen objects and arrange them into a presentable layout or chart. The information must be presented as is, and you need to arrange the objects with relevant indicators written o...
Read more

Information design - Project 1 & 2

Image
Week 3 - 5 (17/2/25 - 10/3/25) Jessica Tjoe / 0361482 Information Design/ BDCM/ Institute of Innovation and Technology Project 1 & 2 Instructions <iframe src="https://drive.google.com/file/d/18ZbFRYA_RldeKabEIgx7oSZinkB_JJ8q/preview" width="640" height="480" allow="autoplay"></iframe> Lecture Week 4 - Directive's manifesto What is  Directive's manifesto:   provides a working list that can help provide clarity on what Information Visualization through 9 directives, why information visualization differs from information art or infographics. 1. Form follows function 2. Interactivity is key 3. Cite your source 4. Power of narratives 5. Do not glorify aesthetics 6. Look for relevancy 7. Embrace time 8. Aspire for knowledge 9. Avoid gratuitous visualizations How to have a constructive w...
Read more

Game Art - Art bible - Final Compilation

Image
Week 15-16 Jessica Tjoe / 0361482 Game art/ BDCM/ Institute of Innovation and Technology Final Compilation  Instructions <iframe src="https://drive.google.com/file/d/1cUEykU-7-sHzba2V9WJoe5rY1406R5Vj/preview" width="640" height="480" allow="autoplay"></iframe> Game studies Figure 4.0: Game studies 1_No Straight Roads Figure 4.1: Game studies 2_Guilty Gear Strive Game studies 3_Zenless Zone Zero Concept Refinement Figure 4.3: Character refinement front view Figure 4.4: Character Refinement_3/4 view Character Variations ...
Read more