Interactive Design - Final Project
30/11/2025 - 11/1/2026 (Week 11 - Week 15)
Te Li Wen (0367811)
Design Principles - Bachelor of Design in Creative Media - Taylors
University
Final Project
Table Of Contents
- Lecture
- Final Project
- Reflection
Lecture
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.
Website Development:
Implementation:
Convert your prototype into a fully functioning website using HTML, CSS,
JavaScript, or any other relevant technologies or framework (e.g.,
Bootstrap).
Design Consistency:
Ensure that the final design remains consistent with the approved
prototype, including typography, color schemes, imagery, and layout.
Responsive Design:
The website must be fully responsive, adapting seamlessly to various
screen sizes, including desktops, tablets, and mobile devices.
Cross-Browser Compatibility:
Ensure that the website functions correctly across multiple browsers
(e.g., Chrome, Firefox, Safari, Edge).
Core Features:
Navigation:
Implement a user-friendly navigation system that allows visitors to
easily access all key areas of the website.
Interactive Elements:
Include any necessary interactive features, such as forms, buttons, or
dynamic content, that enhance user engagement.
Technical Considerations:
Performance Optimization:
Optimize the website for fast load times by minimizing file sizes, using
efficient coding practices, and employing tools like caching and
compression.
Final Testing and Deployment:
Testing:
Conduct thorough testing of the website, including usability testing,
cross-browser testing, and responsiveness checks. Document any issues
found and how they were resolved.
Deployment:
Host the website on a live server or a web hosting platform of your
choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that
the website is accessible via a public URL.
Final Project
Proposal
Prototype
Progress
Figure 1.0 Screenshot Of Suda On Line Home Page
This assignment is to recreate our prototype we made previously.
First off, I made files for the 5 pages needed and organised them as how
we were taught during class.
Header
For the header, I followed my design. At first, I used bootstrap to
create the header and navbar. However, I found it hard to change the
design to how I wanted it to look so I restarted without bootstrap.
Instead of bootstrap, my friends shared a website, https://www.w3schools.com/ . It teaches how to use html and css. It has many tutorials
which helped me throughout the process of making the website.
The header was quite simple in my prototype, I just had to move it
around so that its placement looks right. I also linked the header to
navigate back to the home page.
Navigation Bar
The navigation bar was also simple, since it was the same as our
previous exercise. I just added a hamburger menu. In my prototype, the
hamburger menu was at the end of the right side but the design looked
off to me, so I made it together with the rest of the other nav links.
After that, I made a dropdown menu in the hamburger which includes
Contacts, Help, and Rights.
Footer
For the footer, I had a lot of trouble with it when moving my media
icons and logo. I kept using margin-left since everything I did wasn't
working. I asked a friend to help with moving and she taught me to use
display: flex and justify-content: flex-end and it worked.
Unfortunately, there were a few pages that did not move the 'follow us'
properly so I ended up having to use margin-left again.
As for the background of the footer, I used the same image from the home
page and moved it to show only the bottom part of the image. In the
prototype I did not include any authors in the footer so I also included
the important authors who made the original website on the left side of
the footer.
Home Page
After completing the header and footer, the home page is next. I made a
hero image the same as the footer. I had help from a friend to properly
place where my hero image should be. Then I added a smaller title in the
hero image with a short summary of the website.
Below the hero image, I added an additional short paragraph that
explains how the website came to be, giving users some background on
its purpose and development. This section helps provide context and
makes the page feel more personal and informative.
About Page
For the About page, I added a smaller hero image at the top to keep
the layout clean and not overpower the content. Beneath that, I
made a small blue box container to explain the history of Suda On
Line.
Moving on, I expanded the guide outlining what editors can do into
two paragraphs, providing clearer instructions and context. To improve
usability and visual interest, I also added a vertical carousel
alongside the guide, with images displayed on the side to have some
interactive elements.
Instructions Page
I made a small blue container similar to the about page but this time
the content serves as a “heads up” section specifically for editors,
making important information.
The instructions page was slightly tricky to work on because there
were multiple elements that needed to be added into a single
container. At first, it was a bit challenging to figure out how to
arrange everything neatly without making the page look cluttered. To
solve this, I tried following the approach my friend used by applying
the cards method, where they used grid layouts from the W3School
website tutorial. This method made the layout much easier to manage,
as the grid system helped structure the content in a clear and
organised way. As a result, the images and text below were aligned
properly and displayed in a clean, visually appealing format, which
improved the overall readability of the instructions page.
I made the phone version screen size using this to make everything more
comprehensible.
Features Page
I created an additional small box to highlight the title that explains
what the website features. To enhance the visual layout, I placed an
image on the right side, allowing it to slightly overlap the box I
designed, which helps draw attention and adds depth to the section.
After completing that, I moved on to the next section by arranging a
different image on the left uside while placing the paragraph on the
right. The text is left-aligned to improve readability and maintain a
clean, organised layout that matches the overall design style.
For the final part, I decided to keep the design simple and consistent
with the prototype. Both the image and the paragraph are centered,
creating a balanced and minimal look that brings the page together and
provides a clear conclusion to the layout.
Contacts Page
Finally, for the Contacts page, I used the same title design that
appears on the home page to maintain consistency across the website.
Keeping the design uniform helps create a cohesive look and makes the
navigation feel more familiar to users. I then added the email
addresses taken from the original website that was provided, ensuring
that the contact information remained accurate and aligned with the
source material.
For the Contacts information section, I received help from a friend
who guided me on how to structure and organize the contents properly.
Their explanation helped me understand how to set up the layout and
ensure that the information would display correctly. In addition to
that, I used the W3Schools website as a reference to further
understand the correct syntax and techniques, which helped me improve
the overall quality and functionality of the section.
I also made a design decision not to include a separate “Follow Us”
section for social media within the Contacts area, since those links
are already included in the footer. This avoids repetition and keeps
the page clean and well-organised, while still allowing users easy
access to the social media links at the bottom of the website.
Final Outcome
Final Project Website
Reflection
This assignment honestly taught me how to code and made me learn so many things I never thought I would do. It was tough since I had no experience with coding at all and had to rely on my friends to help me when I got stuck on certain areas. Im grateful for their help and patience teaching me how to code.
Comments
Post a Comment