Interactive Design: Project 2
18/6/2024 - 29/6/2024 (Week 9 - Week 10)
Lim Yu Xuen / 0359676
Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University
Project 2: Working Web Page
TABLE OF CONTENTS
✿ Lectures
INSTRUCTIONS
Find out other information about this module below
Figure 1.1 Module Information
LECTURES
Week 1 to Week 7 Lectures (refer to Exercises / Lectures)
Week 9 — Lecture
Box Model Layout in CSS
In this week's lesson, we were introduced to the box model layout in CSS.
Our practical lesson involves experimenting with a new layout design using
flexbox container. I created a new HTML file with an external CSS to
continue practicing with a new layout using flexbox. We were instructed to
include a viewport meta tag and media queries to ensure the website's
responsiveness.
Figure 2.1 Week 9 Lecture Slides
Week 10 — Lecture
Website Navigation
We practiced to create a single-page website for our final project. This
includes a navigation bar that links to different sections and keeps it
sticky so that the navigation bar stays on top as users scroll down the
page.
Figure 2.2 Navigation Bar
PROJECT 2: WORKING WEB PAGE
Task Requirements
- We were required to transform the static prototype from Project 1 into a fully functional and interactive webpage.
- Focus on refining the visual aesthetics, enhancing user interface interactions, and ensuring a polished user experience.
- Publish the webpage through Netlify.
- The site should have: Easy navigation and use, with clear labelling and intuitive menus. Ensure responsiveness, the webpage should display properly on different devices and screen sizes. Adhere to web design best practices, including accessibility and usability.
Recap of Project 1
.png)
Figure 3.1.1 Final Digital Resume (PNG)
Figure 3.1.2 Final Digital Resume (Figma)
Upon reviewing my design prototype from
Project 1, I wanted to replicate the design using HTML and CSS. From week 10
of lectures, I learnt to create a sticky navigation bar with working
links. I wanted to implement that into this project.
HTML & CSS Process
I used multiple <div> elements for this project. I made sure
the code is organised to ease the process of making changes.
Figure 3.2.1 Process
Figure 3.2.2 HTML Process
Figure 3.2.3 CSS Process
Besides that, to increase interactivity, I added hover effects
to improve user engagement.
Figure 3.2.4 Hover Effect
The Icons are imported as images of the same size, to make sure that
all of them remain the same sizes when the webpage is viewed in
different devices and dimensions.
Figure 3.2.5 Icon Images
The final responsive design view has been optimised for different
dimensions, as the figure attached below.
Figure 3.2.6 Code for different dimensions
HTML & CSS Code
I have turned my code into a PDF for a clear view of the
process.
Figure 3.3.1 HTML (PDF)
Figure 3.3.2 CSS (PDF)
Final Working Web Page
link to Netlify:
here
Figure 3.4.1 Mobile View
Figure 3.4.2 Desktop View
REFLECTIONS
By completing this project, I gained more experience in coding with HTML
and CSS. I was able to create a code that is similar to the prototype
design I made for Project 1. This project allowed mt to deepen my
understanding in the coding language, and enhancing my ability to try
different layouts and elements using CSS. It was a challenging process but
I was able to learn how to code for different dimensions and make my
webpage responsive. Additionally, I learned that hover effects can enhance
user engagement.