25/06/2025 - 27/07/2025 (Week 10 - Week 14)
Shema Goldie Angwen / 0372129
Interactive Design
Bachelor of Design (Hons) in Creative Media / Taylor's University
Final Project
Objective: The objective of this assignment is to bring your website redesign
to life by developing a fully functional website (MINIMUM OF FIVE (5) PAGES)
based on the prototype created in the previous assignment. This final product
should reflect all the design and user experience decisions made throughout
the project, resulting in a polished and professional website.
Assignment
Description: Building on your redesign proposal and prototype, you are now
required to develop the final working website. This website should be fully
functional, demonstrating your ability to implement web design principles,
front-end development techniques, and best practices in user experience (UX)
and accessibility.
EXERCISE
We were given an exercise to create a layout in order to understand how to
link one page to another when clicked, as well as how to create a navigation
menu.
Figure 1.1: Layout Tutorial
Figure 1.2: Layout Tutorial Code
FINAL PROJECT
Website Redesign
- DEVELOPMENT PROCESS & CHALLENGES FACED -
For my redesign project, I chose https://mahanaim.sch.id. I plan to redesign five main pages: the Homepage, Academic, News, Contact, and Registration pages.
In Project 2, we were asked to create a Figma prototype with at least
three pages. I completed this by designing the Homepage, Academic,
and Contact pages.
I made changes to improve the look, make the site easier to use, and
better match the school’s identity.
Figure 2.1: Figma Prototype Task 2
After that, to prepare for creating the actual website with code, I
decided to create two additional pages in Figma, such as Registration and News Page, even though it wasn’t
part of the requirement. This helped me get a clearer idea of the layout
and structure for the full website. I also added one more page, I
designed a revised version of the Contact page to improve the layout.
Figure 2.2: Additional Figma Prototype
The first thing I did when I started coding the website was choosing
fonts from Google Fonts that matched the overall style of my design. I
selected two fonts, Montserrat and Rosarivo,
and added their embed code to the <head> section of my HTML file. By using a limited number of fonts, the
website maintains a clean, modern, and consistent look across all
pages.
Figure 2.3: Embedded Code Google Fonts
The next step I took was organizing all the images I planned to use by placing them into a single folder within my project directory. This helped keep my project files tidy and made it easier to manage and link the images correctly in my HTML and CSS files.
HEADER
After organizing the images, I began creating the website header. I inserted the Mahanaim School logo along with the school name as a text title. This part was not
that easy for me because arranging these elements using code was not
easy for me, especially as I’m new to coding and had no prior
experience, except for the one time Mr. Shamsul guided us through the exercise
inserted above.
I knew I had to catch up quickly and overcome my lack of knowledge. I
went through a lot of trial and error, adjusting margins, positions, etc.
Footer
Creating the footer was also challenging. At one point, I copied and pasted
the same footer code to all the pages, but when I previewed the site, it
looked different on every pages. I felt overwhelmed because there were many
issues to solve while building the website. It turned out that I had already
updated the HTML code on one page but hadn’t updated it on the others. I’m
grateful for this experience because it taught me important lessons, like
being careful and patient while coding so that small mistakes don’t affect
the entire website.
Hero Section
Next, I added an image of the Mahanaim school building, placing it
directly below the navigation menu. This helps create a strong visual
impact and immediately introduces visitors to the school’s environment.
Adding an image using code wasn’t too difficult, I simply adjusted the
image width to 100% so that it would stretch across the entire page and
fit nicely below the navigation menu. I also experimented with applying
contrast filters through code.
Figure 2.7: Hero Section Code
CTA Button
Below the image of the school building, I added an inviting message
that says “Come & Join Us” to encourage visitors to take action and engage with the
school. To make it easier for users to respond, I included a clear
and prominent call-to-action button labeled “Register Now.” This button is linked directly to the registration page,
guiding interested visitors smoothly through the next step of
enrollment. I didn’t encounter any problems while doing this. One thing I
learned is that when writing code, I can’t use the ‘&’ symbol
directly, instead, I should use
& .
Figure 2.8: CTA Button
Figure 2.9: CTA Button Code
Vission & Mission Section
For the Vision and Mission section, it was a bit tricky because I had to
adjust the vision mission hover text size. It appeared differently on
various pages, and in some cases, the text got cut off, so I needed to fix
that.
Figure 2.10: Vision and Mission across different size devices
Figure 2.11: Vission Mission Section Code
Carousel
Creating a carousel was really challenging for me. I watched several
YouTube tutorials and tried using Bootstrap, experimenting with lots of
trial and error. Thankfully, I was able to get it working in the end. I
added carousels for the Alumni and Events sections. Although it was difficult, I felt really proud and
happy when my carousel finally worked as expected.
Figure 2.12: Trying Youtube Tutorials
Figure 2.13: Carousel Code
Figure 2.14: Event Carousel
Figure 2.15: Alumni Carousel
- Academic Page -
Besides the carousel, the Academic page was the hardest for
me to create. The layout I designed in Figma was quite
complex, and at one point, I even thought about changing the
design because I felt overwhelmed and unsure if I could bring
it to life exactly as planned.
My prototype design is using multiple layer, half
of the section was overlaid with an image, other
left was also overlaid with image but not fully,
then there was another semi-transparent rectangle on
top to make the image look more interesting, plus
rotated text and a title layered above everything.
At first, as a beginner, I thought this would be too
difficult to code.
I then decided to work on the layout step by step,
but almost lost hope when my Adobe Dreamweaver
suddenly crashed. It was very frustrating because I
had spent several hours on the work, and I had to
start over again. However, I saw this as a challenge I needed to
overcome and learned an important lesson about saving my work
regularly, I also decided to switch to Visual Studio
Code. In Visual Studio Code, I enabled the auto-save
feature and carefully rebuilt the layout layer by layer. After
completing one section, I simply copied and pasted it, then
changed the text, adjusted the colors, and flipped the layout.
I reused this template throughout the process until I finished
creating all the academic pages. In the end, I was glad to see
that the academic page matched my Figma prototype exactly.
Completing such a complex page gave me a great sense of
satisfaction, and I learned a lot from making this
section.
Figure 2.16: Academic Section
Code
Compared to the Academic page, the News page was much simpler
to create. It mainly consisted of a title, subtitle, date, and
an image for each news. I only needed to create one news, then
copy and paste it while changing the text and image for each of
them. Because of its straightforward layout, I didn’t encounter
any major problems while building this page.
Figure 2.17: News Section Code
- Contact & Registration Page -
Creating the contact and registration pages wasn’t too
difficult because Mr. Shamsul had already given us a
tutorial on how to make forms. I didn’t encounter any
major problems while working on these pages, but the
process still required careful attention to detail.
Figure 2.18: Contact Section
Code
Figure
2.19:
Registration
Section
Code
- RESPONSIVE DESIGN -
To make a website responsive, I add <meta name="viewport" content="width=device-width,
initial-scale=1.0"> because it's not included by default. This is something Mr.
Shamsul emphasized in class.
Figure
2.20:
Responsive
Code
Next, I perform responsive testing across various
devices. I use browser inspection tools as well as
physical testing by opening the website on my phone, iPad,
and Mac. The website proves to be fully responsive,
adapting seamlessly to different screen sizes.
Below is a video of me testing the responsiveness on various
devices: my phone (1179 px), iPad (2732 px), and laptop
(3024 px).
Figure 2.21: Testing responsiveness on phone (1179 px)
Figure 2.22: Testing responsiveness on iPad (2732 px)
Figure 2.23: Testing responsiveness on laptop (3024 px)
- CROSS-BROWSER COMPATIBILITY -
After that, I do compatibility test to ensure that the website
functions correctly across multiple browsers (e.g., Chrome, Firefox,
Safari, Edge).
Figure 2.24: Compatibility Test in Microsoft Edge
Figure 2.25: Compatibility Test in Firefox
Figure 2.26 : Compatibility Test in Chrome
Figure 2.27: Compatibility Test in Safari
"I realized that coding isn’t just about theory, it requires
experience. The more mistakes I make, the more I learn, and the
more my skills improve."
Fully Functional Website Live URL:
Google Drive Link:
FEEDBACK
WEEK 12
Mr. Shamsul advised me to remove the
underlining on the Academic page to improve its visual appearance and make
the design look cleaner.
WEEK 14
Mr. Shamsul suggested that the currently opened
page should appear in a different color to help users easily identify
which page they are on. He also advised me to either create placeholder
pages for the navigation links that are not yet available. In the end, I
decided to reduce the number of navigation menu items instead of creating
unavailable or empty pages.
REFLECTION
Learn coding has been quite a challenge for me. At first, I had no idea
how to start coding based on the designs I created. It felt overwhelming
and confusing. I couldn't imagine how those designs could be translated
into actual code. It definitely wasn’t easy, but that’s part of the
learning process. What helped me get through was taking personal notes. I
documented everything that Mr. Shamsul taught me, and those notes became
my guide whenever I got stuck. This experience reminded me that learning
isn't just about theory. Coding requires experience, the more mistakes I
made, the more I learned. Each error became a lesson, and slowly, my
skills began to grow. I’ve come to realize that persistence is key. Not
giving up, daring to bring my imagination to life, and being willing to go
through the complicated parts are what helped me move forward. Even though
the journey was tough, I learned that consistency, patience, and a
willingness to explore more and more are what really shape a good coder.
25/06/2025 - 27/07/2025 (Week 10 - Week 14)
Comments
Post a Comment