Interactive Design/ Final project: Design, Exploration and Application

Interactive Design/ Final project: Design, Exploration and Application

22 /04/2024 - 03/08/2024 (Week 8 - Week 15)

Isabel Tan Xen Wern/ 0355602/ Bachelors of design in creative media/ Taylors University

Interactive Design GCD 60904

Final project: Design, Exploration and Application

JUMPLINK

Process :

Dreamweaver

Final Submission

INTRODUCTION

Figure 1.1

Mib (19/06/24)

FINAL PROJECT: DESIGN, EXPLORATION AND APPLICATION PROCESS

Visual Reference

Figure 1.2a

Visual Inspiration (29/06/24)

Figure 1.2b

Visual Inspiration (29/06/24)

Figure 1.3a

Visual Inspiration (29/06/24)

Figure 1.3b

Visual Inspiration (29/06/24)

Figure 1.3c

Visual Inspiration (29/06/24)

Figure 1.3d

Visual Inspiration (29/06/24)

Feedback/ personal opinion

give options on whether they are satisfied with the website
ask them for personal opinion on the mmusical and their own favourite songs.

Sketches:

Figure 1.5

Sketch 01 (1/07/24)

give articles about the story line.

Figure 1.6

Sketch 02 (1/07/24)

a website to explain my favorite songs in the musical, description of what the song is about and why it is my favorite.
5 favorite songs .

Figure 1.7

Sketch 03 (1/07/24)

Contents:

- Introduction

Links to the trailer, what is it, track list.

- Sportify playlist

the relevant Spotify playlists from the official account and relevant playlists

-Previous reviews

for users example

- 3 of my song picks

linking the songs from Spotify and then briefly explaining the song.
lyrics
the reason i chose the song

- Personal opinion

a form made for viewers to send their opinions of the musical.

Moodboard:

Figma: CLICK HERE

Prototype:

Figma: CLICK HERE

DREAMWEAVER PROCESS

Figure 1.8

font link (07/07/24)

Using the typeface 'Trajan-Pro" for the <h1> and <h2> because it is a similar font used in the Hamilton original title.
Using Roboto as the <p> and the rest of the headers because it is also most similar to the smaller text in the Hamilton poster.

Navigation bar

Figure 1.9

Navigation bar code (15/07/24)

I made my logo in the middle which is a simple star however i also made it so that users can click it and go to the main page.
I learned that i could just use the star function to make the star.

Figure 2.1

Navi CSS (15/07/24)

Figure 2.2

Navi CSS (15/07/24)

Figure 2.3

star logo CSS (15/07/24)

Made some adjustments to the height throughout the process and checking back to make sure it looks and fits well.

Figure 2.4

Navi Bar Results (15/07/24)

Home Page

Figure 2.5

Home page (25/07/24)

Figure 2.6

Home page (25/07/24)

Figure 2.7

Home page CSS (25/07/24)

Figure 2.8

Home page CSS (25/07/24)

Figure 2.9

Home page CSS (25/07/24)

Using the flex function to make two separate sections, one for the title and one for the image.

Figure 3.1

Home page CSS(button)(25/07/24)

making the call to action button have a line at the button and have color when the curser moves to it for users to know it is a button and now just some words.

Figure 3.2

Home page CSS (menu icon)(25/07/24)

Figure 3.3

Home page CSS (menu icon)(25/07/24)

Figure 3.4

Home page CSS (menu icon / script)(25/07/24)

I used the script function for the menu icon to have a pop up of more specific list of navigation for users.

Figure 3.5

Home page Results(25/07/24)

Figure 3.6

menu icon / navigation drop down results (25/07/24)

Scrolling Navigation

Figure 3.7

Scrolling navigation (30/07/24)

These navigations leads to the you tube videos of each musical live that is available, using the scrolling Navi method with pictures for each song.

Figure 3.8

Scrolling navigation Script (30/07/24)

using the <script> function for the arrow of the scrolling navigation bar.

Figure 3.9

Scrolling navigation CSS (30/07/24)

Figure 4.1

Scrolling navigation CSS (30/07/24)

Figure 4.2

Scrolling navigation Result (30/07/24)

Trailer/poster Section

Figure 4.3

Trailer/intro(30/07/24)

Figure 4.4

Trailer / Intro CSS (30/07/24)

Figure 4.5

Trailer / Intro Result (30/07/24)

Spotify Playlist

Figure 4.6

Embed spotify playlist (30/07/24)

Because one of the Spotify playlist first color is different from the rest, I felt that it didn't look good like that so I chose the grey color which was available for all 4 playlists.

Figure 4.7

Spotify links (30/07/24)

Embedding the Spotify playlists from Spotify for easy access for users.

Figure 4.7

Spotify CSS (30/07/24)

Figure 4.8

Spotify playlist result (30/07/24)

Track List

Figure 4.9

Track list one (30/07/24)

Figure 5.1

Track list two (30/07/24)

Figure 5.2

Track list CSS (30/07/24)

Figure 5.3

Track list Result (30/07/24)

Previous Reviews

Figure 5.4

Previous Reviews (30/07/24)

Figure 5.5

Previous Reviews CSS(30/07/24)

Figure 5.6

Previous Reviews CSS(30/07/24)

Decided to change the design from the white background in the prototype with the advice of sir to change the design.
Blended it into the background of the section instead.

Figure 5.7

Previous Reviews Result (30/07/24)

My Song Picks

Figure 5.8

My Song Picks (31/07/24)

Figure 5.9

My Song Picks (31/07/24)

Figure 6.1

My Song Picks (31/07/24)

Figure 6.2

My Song Picks CSS (31/07/24)

Figure 6.3

My Song Picks CSS (31/07/24)

Figure 6.4

My Song Picks CSS (31/07/24)

Repeated this same process 3 times for the rest.

Figure 6.5

My Song Picks Results (31/07/24)

Figure 6.6

My Song Picks Results (31/07/24)

Form (Your Turn)

Figure 6.7

Form (31/07/24)

Figure 6.8

Form CSS (31/07/24)

Figure 6.9

Form result (31/07/24)

Figure 7.1

adding page (31/07/24)

I wanted to add a page for the submit button to go to as to thank the user for submitting a response.
So i attached another html file.

Figure 7.2

Thank you page (31/07/24)

Figure 7.3

Thank you page CSS (31/07/24)

Figure 7.4

Thank you page result (31/07/24)

Footer (Copyrights)

Figure 7.5

Footer (31/07/24)

Figure 7.5

Footer CSS (31/07/24)

Figure 7.6

Footer Result (31/07/24)

Phone View

Figure 7.7

Phone view (31/07/24)

Figure 7.8

Phone view results (31/07/24)

FINAL SUBMISSION

Netlify Link : CLICK HERE

Figure 7.9

Index HTML code submission(31/07/24)

Figure 8.1

CSS Style code submission(31/07/24)

Figure 8.2

Thanks page HTML code submission(31/07/24)

REFLECTION

Truly a humbling experience but learning from the past assignments, i did do my best to organize better which made the process a lot easier than before. It took a few whole days for me to finish the coding in dream weaver which was very exhausting. however i do think i used up all of my best abilities to do this project as i learned for this class, i really do need to manage my time a lot better as it could take longer than i would've expected which i did learn from the previous assignment. I almost gave up many times because i did not know what i did wrong or what is missing, trying different methods and still no changes were seen on the website page which really tested my patience and knowledge but i managed to pull through after a few too many different attempts and failures.

an observation I had made was that we really had to use a lot of <div> to make everything pull through perfectly. I had to come up with different names however everyname has to be relevant and made easy to find for my own convinience as it it is unrelated it would be difficult to change anything the the later tasks. It is also easier to go section by section instead of starting the the middle which previous assignment me did and gave me a lot of headaches.

Comments