Interactive Design | Final Project

on
17.10.2023 - 10.10.2023(Week 8 - Week 16)
Caitlin Ong Lynn Dee / 0343801 / Bachelor of Design (Hons) in Creative Media
Interactive Design 
Final Project 

LECTURE

Week 11
Mr. Shamsul reviewed our sketches and planning.


Week 12
Mr. Shamsul reviewed our prototype.


Week 13
Mr. Shamsul reviewed the progress on our webpage.


Week 14
It was an online consultation and Mr. Shamsul reviewed the progress on our webpage.

INSTRUCTION

 

Final Project - Creating a Single-Page Website for Your Favorite Artist

We have to create a single page website, dedicated to our favorite artist. 

Requirements:
  • Artist Selection: 
    • Our favorite artist will be use as the subject of the website. The artist can be a musician painter, actor, or anyone in the creative field.
  • Content:
    • Header: artist name and a brief tagline
    • Introduction: write an overview on the artist's background and provide reasons why you admire them.
    • Gallery: Showcase: Showcase images, videos, or other multimedia related to the artist's work. 
    • Biography: write a brief biography or description of the artist's life and career.
    • Contact Information: If applicable, include contact details or links to the artists social media profile
    • Design Elements: Choose the color scheme and fonts that reflects the artist personality. Malke sure the composition of the layout is visually appealing. Create a responsive design that adapts to different screen sizes. 
    • Navigation: Create a smooth scrolling navigation or simple menu that allows users to jump to different sections of the page.
    • Interactivity: Consider adding interactive elements such as image sliders, hover effects or lightboxes for multimedia content. 

Planning

Around in Week 11 we are expected to create five sketches of the web design, a mood board, color palette, Typeface. and visual references.

The artist of my choice is, Adele. I search around other musicians' website for visual reference I intend to create minimalist composition, with a sleek design to reflect on Adele genre of music which is soul. complete with a dark color scheme, and mixture of serif and sans serif to achieve an elegant look.

Fig 1.1 Webpage Sketches (5/11/2023)


Fig 1.2 Mood Board (5/11/2023)

Fig 1.3 Colour Scheme (5/11/2023)


Fig 1.4 Font (5/11/2023)


Prototype

I created my prototype in Miro. I created a low fidelity for both desktop formant and mobile formant. and high fidelity for desktop formant. I have created two compositions to find out which one is suitable. I wasn't happy with all the color scheme I picked for the planning stage; I ended up picking an earthy tone to match the whole entire composition. 

Fig 2.1 Low fidelity and high-fidelity prototype (12/11/2023)


Creating the Webpage

Stage 1

First, I wrote the content in HTML, and Uploaded the pictures.  

Fig 3.1 HTML preview (18/11/2023)

Fig 3.2 HTML progress (18/11/2023)

Stage 2
From the prototype I left out the updates section and the membership section due being unnecessary, I added the in the CSS code to customize the website. The code for gallery photo is taken from a website that  Mr Shamusul provided us, and I added in the photo that featured Adele. I added a video section featuring her music videos. But the problem is that the thumbnail didn't show up. The subscription section was also added.


Fig 4.1 CSS progress (18/11/2023)


Fig 4.2 HTML and CSS code for video section (18/11/2023)

Fig 4.3 HTML and CSS code for gallery section (18/11/2023)

Stage 3
I felt that the aesthetic was lacking. I replaced the header picture with a new one. I added picture next to the about section. I included a tour booking section along with the interview section. But from  Mr Shamusul Feedback I didn't follow the requirement and I was adding too much content.


Fig 5.1 Prototype of stage 3 from Miro (18/11/2023)


Fig 5.2 HTML and CSS for Update "About" section (18/11/2023)

Fig 5.3 HTML and CSS code Tour Booking section (18/11/2023)

Stage 4 
I deleted the unnecessary, content and added. Introduction and a contact section. I had to replace the gallery photos because I was unable to add in the hover effect animation, with the pictures being in different shapes. 

I began developing the responsive design. But since I use too many absolute and relative positions for of the elements. The layout is not adaptable. I added in links for the navigation section. 

Fig 6.1 Prototype for stage 4 from Miro (25/11/2023)



Fig 6.2 HTML and CSS code for Biography section (25/11/2023)



Fig 6.3 HTML code for navigation links (25/11/2023)

Fig 6.4 HTML and CSS code for updated gallery section (25/11/2023)
 
Fig 6.5 HTML and CSS code for updated contacts (25/11/2023)

Fig 6.6 HTML code for links into social media (25/11/2023)



Final Stage 
I removed the decorative elements, which are the rectangles and horizontal rule. I added in the logo in the navigation section. For the introduction section, the biography section and the subscription section, I used a padding and margins instead of position absolute and relative to enable to it to make the format responsive. 

Fig 7.1 HTML and CSS code for logo (3/12/2023)

Fig 7.2 HTML and CSS code for header image (3/12/2023)

Fig 7.3 HTML and CSS and media code for final introduction section (3/12/2023)   

 
Fig 7.4 HTML, CSS and media code for final biography section (3/12/2023)
Fig 7.5 HTML, CSS and media code for contact (3/12/2023)

Fig 7.6 HTML, CSS and media code for final subscription section (3/12/2023) 

Fig 7.7 HTM, CSS and media code for final social media section (3/12/2023)
 

Final Outcome

HTML & CSS Code:
https://drive.google.com/drive/folders/1nMsYPzt5cTLWtak9BaXAUGWGXHidok0e?usp=sharing

Netlify Link:
 Project 3 (caitlinong-project3.netlify.app)


Fig 8.1 Final layout for Desktop & Mobile (3/12/2023)


FEEDBACK

Week 11:
  • We presented our planning to our lecturer. 
  • Mr Shamsul Hamimi prefers sketch #3. He told me to find a compatible to all devices, as some fonts are unavailable in other devices. 
  • Mr Shamsul Hamimi suggested the colour scheme gold, blue and black to fit Adele's personality.
Week 12
  • We presented our prototype.
  • Mr Shamsul Hamimi likes the first draft of the prototype.
  • Mr Shamsul Hamimi advised not to put different patches with different colours.
Week 13
  • I had too much content.
  • Mr. Shamsul Hamami advised to make the navigation simple and to follow the guidelines in Google Classroom.
Week 14
  • Mr Shamsul Hamimi advised not to make the animation complicated.
  • The layout looks good

REFLECTION

Experience

It was an interesting experience where I can expand my knowledge on web design from Project 2 but coding was really my specialty where I stumbled upon various obstacles when it comes to web design. Majority of the time, it was frustrating, but it was manageable when I realized I need to simplify some parts to make it more effective. 

Observation 

The coding that I conducted was trial and error and from the previous project, I felt I was actually more aware of coding rules with Mr Shamsul giving the class an exercise to help all of us on Project 3.

Findings

I tried searching tutorials on YouTube for guidance. Like before when I put in a border inside my code, I noticed there were a lot of problems that is hard to notice. As I was constructing the desktop version, the rules that I applied did not help the mobile format to be compatible. Now I know that whatever I do in the desktop format greatly impacts the mobile version. Thus, I had to find new ways to create rules that is easier to make the mobile version compatible. 



Comments

Post a Comment