Interactive Design - Project 3

-

Interactive Design
28.8.2023 - 1.12.2023
Johnny Lam Wee Zhe (0363436)
Bachelor of Design in Creative Media

INSTRUCTIONS

 

Project 3 - Single Page Website

The third and final project of the website is rather similar to the first two projects, join together in the one but instead of making a resume, we are tasked with creating a single page website featuring our favorite artist; whether they are a musician, a painter, a songwriter etc.

I personally find some trouble finding an artist that I like, which is a new band and therefore there aren't much content for them. So I decide to pick someone with a more longer career. At first, I decide to pick Carrie Underwood. So I decide to plan out the color and website that represent her a whole.

   
Fig 1.1 Website Proposal Draft (30/10/2023 Week 10)

However, after some research, I realize that Carrie Underwood has her own website stating about her career and her work. Not wanting that to be influence in my work, I decide to pick someone else for my project where I stumble upon Lady Gaga.

Although Lady Gaga herself has her own website, the website is about selling merchandise, ticket or a communication to her agent and nothing about her bio. So I begin planning to create website about her.

 

 Fig 1.2 Website Proposal (5/11/2023 Week 11)

The red and yellow color scheme is gather from the color of one of her album and the font I pick is a semi-slab which is the exact style of the font in her albums as well. I also pick a sans serif to help with the contrast and give the website a more modern look.

From there I gather three reference websites for my design, one of which is her own website, another two is a website template from a website creation companies that shows their sample website. Roughly based on the website references, I begin to create the website prototype on figma and show it to Mr. Shamsul.

 

  Fig 2.1 Website Prototype Draft (5/11/2023 Week 11)

He gives a few feedback especially with the font being too big and that I should apply sans serif to the text body. He also suggest that some time to observe some other sites. So I went ahead to observe the site closer and redesign the website. This is the final prototype design:

 

 Fig 2.1 Website Prototype Draft 2 (13/11/2023 Week 12)

The final design would look approximately something like this. However, this is subject to change as I begin to code the website and may look slightly different from the actual website, likely due to the limits of my coding skills and the translation to an actual website to see whether it looks good as a website or not.

First I start to code in content of the web using HTML.

Fig 1. Website without CSS (26/11/2023 Week 14)

Then, I applied the web with CSS and apply whatever I have learnt in class. From the top of the web page down to the bottom. In the bio section of the website, I use the recently bootstrap and apply the accordion feature onto my website. Here is where I find the accordion component.

As I make way down to the gallery, I rely on this W3school to help with gallery but have accidentally make it the way it is so I just leave it as is and apply the hover effect to the image.

Finally, in the contact section of the website, I copy the code from figma using the rendition plugin in order to use the icon.

Fig 2. Copying Code from Rendition Plugin (4/12/2023 Week 15)

FINAL RESULT

Link to the website:
 
 Fig 3.1 Website View (Computer View) (5/12/2023 Week 15)

Fig 3.2 Website View (Mobile View) (5/12/2023 Week 15)

REFLECTION

Building a website for an artist you're passionate about or in this case, someone you admire quite a bit is quite an experience. The web as a whole is rather similar to all of the other projects combined into one. Things can turn out very different from the original design of my website quite often especially when it is limited to my skills and what using merely html and css can do. I would have taken time to learn javascript for myself to create  more immersive website but due to time restriction, I'll save that for a personal project if I ever decide to code my own website. I have to say that I am rather proud of event section of the website especially when this is figured out by me without any tutorial. Despite doing the same project, I still get to learn something new in this project.

Comments

Post a Comment

Popular posts from this blog

Minor Project Compilation

-
Minor Project 23.9.2024 - 5.11.2024 Johnny Lam Wee Zhe (0363436) Bachelor of Design in Creative Media  INSTRUCTIONS   TASK 1      TASK 2      TASK 3 INDIVIDUAL TASK PROCESS     REFLECTIONS Week 1 D – Describe objectively what happened On the very first week, I wasn’t really there with the rest of the group as my class takes place in the morning. I was initially joining another group from the morning class. Since Mr. Mike has mentioned that he has no problem with students joining the group of another class. I decided to join this group since there are people I am familiar with here. On the group chat, that is when we get to select our first role which is the first research. I choose technology for my part and to get research about the AR glasses this company uses. I – Interpret the events The reason why I decided to move is because my first group does not ...
Read more

Creative Writing Compilation

-
Image
Creative Writing 23/7/2024 - 3/1/2025 Johnny Lam Wee Zhe (0363436) Minor in Performing Arts INSTRUCTIONS ASSIGNMENT ONE - SHORT STORY ASSIGNMENT TWO - MONOLOGUE   ASSIGNMENT THREE - POEM WRITING ASSIGNMENT FOUR - PEER REVIEW MISCELLANEOUS  Book Cover for Short Story Fig 1. Wilted Yellow Flower Cover Monologue Character Background REFLECTION I have numerous thoughts about this module. I must admit that this module is actually a lot more fun than I have anticipated. All of the projects are something I found pretty interesting and I personally find the short story to be the most interesting of the four. This module not only taught me about creative writing but I also learn also learn more about myself in the process. One of the most challenging project I find in this module is Assignment Four. I have a difficult time giving critique about other people's work especia...
Read more

Portfolio

-
Image
JOHNNY LAM'S PORTFOLIO Navigational Link: 3D Animation Motion Graphics Animation Stop Motion Animation Animatic Video Editing Audio Editing Environmental Design Illustration    3D Animation   Fig 1. 3D Animation Motion Graphics Animation Fig 2.1 Motion Graphics   Fig 2.2 Motion Graphics 2   Fig 2.3 Motion Graphics 3   Fig 2.4 Motion Graphics 4 Stop Motion Animation Fig 3. Stop Motion Animation Animatic   Fig 4. Animatic   Video Editing Fig 5.1 Video Editing      Fig 5.2 Video Editing 2     Audio Editing Fig 6.1 Audio Editing 1   Fig 6.2 Audio Editing 2    Environmental Design   Fig 7.1 Environmental Design 1     Fig 7.2 Environmental Design 2     Fig 7.3 Environmental Design 3   Illustration   Fig 8.1 Illustrati...
Read more