INTERACTIVE DESIGN/PROJECT 3_SINGLE-PAGE WEBSITE FOR FAVOURITE ARTIST

 

24.10.2023 - 10.12.2023 (Week 09 - Week 15)
TAN JIE YING / 0353959 / BACHELOR IN DESIGN OF CREATIVE MEDIA
INTERACTIVE DESIGN
PROJECT 3 / SINGLE-PAGE WEBSITE FOR FAVOURITE ARTIST

INSTRUCTIONS


Project 3/ Single-Page Website for Favourite Artist
In this project, our aim is to create a single webpage for our favorite artist. It can be a musician, painter, actor, or any other creative individual or group. In this webpage, we need to include the artist's information, gallery, biography, and contact. At the same time choose a color palette that you think suits the artist.

Progress

Followed by the brief, I have chosen an artist called, Ed Sheeran. Next, I started sketching, finding the color palette and the font.

Figure 1.1 Moodboard

Figure 1.2 Sketch

Figure 1.3 Sketch

Next, I digitized the sketch in Figma.

Figure 1.4 Sketch

I started making my webpage by creating the heading and a container with 4 sections (Introduction, MV, gallery, and footage)

Figure 1.5 Progress

I finish the easy part (key all the words, and choose the final font), 

Figure 1.6 Font Chosen

After this, I used the code website that was shared by sir to find a suitable carousel and gallery. 

Websites:

https://getbootstrap.com/

https://www.w3schools.com/


Figure 1.7 Carousel

Figure 1.8 Image Grid

I followed the instructions below and copied &pasted the code given into my HTML.


Figure 1.9 Progress

I found a website that has some nice contact forms and chose one of them.

Website:

https://codepen.io/trending

https://codepen.io/bobbykorec/pen/qOGbyr

Figure 1.10 Chosen form

Figure 1.11 Form Code


Final Single-Page Website

Figure 2.1 992 PX Size


Figure 2.2 430PX Size


Figure 2.3 HTML and CSS Code

FEEDBACK

Week 11

  • The font size is too big. Suggest (H1: 2em, H2: 1.7em).
  • Make sure the two fonts chosen, one of them is formal.


Week 12

  • Choose one font that has many styles for all the words on the webpage.
  • Add a contact form beside the social media, so It won't seem too empty.

Week 14

  • Use JavaScript for the carousel and gallery.

REFLECTIONS

This project has proven to be quite challenging for me, as I endeavor to create a similar webpage to the artist's official website. Specifically, my focus is on incorporating both the Music Video (MV) and Album sections, and to achieve this, a solid understanding of JavaScript becomes essential.

Navigating through the intricacies of JavaScript has been a learning curve for me, particularly when determining the optimal placement for the links. Despite the initial complexity, this process has afforded me valuable experience in leveraging JavaScript functionalities effectively.

Admittedly, I'm still in the early stages of this journey, and there's much more to unravel. As I delve deeper into JavaScript, I anticipate gaining a more profound understanding and honing my skills further. This project serves as a stepping stone, laying the foundation for a continuous exploration and mastery of the intricacies within the realm of web development."




Comments

Post a Comment

Popular posts from this blog

DIGITAL PHOTOGRAPHY AND IMAGING - PROJECT 2

Image
Week 4 - Week 9 TAN JIE YING / 0353959 / BACHELOR IN DESIGN OF CREATIVE MEDIA DIGITAL PHOTOGRAPHY AND IMAGING PROJECT 2 Project 2A: Double Exposure Part 1 (Follow Tutorial) Figure 1.1 Part 1 Final Outcome Part 2 ( Own Portrait Double Exposure ) Figure 1.1 Part 2 Final Outcome Project 02B - Poster Design Final Poster: Figure 3.1 Maybank Final Poster Title: "Before The Storm" Summary: The concept of this poster draws inspiration from the yin-yang philosophy. Two tigers are positioned on opposite sides, locked in a captivating gaze, poised for battle at a moment's notice. The letter 'M' represents the sun. It was also the judge of this war. M= Maybank. The poster's composition, setting, and colors draw inspiration from the rich tapestry of Greek mythology. Reflection I have explored more layers, colors, and filters in this project to create a d ouble exposure. I 'm a changeable person. I consciously selected elements like clouds, rain, waves, and a grey backg...
Read more

INFORMATION DESIGN/ FINAL PROJECT

Image
    03.02.2025 - 23.03.2025 (Week 1 - Week 7) TAN JIE YING / 0353959 / BACHELOR IN DESIGN OF CREATIVE MEDIA INFORMATION DESIGN FINAL PROJECT INSTRUCTIONS Final Project: Infographic Video Animation In this group project, we have to create a basic video animation based on our FLIP research topic. Using a structured design framework, we aimed to present information engagingly to a target audience, focusing on one of three objectives : Creating awareness Explaining a process Defining a concept. Progress Week 1 - 3 We have grouped a team of 8 people.  Rachel Yeo Rong Qing (Group Leader) Jia Wen Bing Ruthlene Chua Zhen Si Liu Zi Yu Tan Jie Ying (Me) Isabel Tan Xen Wern Nadhrah Binti Abdul Razak Myra Elida Binti Abd Azis We came up with several topics, such as recycling, cybersecurity, women's safety, traffic safety, dengue fever, and more. After voting and receiving feedback from our lecturer, we finalized our FLIP topic as "Cybersecurity" . After confirming the topic, each of...
Read more

INFORMATION DESIGN/ PROJECT 1 & 2

Image
  18.02.2025 - 25.02.2025 (Week 3 - Week 4) TAN JIE YING / 0353959 / BACHELOR IN DESIGN OF CREATIVE MEDIA INFORMATION DESIGN PROJECT 1 INSTRUCTIONS Lecture Note Week 3 Miller’s Law states that the average person can hold 7 ± 2 items in their short-term memory at a time. I often apply Miller’s Law when I encounter words I don't know how to spell or complex words by breaking them into chunks to read and remember. For example: Unbelievable ( un - believe - able ) Week 4 Week 5 Tips for constructive workflow : 1. Understand the Question Clearly define what you are designing and its purpose. 2. Construct a Strategic Plan Gather data, analyze pros and cons, study case studies, and understand the workflow before proceeding. 3. Fill in the Blank Keep track of your progress by organizing, grouping, and labeling your work. 4. Get Some Inspiration and Ideas Explore references and insights to improve your design. 5. Set a Perimeter While ideas are limitless, focus on identifying strengths...
Read more