Interactive Design - Project 2

19/6/24 - 26/6/24 (Week 9 - Week 10)

Aisya Diva Anwagodsa (0365505)

Interactive Design / Bachelor of Design (Hons) in Creative Media

Project 2

---

JUMP LINK

1. Lectures
2. Instruction
3. Project 2
4. Final Result
5. Reflection

---

LECTURES

Week 9

Mr. Shamsul taught us how to use columns, this class was held online because the air-conditioner broke.

This is the result of my practice on week 9.

Fig. 1.0 Layout Exercise
(Week 9)

Fig. 1.1 Layout Exercise
(Week 9)

Netlify Link

🔝

---

INSTRUCTION

Working Web Page

The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page.  You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.
Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission

🔝

---

PROJECT 2

Fig. 2.1 HTML & CSS Code
(30/6/24)

Fig. 2.2 CSS File
(30/6/24)

Picture Description:

1. HTML code for the sub heading, I am using id to make vertical timeline to showing my activity during my high school years.  I am also using class to animate/make the timeline interactive, the class and id then styled in CSS.
2. Second picture showing the same part, but the different is, I am using class to make my heading font glow and the glow changing color as well.  The class was vl, then it is styled in HTML using tag.
3. Picture 3 is the CSS file where I styled all most of the website.
4. Image 4 has same is HTML file that has same function as picture 1 - 2 where I put my sub header and profile.
5. (Picture 5 - 7)Where all of the classes were styles, I used glow-text to create glowing shadow,  to adjust the size of the elements (icons), margin, padding, etc.
6. From the CSS file, I also added transition effect for the fonts, icons, and my profile picture in the header section.  

The picture below was the header section, which I think is the most interactive part.  My concept was a simple design but still eye catchy, that is why I decide to all animated elements (basically using transition and scale, and combine it with the glowing effect that can be changed automatically in every second.  For the glow effect, I an using HTML and tag, so I don't need CSS for this problem.  The tag helps me to style the class, so I can adjust the color and the transparency. While the vl class is for adjusting margin, padding, etc.

Fig. 2.3 HTML For the Heading
(30/6/24)

Fig. 2.4 CSS code for the main content
(30/6/24)

The main role of CSS is to help HTML provide a responsive display for all screen sizes, both desktop, and mobile.  the picture below is the use of html and CSS to create the main feature and make my design interactive.  Because, when I press the timeline button, there will a another information about the year.  To made that, I used label and timeline, to make it interactive.

For the visual of the webpage, I tried to make it as close as possible with the prototype.  I was struggle a little bit to find a way to make the layout more look alike.  From the color palette and the elements.  Even though there was some elements that I have to get rid.  The hardest part for me was creating the timeline and the header transition.  In order to create that, I have to check the HTML and CSS and see is it possible to make the transition on the header, fortunately, after struggling I found a way to make the picture stay still.  Here is the picture of my previous profile that won't sit perfectly in the header.  

Fig. 2.5 Header's Issue
(29/6/24)

To make the picture stay still, I inserted the picture into the header's class and copied the same style as the header but modified it a bit.  I created a div class and styled it in CSS and then used a similar appliance as in the header's background picture.  After that, I added the picture to the CSS file, because before that I added the picture on the HTML file.  It actually took me more than a day to figure out how, and it was stressed me out T-T.

 

Final result: CLICK HERE

🔝

---

REFLECTION

Experience:

This is not easy I could say, It's hard for me because I had expectations on my work and the ideas keep coming, but this is my first time, so I still have limited skill to make my ideas came true.  But I'm glad that I can finish this project, after all of the YouTube tutorials and research.

Observation: 

There are different methods to style elements, we can use only HTML or link the file with CSS, but I think using CSS is way more effective.

Findings:

Using HTML and CSS is actually fun and exciting because we can discover how a design can became something that is interactive.

🔝