Interactive Design | Project 2 : Working Web Page
April 21,2025
ZHANG TIANYAO/0376838
01/06/2025 - 15/06/2024(Week 6 - Week 8)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 2 : Working Web Page
LIST
1. Lectures
2. Instructions
3.Project 2 : Working Web Page
4. Feedback
5. Reflections
Lectures
Week 7
In Week 7, we focused on the CSS Box Model and the display property, learning how each element is represented as a box with content, padding, border, and margin. Visual diagrams and live coding helped us understand how changing these parts affects layout and spacing.
We also explored different display types, especially flexbox, and practiced styling a box with background color, padding, and borders. The lesson emphasized how setting display: flex and adjusting properties like justify-content can create flexible, aligned layouts, which we applied in real projects.
Week 8
This week, Mr. Shamsul provided an introduction to Figma, a versatile online design platform used widely by UX and UI professionals. We explored how to craft buttons by using the Frame tool, customizing padding, background colors, borders, and corner radii (like 30px) to achieve the desired look. We then converted the button into a reusable component with multiple states.
To add interactivity, we created a hover state variant that features a different fill color. In prototype mode, we connected this with an interaction that triggers “While Hovering,” allowing for seamless switching between the normal and hover versions. We also applied Auto Animate to create smooth transition effects, adjusting the default 300ms duration to 200ms for a more dynamic feel. Visual previews and refinements helped ensure a more natural user experience.
Mr. Shamsul emphasized the importance of building prototypes with full structural components such as the logo, navigation menu, hero image, call-to-action buttons, linked content areas, and footer, to ensure a complete and professional layout.
Week 9
In Week 9, Mr. Shamsul demonstrated how to design a responsive navigation bar with a dropdown menu using HTML and CSS. He explained the role of elements like <nav>, <ul>, <li>, <a>, and <div> in creating an intuitive menu structure.
For my project, I built a simple navigation system with links such as "Home," "About," "Services," and "Contact." The "Services" menu expands into a dropdown list featuring options like Car Paint, Oil Change, Tyre Service, and Aircon Service.
I arranged the menu items horizontally with display: flex and added hover effects using the CSS :hover pseudo-class. The dropdown menu appears correctly when hovered, thanks to position: absolute and managed z-index stacking. To improve aesthetics, I included rounded corners with border-radius and used soft colors such as Deep Orange, Orchid, and Antique White for a welcoming, friendly look.
Additionally, I incorporated Google Fonts (Poetsen One) via <link> in the <head> section and applied this custom font across the entire page, giving it a distinctive and cohesive appearance.
Instructions
Project 2 : Working Web Page
Project Overview
In this web redesign project, I used the Innocent Drinks UK website as a reference to reimagine and improve an existing site. I completely overhauled their old website, which had a cluttered layout, outdated visuals, and weak functionality. By reorganizing the structure, updating content, and incorporating modern design trends, I created a new prototype that offers better user experience and a more engaging, cohesive look.
However, my previous design work was not approved by Mr. Vinod, so I decided to either revise it myself or select a new website to work on. Therefore, I chose https://www.atlastrekkers.com/ as my second redesign target. Below is the Figma prototype I created.
Key Features
1. Goal-Oriented Homepage Layout
The homepage is designed to immediately capture user attention and guide them towards their primary objectives. Important actions such as booking a tour, browsing trekking destinations, or learning more about the company are all clearly prioritized. This layout ensures that users can quickly find what they need without unnecessary scrolling or confusion. Strategic use of call-to-action buttons, visuals, and headlines all support conversion.
2. Integrated Booking Service Options
The redesigned website integrates booking access points directly within the main navigation and service sections. While it does not include pricing or customization features, the booking flow is still clearly presented. Users can easily locate service descriptions and proceed to the booking process without unnecessary steps. This seamless transition between exploration and action enhances usability and encourages users to take the next step confidently. The focus is on simplifying the journey from interest to booking.
3. Well-Structured Service Pages for Easy Navigation
Each service has its own dedicated page, complete with detailed descriptions, itineraries, pricing information, and frequently asked questions. This structured format allows users to fully understand what they are booking before making a commitment. Intuitive design and consistent layout patterns help reduce cognitive load and make navigation smoother. The pages also highlight special features that differentiate each service from others.
4. Trust-Building Through Feature Highlights
Trust is established through prominently displayed key features such as expert guides, verified safety standards, and customizable travel plans. Icons and illustrations are used to visually communicate these strengths. This section builds reassurance for users, especially first-time visitors, and answers common concerns about safety, reliability, and professionalism. It plays a critical role in shaping a positive perception of the brand.
5. Building Trust Through Brand Voice and Messaging
clear brand messaging and professional presentation. Key information such as the company’s values, expertise, experience, and safety commitment is strategically placed throughout the site. Consistent tone, clean design, and transparent communication give users confidence in the brand. While there are no social reviews, trust is established by how the company presents itself—reliable, knowledgeable, and focused on user needs.
6. Simplified Login Section with Clean Interface
Instead of a contact section, the redesigned layout includes a simple and focused login interface for returning users. The design features clear input fields for username and password, with minimal distractions to ensure ease of use. The clean visual hierarchy and modern aesthetic make the login process intuitive and quick. While it does not include additional features like password recovery or social login, the simplicity of this section supports smooth user access and maintains design consistency.
Typography
I used a clean, modular layout to establish a clear visual hierarchy. By varying font sizes, weights, and spacing, I made the content easier to scan and understand, helping users quickly grasp the structure and navigate the page with ease.
Visual Rhythm & White Space
I carefully controlled spacing and white space to maintain a steady visual rhythm. This approach prevents overcrowding, gives the content room to breathe, and enhances readability by drawing focus to key elements without overwhelming the viewer.
Responsive Design Thinking
I approached the design with responsiveness in mind from the beginning. The layout adapts smoothly to different screen sizes, ensuring that both mobile and desktop users have a consistent, functional, and visually balanced experience across devices.
Conclusion
Through this redesign project, I aimed to create a website that feels both professional and welcoming, with a clear focus on user experience and visual clarity. By applying consistent typography, a calm and nature-inspired color palette, and a layout built on modular, flexible components, I was able to reflect the identity of Atlas Trekkers in a clean and intuitive way.
From homepage goals to service structure, every design choice was made with the user in mind—whether it's the streamlined booking interface, the simplified navigation, or the mobile-responsive layout. This project allowed me to deepen my understanding of functional web design while also refining my visual communication skills.
Overall, this Figma prototype represents not just a design solution, but my evolving thinking as a designer who values clarity, structure, and meaningful interaction.
Interaction Flow Design
In designing the interaction flow of my website prototype, I focused on clarity, intuitive navigation, and seamless user experience. The flow begins on the homepage (Frame 3), which introduces users to key questions like their hiking experience level and gear preparation. Each call-to-action button and image links logically to the next step in the journey.
From Frame 3, users can proceed to Frame 4, which continues the onboarding by guiding them through mountaineering gear choices and whether they need expert assistance. These paths simulate decision-making and build engagement by offering help tailored to different user needs.
Frame 24 acts as a brand-driven narrative space, presenting our mission, vision, and values. This frame also provides credibility and emotional appeal before leading users to Frame 25, which emphasizes the start of the journey through a motivational message and a direct CTA button.
Finally, Frame 5 includes the login interface, accessible from multiple points in the flow. This ensures that users can register or return to their accounts at any stage without disrupting the journey.
Overall, I designed the interaction flow to be user-centered, progressive, and meaningful. Each frame builds upon the previous one and anticipates the user’s next need, creating a sense of narrative and functional continuity throughout the experience.
Link：ZTY
Reflections
Throughout the creation of this prototype, I’ve gained a deeper understanding of how visual structure, narrative flow, and user needs come together in effective web design. While developing the Figma, I constantly balanced aesthetics with functionality—making sure that each section not only looked clean and modern, but also guided the user through a clear journey.
I realized that simplicity doesn’t mean lack of detail; in fact, it requires thoughtful layout, consistent spacing, and intentional hierarchy. I also became more aware of how important interactive logic is—especially when users need to feel a sense of control and direction across pages.
This project challenged me to think not just as a visual designer, but also as a strategist—anticipating what the user wants, and building meaningful paths for them. It has strengthened my appreciation for systems thinking and sharpened my sensitivity to user experience design.
Comments
Post a Comment