Interactive Design: Project 2 - Website Redesign Prototype
.png)
Aw Wen Chia / 0368828
TABLE OF CONTENTS
The website prototype for Seiryukan presents a clean, structured, and visually cohesive digital platform designed to communicate the organisation’s identity, values, and offerings in a clear and approachable manner. Across all pages, the design demonstrates a strong emphasis on simplicity, readability, and aesthetic calmness, which aligns with the discipline and tradition associated with martial arts environments. One of the most distinctive visual features is the use of wide hero banners at the top of the Home, Courses, About, and Contact pages. These banners incorporate high-quality imagery of dojo interiors, instructors, and practitioners, setting an immediate tone of authenticity while providing an inviting introduction for visitors. Overlaid text elements are deliberately minimal, ensuring that key messages, such as calls to action or introductory descriptions, remain legible without distracting from the imagery beneath them.
Navigation plays a significant role in the prototype’s user experience, with a consistent top navigation bar present on each page. This structure allows users to easily access the Home, Courses, About, and Contact pages without confusion. As users move down the pages, the layout adopts a vertical, scroll-friendly approach. Each section is clearly separated with ample spacing, creating a clean rhythm that enhances readability. The Courses page, for example, transitions from concise course summaries to more detailed course descriptions. Each course section features a repeated pattern of an image paired with text, allowing users to scan information quickly while maintaining visual interest and consistency. Likewise, the Home page introduces additional sections, Techniques and Health, Headquarters, and organisational values, that reinforce the breadth of the organisation’s offerings.
The interface design reflects several deliberate stylistic decisions. The colour palette is dominated by soft turquoise and teal tones, chosen for their calming, harmonious feel. These colours help build a visual connection to the discipline, serenity, and structure associated with traditional martial arts environments. Paired with soft grey backgrounds and occasional white accents, the colours create a fresh, modern aesthetic without straying far from cultural roots. Typography is another key decision: the designer opts for a straightforward sans-serif typeface that ensures clarity across long paragraphs, short descriptions, and navigational components. Bold but simple headings establish hierarchy, while smaller body text supports smooth readability. This careful typographic balance is especially noticeable when text is layered over images, where clarity becomes essential.
The prototype also places importance on brand consistency. The footer, present on all pages, includes the Seiryukan logo accompanied by contact information, social icons, and location details. Its repeated presence reinforces the visual identity while ensuring that crucial organisational details remain easily accessible to visitors at any point in their browsing experience. The Contact page extends this approach by featuring a clean and intuitive form layout that encourages user engagement. Fields for name, email, and message are spaced generously and organised clearly, making the communication process feel simple and welcoming.
Overall, the prototype blends traditional inspiration with modern web standards. Through careful use of imagery, colour, typography, and spacing, it creates a digital environment that is both visually calming and structurally coherent, effectively supporting the purpose and identity of the organisation.
This task was quite challenging because the ideas I initially had didn’t translate well into reality. As a result, many of my original concepts couldn’t be used, and I had to come up with new ones from scratch. It required me to think creatively and adapt quickly, which was a valuable learning experience in itself.
Despite these difficulties, I found using Adobe XD to be quite enjoyable. It was exciting to see my designs take shape digitally, and the process allowed me to experiment with different layouts and interactive elements. While we did encounter some technical issues along the way, my friends and I supported each other, sharing tips and troubleshooting problems together, which made the experience more collaborative and rewarding.
.png)
.png)
Comments
Post a Comment