Interactive Design - FINAL PROJECT

23/10/2023 - 10/12/2023 (Week 9- 14)

Jordan Axel / 0354894

Interactive Design / Bachelor of Design in Creative Media / Taylor's University

Project 3

INSTRUCTIONS

Class summary

Week 10: Wireframe
Week 11: Prototype
Week 12-14: Process
Week 15: Submission
Progress


fig 1.0, 5 Sketches

5 sketches that i sketch for the album I refer to a lot of artists and ended up mixing all of it and 

fig 1.1, Figma Sketch

Dreamweaver
fig 1.2, Dreamweaver
I added album pictures that can be click through and open the album on Spotify

fig 1.3, Dreamweaver x Spotify
                                
I embedded from Spotify it self so it can play directly from the web.

fig 1.4, W3school
After learning from what Mr. Shamsul told, I also search for codes that can be used for my website. such as this sign up code that I of course modify some to fit in my website.

fig 1.5, footer
I use hyper link for the social media logo and the republic records website. All links are legit except for the sign in code.

                                                                 Figma Sketch PDF File
Netlify link: metroboomin.netlify.app

                                                                    HTML code in pdf
                                                                CSS code in pdf


Reflection

In this project I have learned a lot about how to code HTML and CSS. I have to restart the website 3 times, I ended up using Mr. Shamsul's template and change it a bit. I wanted to do exactly like the one I did in figma but the responsiveness is a problem and it only has 4 panel not 5 like Mr. Shamsul. suggested. 

Comments

Post a Comment

Popular posts from this blog

Minor Project

Image
27 / 09 / 2024 — 20 / 12 / 2024 (Week 01 — Week 14) Jordan Axel / 0354894 Minor Project / Bachelor of Design (Hons) in Creative Media / Taylor's University Week 1 We are introduced on what is going to happen for this module and explained the MIB. After that we are shown the clients and we can choose on our own. We must form a group of 5-7 with maximum of 3 individuals with the same specialization. I choose Expedio Design with their new innovative whiteboard called "X-board". I ended up part ways with my friends and picked a group that wants Expedio.  Week 2 We had a couple meetings before our second week class. We use google meet and we discuss on who is going to research on what. I researched on the indirect competitors of X-board such as Miro and Interactive white board(IWB). For the second meeting we discussed on what que...
Read more

Major Project 1

Image
 04  / 02 / 2025 — 19 / 03 / 2025 (Week 01 — Week 07) Jordan Axel / 0354894 Major Project 1/ Bachelor of Design (Hons) in Creative Media / Taylor's University INSTRUCTION Figjam Link Week 1 This week, our batch gathered in the lecture theatre for the major project 1 briefing. Our lecturer, Mr. Kamal explained the project and told us that we needed to work with a team of 4. I decided to group up with Michael, Nathan, and Ian. Also, our group got Mr. Shamsul as our supervisor and we use Figma Jam for brainstorming platform. I was picked as the group leader by Mr. Shamsul. After the briefing, we brainstormed on what are we going to do. Each of us give 1 idea to propose, I put on an app that can connect gamers with the same personality to play together or in short tinder for gamers.  Week 2 We went to consult with Mr. Shamsul and he went through all our ideas. Michael got He...
Read more

Experiential Design - Task 3

Image
28 / 10 / 2024 — 02/ 12 / 2024 (Week 08 — Week 10) Jordan Axel / 0354894 MMD 60204 / Experiential Design / Bachelor of Design (Hons) in Creative Media / Taylor's University Week 9 In this week we still have tutorial on Unity where we create a animation that is triggered if its pointed with the camera. Final Outcome   Week 10 N/A I was under the weather. Week 11 this week's tutorial is about how to change between color and models in unity.  Task 3 fig 1.0 unity Firstly, I put in the UI all in the unity one by one. After that I insert buttons and make the scripts. fig 1.1 scripts From the button script to loading screen script and also the transition. ...
Read more