Interactive Design: Final Project
.png)
Aw Wen Chia / 0368828
TABLE OF CONTENTS
The Seiryukan website prototype presents a clean, well-structured, and visually cohesive digital platform that effectively communicates the organisation’s identity, values, and offerings. The overall design prioritises simplicity, clarity, and visual calmness, which closely aligns with the discipline and tradition associated with martial arts environments. Across all pages, the interface maintains a consistent and approachable aesthetic that supports ease of navigation and user engagement.
A key visual feature of the prototype is the use of wide hero banners on the Home, Courses, About, and Contact pages. These banners feature high-quality images of dojo interiors, instructors, and practitioners, immediately establishing authenticity and credibility. Text overlays are intentionally minimal, ensuring that important messages and calls to action remain readable without overwhelming the imagery. This approach creates a strong first impression while maintaining visual balance.
Navigation is handled through a consistent top navigation bar, allowing users to move seamlessly between the main pages. The page layouts follow a vertical, scroll-friendly structure, with generous spacing between sections to improve readability and content flow. For example, the Courses page presents information through a repeated image-and-text layout, enabling users to quickly scan course offerings while maintaining visual consistency. The Home page further reinforces the organisation’s scope by introducing sections such as Techniques and Health, Headquarters, and organisational values.
The interface design reflects thoughtful stylistic decisions. A soft turquoise and teal colour palette is used to evoke calmness, harmony, and discipline, reinforcing the values of traditional martial arts. These colours are complemented by neutral grey and white backgrounds, resulting in a modern yet culturally respectful aesthetic. Typography is kept simple through the use of a clean sans-serif typeface, ensuring legibility across headings, body text, and navigation elements. Clear typographic hierarchy helps guide users through content, especially when text is placed over imagery.
Brand consistency is reinforced through a repeated footer across all pages, featuring the Seiryukan logo, contact details, social media icons, and location information. This ensures key information remains accessible at all times. The Contact page further supports user interaction through a clean and well-spaced form layout, making communication with the organisation feel straightforward and welcoming.
- Made the pictures on the homepage bigger: To make the pictures stand out and feel more cohesive with the text.
- Changed the layout of the contact page: I realised that many website uses an up-to-down UI for their contact page.
- Changed up the spacing on some of the words and images: I did what felt better for the spacing.
- Used only one font throughout the website: Made it feel more cohesive.
- Lines in the footer stretch along the whole page: It eats up the dead space at the sides
- Codes not working: There were a lot of times where codes did not work, sometimes all I had to do was retype them in the same way as before to get them to work. So there were a lot of times where I had to ask myself if Dreamweaver or I was the problem.
- Preview not previewing: The preview I frequently checked on sometimes displays the code itself on the page or moves images around, sometimes I panic thinking I did something very wrong with the code, only to refresh the page again and find out I was right all along.
- Mobile Version: This was by far the hardest challenge I faced, and I do not think I pulled it off nicely. Making the mobile version without tampering with the source code was bad, and there were many times I wanted to give up, thankfully, my friend thought of a code that made the website at least readable.
- Website not wanting to be a website: Basically, I had a lot of trouble with the website altogether. And to be very honest, some of my solutions to try to fix it were not good. I had my friends yell at me after seeing what I did with my code, and they were right. Overall, not my favourite assignment.
After wrestling with Dreamweaver, I added my website to Netlify to be turned into an actual website.
This module was incredibly challenging overall. At the beginning, the first few tasks felt manageable, as they mainly involved website analysis and creating a simple website. However, as the module progressed and the tasks became more complex, I started to fall behind. I made several mistakes along the way and often struggled to keep up with the technical requirements. During this time, I relied heavily on the help and guidance of my friends, whether it was troubleshooting errors, understanding concepts, or staying motivated. Honestly, I do not think I would have been able to complete and submit the work on time without their support, and I am truly grateful for their patience and encouragement.
Despite the difficulties, this module significantly improved my understanding of coding and how websites are built. What once looked like overwhelming and confusing “keyboard spam” has now become something more structured to me. When I accidentally click “inspect” on a website, I no longer feel intimidated by the lines of code. Instead, I can somewhat recognise that they are carefully written instructions that work together to create a functional and visually engaging website. Although the learning process was tough, it was also rewarding, and it has given me an appreciation for web development.
.png)
.png)
Comments
Post a Comment