Interactive Design | Project 3: Creating a Single-Page Website

-
04.07.24 - 03.08.24 | Week 11 - 15
Hanson Pea Wei Hao || 0359463
Interactive Design || Bachelor of Design (Honours) in Creative Media || Taylor's University
Project 3: Creating a Single-Page Website

Lists



Instructions



In this web design project, I need to create a single-page website dedicated to my favorite topic. This project will help to develop my web design and development skills while allowing me to showcase my passion for the topic of my choice.

For Artist Selection, I have chosen IU which is a very famous K-pop for my website. After doing some references. I have made a proposal for it and ask feedback from Mr. Shamsul.

Proposal:


After getting approval from Mr. Shamsul, I started working on the prototype and this is what the phototype looks like.
Fig 1.1, Prototype for website

I started building code based on this prototype.
Fig 1.2, First page of the website

After doing the first version of my website, I got some feedback from my friend and realized that my code was not that mobile-friendly. SO I refix the code to make it mobile friendly.


Fig 1.3, mobile not friendly pic

Fig 1.4, mobile not friendly pic

I decided to add a social page which is not in my prototype but facing so many problems and bugs. which either will stick to my footer or cannot align well on my phone.

Fig 1.5, The first version of social media

Fig 1.6, some bugs appear in the website

After fixing a lot of bugs and making my code mobile-friendly below is the final result.

Fig 1.7, Proof for mobile friend


Final Outcome

<A Fan Page For IU>


Reflections

I really enjoyed this task, it let me know more about how to make a proper website from my own experience. Doing research making my own prototype and building a responsive website for it. I need to say coding is really addictive to me, every time I do a feature, I will continue to build another feature because I find some of the code is really interesting to build. the only things I don't really like about code are when I face bugs and can't find them and spend lots of time finding and fixing bugs. fixing bugs is really challenging and takes lots of time. It really feels great when you get to fixing a bug after being stuck in a bug is so a long time. 

Comments

Post a Comment

Popular posts from this blog

Typography/ Task 1:Exercise

-
Image
25 September 2023/ Week 1- Week 6 Hanson Pea Wei Hao 0359463 Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University Task 1: Exercise List/ Jump link 1. Lectures 2. Instructions 3. Feedback 4. Reflections 5. Reading LECTURES Week 1:  Summary of class: Mr Vinod has briefed us on the module information booklet and ideas about how we going to start the module. He also talks about the rules and some advice for typography. Then, the class started, and we followed a video he made by himself about how to create a blog in Blogger. In the video, we learn about how to use compose and HTML, label the blog, and more. Lecture 1: Typo_0_Introduction -The importance of typography in our daily life. Calligraphy: The types of writing style. Lettering: Drawing the circumference of the letter Typography: The art and technique of writing and arranging language to become legible, readable, and appealing when displayed. Font: a set of printable or displayable typography or
Read more

Digital photography & Imaging / Task 1

-
Image
5 October 2023-  26 October 2023 / (Week 2 - Week 5 ) Hanson Pea Wei Hao / 0359463 Digital Photography and Imaging / Bachelor of Design (Hons) in Creative Media  Task 1: Exercise 1 Lists 1. Instruction 2. Tutorials 3. Feedback 4. Reflection INSTRUCTIONS Task 1| Exercise 1:Digital Collage Our first task was to create a digital collage by only using a set of images provided to us.   Fig 1.1, Composition 1 Fig 1.2, Composition 2 Fig 1.3, Composition 3 After getting feedback from Mr. Martin, he suggested that my composition 3 would be my final art for digital collage. Task 1| Exercise 2: Digital Imaging 1. Hearst mansion For this exercise, We have been learning to combine a character named Shazam into the Hearst mansion. Fig 2.1, Hearst mansion Fig 2.2, poster of Shazam Fig 2.3, Combine of Shazam and Hearst Mansion After that, We need to recreate with the same process but this time, we need to change the Shazam to myself. Fig 2.4, Hearst mansion with full body Self-portrait Task 3: B&a
Read more

Typography: Task 3: Type Design and Communication

-
Image
13 November 2023-  17 December 2023 / (Week 8 - Week 12 ) Hanson Pea Wei Hao / 0359463 Typography/ Bachelor of Design (Hons) in Creative Media Task 3: Typographic Exploration and Communication Lists 1.  Lectures 2. Instruction 3. Feedback 4. Reflection 5. Reading LECTURES All Online Lecture Note Week 8: Summary of class:  Independent's Leaning Week Week 9: Summary of class:  In this class, Mr. Vinod showed us some past year students' excellent e-portfolios and told us how can we improve our e-portfolios. After that, He had a feedback section for each student individually for our sketch and taught us how to digitize it. Week 10: Summary of class:  This week, Mr. Vinod told us to send the typeface to give us feedback. after that, He talked about the importance of creating a correct and good E-portfolio. After that, he showed current students the best example to us, he told us to fix our e-portfolio if we had problems with the last two that we handed in.  Week 11: Summary of clas
Read more