Interactive Design - Final Project / Design, Exploration & Application
7.10.2023 - 10.11.2023 (Week 10 - Week 14 )
Chong Hui Yi / 0363195
Interactive Design / BDCM
Chong Hui Yi / 0363195
Interactive Design / BDCM
Final Project / Design, Exploration & Application
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/19K7sai7Rdfy3_GxqSVJlxpkQ_RCjyOUe/preview"
width="640" height="480" allow="autoplay"></iframe>
"In this web design project, you will create a single-page website
dedicated to your favorite artist. This project will help you develop your
web design and development skills while allowing you to showcase your
passion for the artist of your choice."
Sketch:
My favourite artist is Ms. Cat (although I later changed due to insufficient content). My reference is Fig. 1.0. I aim to create a calming artistic style with a clean and organized website layout.
.jpeg)
Fig. 1.0 Reference #1
I initially sketched six drafts, but it seems I overestimated myself, finding many challenging to execute at my skill level. Additionally, I switched to another artist, Joe Hisaishi (whom I also adore), and created another draft, as shown in Fig. 1.2.
Fig. 1.1 Six sketches #1
Fig. 1.2 Sketch #2
Prototype 1:
At first, I intended to use the colour palette from Studio Ghibli films as the main colour scheme. However, due to layout and colour issues, Fig. 2.0 looks unappealing and somewhat dull.
Fig. 2.0 first attempt prototype
I found someone on Pinterest who created images combining stills from Studio Ghibli films with the movie title and year. I thought it would be suitable for the gallery. However, on Pinterest, each image varies slightly in size, font size, and layout, lacking consistency. So, I found new images and added text using the same font in Figma, as shown in Fig. 2.2.
Fig. 2.1 Gallery layout - image taken from Pinterest
Fig. 2.2 represents the first version of my prototype. However, in week 11, I received some feedback, prompting me to make substantial design modifications.
Fig. 2.2 Prototype #1
Prototype 2:
Joe Hisaishi is a composer and musician, so I felt the website might need a more formal design. I found a new reference (refer to Fig. 2.3), with the primary colours being black and white to evoke a more serious atmosphere.
Fig. 2.3 Reference #2
Fig. 2.4 Second version
For the Introduction section's design, I wanted to arrange images and text diagonally. However, when working in Dreamweaver, I wasn't sure how to implement it using code. So, I changed my mind and enlarged the CD on the left, with text on the right. Later, I plan to add a rotating animation to the CD.
Fig. 2.5 Introduction design process
I sought inspiration from other websites and decided to design the Contact section with a black background and white text. I believe placing the copyright (not sure if it's correct) on the left will enhance the overall layout.
Fig. 2.6 Contact & Footer design
process
Fig. 2.7 represents the biography section. I spent a considerable amount of time searching for this portrait, which was originally in colour. To align with the overall colour scheme, I converted it to black and white for use as the background image.
Fig. 2.7 Biography design process
Dreamweaver:
The next step is to code my website in Dreamweaver. I've found that using 'display: flex' for the navigation would be better, ensuring alignment between text and logo and preventing layout issues on other devices.
Fig. 3.0 Navigation HTML
Fig. 3.1 Navigation problem & solution
In the Introduction section, I used 'animation: rotate' to make the CD rotate, and 'margin-left: -50' to make it only partially visible. However, I encountered an issue resulting in the rotated image appearing incorrectly, as shown in Fig. 3.4. After investigating, I discovered that the problem was caused by the image's 'padding-top.' Once I removed it, the rotation worked correctly. Fortunately, I identified the issue.
Fig. 3.2 Movement has an issue
Fig. 3.3 Home & Introduction
HTML/CSS
Fig. 3.4 Problem solved
In the Gallery section, I searched online for various HTML and CSS layouts, but none met my requirements. I then turned to ChatGPT for guidance on how to create a 3x3 grid with text appearing when the mouse is over an image.
Later, I thought it would be more suitable to add music, as it enhances the experience. Otherwise, it might convey that the films are Joe Hisaishi's works rather than his musical compositions. I am personally satisfied with the Gallery's effect.
Fig. 3.5 Gallery HTML (image 1 as an example, others are the
same)
Fig. 3.6 Gallery CSS
Fig. 3.7 Gallery preview
When working on the Biography section, I noticed that using 'border-radius' on the rectangles inside looks peculiar, and it doesn't create rounded corners as expected. Hmmm... strange. However, it doesn't affect the overall design, as my original prototype had right angles.
Fig. 3.8 Biography HTML & CSS
.jpg)
Fig. 3.9 Biography
In the Contact section, the typing area was a rectangular box. To achieve a design with only the bottom border, I set 'border-top,' 'left,' and 'right' to 'none,' leaving only 'border-bottom.' In the first image of Fig. 4.0, I made the background of the typing area pink to facilitate adjusting its dimensions.
Fig. 4.0 Contact & Footer
Fig. 4.1 Contact & Footer HTML
Fig. 4.2 Contact & Footer CSS
Different Devices:
I find the most challenging part to be ensuring the website runs smoothly on other devices. I invested a significant amount of time on this, feeling quite frustrated. I created layouts for four different device sizes: 1024px (laptop), 768px (tablet), 425px (mobile L), and 320px (mobile S).
Fig. 5.0 Different devices
I made 'introduction' display: block, positioning the rotating CD at the boundary between 'home' and 'introduction.' However, I encountered a problem that perplexed me for two days: Dreamweaver's browser preview differed from the actual website on other devices. You can see the specifics in the video clips in Fig. 5.0 and Fig. 5.1.
Fig. 5.0 Dreamweaver
browser preview
Fig. 5.1 Published website
Two days later, I realized that I had forgotten to include a crucial line of code, as shown in Fig. 5.2. Once I added it, the issue was resolved, and I felt incredibly relieved.
.jpg)
Fig. 5.2 Missed a line, caused
the error
Fig. 5.3 shows the CSS for mobile S. The CSS for other devices differs only slightly in font size and some padding, so I haven't included the CSS for the other devices.
Fig. 5.3 Mobile s
CSS
Fig. 5.4 Final
website
Final
Outcome: https://chonghuiyi-finalproject.netlify.app/
FEEDBACK
Week 10:
Because the artist I selected doesn't have much information and biography to write about, Mr. Shamsul recommended that I switch to a different artist, even if it's not my personal favorite. This is because, without sufficient content, the webpage would have a lot of blank spaces.
Because the artist I selected doesn't have much information and biography to write about, Mr. Shamsul recommended that I switch to a different artist, even if it's not my personal favorite. This is because, without sufficient content, the webpage would have a lot of blank spaces.
Week 11:
Remove the background blue from 'Why I Admire' and choose a less contrasting font. The font for 'Gallery' is not related to the others, use the same font and bold it. Avoid turning each section into a grid.
REFLECTION
During the process of working on my final project, I encountered numerous
difficulties. Sometimes, after undoing several actions, Dreamweaver would
suddenly close, and all files would revert to the latest saved state,
fortunately not too far from the last save. At times, I wasn't sure what I
deleted, causing the entire CSS to malfunction, which was incredibly
frustrating. Resolving these issues consumed a considerable amount of
time, and in the end, I feel somewhat dissatisfied with the results, but
there's no time left for further revisions. I deeply regret not managing
my time effectively.
The most challenging aspect, in my opinion, was ensuring the website's
functionality across all devices. I achieved this to some extent, but it
left me quite frustrated, and the final outcome doesn't seem to match the
preview in Dreamweaver.
Apart from these challenges, I enjoyed the final project because of its
high level of creative freedom, allowing me to choose a theme I liked.
Comments
Post a Comment