Interactive Design：Final Project
Interactive Design
Final Project
Introduction:
This project focuses on developing a fully functional website based on the approved redesign prototype from the previous assignment. The final website includes a minimum of five pages and reflects the design, layout, and user experience decisions made throughout the project. The website was built using front-end technologies such as HTML, CSS, and JavaScript, with attention to responsive design, usability, and cross-browser compatibility. Final testing and deployment were completed to ensure the website is accessible via a public live URL.The final website was developed using HTML and CSS in Adobe Dreamweaver.
Setup
Google Fonts
Next, I searched for the previously selected fonts in Google Fonts. After selecting the font, I copied the provided font code and pasted it into the HTML file in Dreamweaver to apply the font to the web design.
I created five separate HTML pages and one CSS file, linking them together so users can navigate to different pages by clicking buttons. Furthermore, I used properties to activate the buttons when clicked, ensuring users can easily access the corresponding pages. This will enhance the website's interactivity and navigation experience.
Properties Features
Development Tools and Structure
The website was primarily developed using Adobe Dreamweaver as the main code editor for writing and managing HTML and CSS files. The visual layout and responsive design are inspired by Bootstrap, utilizing its grid system and component structure to ensure a clean and consistent design. The website is hosted on Netlify, providing fast loading, seamless updates, and a publicly accessible URL. In addition, it integrates Google Fonts and uses modern fonts that match AEON's minimalist, professional, and high-end visual image.
Visual Consistency in Design (AEON Website Design)
To maintain overall unity and strong brand recognition across multiple pages of the AEON website, a consistent visual language and interface structure were applied throughout the entire design process. By unifying the colour palette, typography system, and component styles, the Home, Trend, Members, Contact, and About Us pages achieve a high level of consistency in both visual appearance and interaction experience.
The overall design is centred around AEON’s commonly used pink and light-toned colour scheme, complemented by darker text and appropriate contrast colours. This approach creates a warm and approachable atmosphere while ensuring a clear interface structure and high readability of information.
Key Colour Palette and Visual Application
The colour design of the AEON website is developed based on brand identity and applied consistently across different pages:
-
#FCE4EC (Light Pink)
Used as a primary background colour across major sections such as the homepage content areas, footer, and functional zones, this colour helps establish a soft and friendly brand atmosphere. -
#B68CB8 / #B41F78 (Purple-Pink and Deep Pink Accent Colours)
These colours are applied to navigation active states, hover effects, button text, and interactive feedback. They help users quickly identify interactive elements while reinforcing brand recognition. -
#333333 (Dark Grey Text)
Used for body text and main content, this colour ensures good readability while avoiding the visual harshness of pure black. -
#000000 / #FFFFFF (Black and White Contrast)
Applied to navigation text, footer information, and highlighted sections to enhance visual hierarchy and structural clarity.
Through the repeated use of these colours across all pages, the website maintains a consistent visual logic between different content modules and avoids stylistic fragmentation.
Typography and Layout Consistency
When selecting typography, priority was given to cross-device stability and readability:
-
Arial system font is used consistently across the entire website to ensure uniform rendering on different browsers and devices.
-
Headings are displayed in bold to establish a clear visual hierarchy.
-
Body text maintains consistent font size and line spacing to prevent long paragraphs from appearing crowded.
-
Navigation and button text share consistent styling, supported by colour changes to provide clear interaction cues.
This unified typographic approach enhances the overall professional appearance of the website and reduces users’ cognitive load when navigating between pages.
Responsive Design Strategy
To ensure a smooth browsing experience on desktop, tablet, and mobile devices, a multi-layered responsive design strategy was implemented.
1. Device Adaptation Using Media Queries
Media queries such as @media (max-width: 1024px / 768px / 480px) are used to adjust layout structures, image heights, font sizes, and spacing according to different screen widths, preventing content overflow or excessive compression.
2. Combined Use of Flexbox and Grid Layouts
Flexbox and CSS Grid are applied to navigation bars, card sections, content modules, and footers. This allows elements to automatically align, wrap, or stack based on screen size while maintaining layout stability.
3. Responsive Images and Scalable Modules
All images use width: 100% and object-fit: cover to prevent distortion across different screen ratios. Cards, content sections, and buttons automatically adjust their height and spacing on mobile devices, improving touch interaction and usability.
A fixed top navigation bar is implemented to allow users to quickly access key sections while browsing. The current page is highlighted through colour changes, helping users clearly identify their location within the website.
2. Unified Brand Visual Experience
-
Pink backgrounds and accent colours are consistently applied across all pages to reinforce AEON’s brand identity.
-
Page structures follow a consistent layout logic—banner, content area, card or information modules, and footer—allowing users to develop stable browsing habits.
Pink backgrounds and accent colours are consistently applied across all pages to reinforce AEON’s brand identity.
Page structures follow a consistent layout logic—banner, content area, card or information modules, and footer—allowing users to develop stable browsing habits.
3. Clear Interaction Feedback
Buttons, links, and navigation items include hover state changes. Colour transitions visually communicate interactivity, enhancing user confidence and engagement during interaction.
4. Accessibility and Usability Considerations
-
Semantic HTML elements such as <header>, <nav>, <section>, and <footer> are used to help browsers and assistive technologies accurately interpret page structure.
-
All images include descriptive alt text to improve accessibility.
-
Sufficient colour contrast is maintained to ensure text readability.
-
Navigation and links support keyboard interaction, enhancing usability for a wider range of users.
Semantic HTML elements such as <header>, <nav>, <section>, and <footer> are used to help browsers and assistive technologies accurately interpret page structure.
All images include descriptive alt text to improve accessibility.
Sufficient colour contrast is maintained to ensure text readability.
Navigation and links support keyboard interaction, enhancing usability for a wider range of users.
Testing and Deployment (AEON Website Design)
To ensure that the AEON website operates reliably across different devices and browsing environments while delivering a consistent user experience, I conducted systematic testing and final deployment after completing the development. The testing process focused on responsive layout performance, accuracy of interactive feedback, as well as overall usability and accessibility.
Real Device Testing
After the development was completed, I manually tested the AEON website on multiple real devices to comprehensively evaluate layout adaptability, loading performance, and interaction stability.
iPhone 14 Pro Max (iOS / Safari Browser)
The testing primarily focused on mobile layout scaling, navigation bar interaction, button responsiveness, and image display.
The results showed that the website loaded smoothly on mobile devices, with no horizontal scrolling or layout misalignment issues. Navigation and button interactions responded promptly, hover and active state colors were displayed accurately, image proportions were well maintained, and the overall visual hierarchy remained clear and easy to read.
Browser Compatibility and Functional Testing
The AEON website was tested across the following major browsers on both desktop and mobile platforms:
-
Google Chrome
-
Safari
-
Microsoft Edge
Across different browsers, all core website functionalities performed consistently, including:
-
Top navigation bar and page navigation
-
Image and card-based content layouts
-
Hover effects for buttons and links
-
Structural consistency across different pages
All components displayed and functioned correctly across browsers, with no visual inconsistencies or functional failures observed.
User Experience and Interaction Stability Testing
During the testing process, particular attention was given to several key aspects closely related to user experience:
Navigation bar positioning and scrolling behavior
The navigation bar remains clearly visible during page scrolling, allowing users to quickly return to key sections of the website at any time.
Button and link interaction feedback
All interactive elements provide clear visual feedback through color changes or state transitions, helping users easily identify clickable areas.
Page responsiveness and readability
Across different screen sizes, font sizes, line spacing, and spacing between content sections remain well balanced, preventing overcrowding and ensuring comfortable reading.
Deployment Summary
Through the testing and refinement process, the AEON website demonstrates stable performance across different devices, screen sizes, and browser environments. The overall page structure is clear, interactive feedback is well defined, and the responsive layout is reliable, providing solid technical and experiential support for final deployment.
Deployment via Netlify (AEON Website Design)
The deployment of the AEON website was completed using Netlify, which offers a fast and developer-friendly workflow:
The final HTML, CSS, and asset files were uploaded to the Netlify platform.
Netlify automatically builds and deploys the website, generating a unique live URL.
Subsequent updates only require replacing the updated files, allowing rapid iteration without additional manual configuration.
Live site URL: final-project-lixinli0379305.netlify.app
After deployment, the website was accessed from multiple devices to ensure that:
Pages load quickly across devices.
All elements render accurately and consistently.
There are no broken links or layout issues.
Touch targets, buttons, and forms work smoothly on smaller screens, providing a reliable mobile experience.
Final Project Document
Self-Reflection
Completing the AEON website project has been a highly insightful and rewarding experience, allowing me to apply the principles of web design, UI/UX, and responsive development that I have learned throughout the semester. Reflecting on the process, I identified several key areas of growth, challenges, and achievements.
1. Design Thinking and Visual Consistency
One of my primary goals was to maintain visual consistency across all pages, ensuring that the website reflected AEON’s brand identity. Through the consistent use of colors (#FCE4EC, #B68CB8, #B41F78, #333333), fonts (Arial system font), and layout structures, I learned how subtle design choices can significantly enhance brand recognition and user experience. I became more aware of how color contrast, spacing, and typography interact to create a coherent visual hierarchy, which is critical for a professional and polished website.
2. Responsive and Adaptive Design
Developing responsive layouts for desktop, tablet, and mobile devices was both challenging and educational. Using Flexbox, Grid, and media queries, I had to carefully adjust the placement and sizing of cards, banners, navigation, and forms. This process improved my understanding of how content flows and scales, and reinforced the importance of testing across multiple devices to identify potential usability issues.
3. User Experience and Interaction Design
Implementing interactive elements, such as hover effects on buttons and navigation links, was a significant learning point. I realized that user experience is not only about aesthetics but also about providing clear feedback for actions. By testing and refining button states, navigation highlights, and form interactions, I improved my ability to anticipate user needs and ensure smooth, intuitive interactions.
4. Technical Challenges and Problem Solving
During development, I encountered several challenges:
-
Ensuring consistent spacing and alignment across different screen sizes.
-
Making interactive elements accessible and touch-friendly on smaller devices.
-
Maintaining cross-browser compatibility, particularly between Chrome, Safari, and Edge.
Addressing these challenges strengthened my problem-solving skills, as I had to analyze issues, research solutions, and iteratively test changes to ensure stability and quality.
5. Testing, Deployment, and Iteration
The testing and deployment stage provided critical insight into the real-world performance of the website. By manually testing on multiple devices and browsers, I learned to identify subtle layout or interaction issues that were not obvious in development. Using Netlify for deployment taught me about the importance of a streamlined workflow and iterative updates, allowing for rapid fixes and improvements.
6. Personal Growth and Future Applications
This project enhanced both my technical skills (HTML, CSS, responsive design) and design sensibilities (visual hierarchy, brand consistency, UX). I also improved my ability to plan and execute a project from start to finish, including design, implementation, testing, and deployment. For future projects, I now better understand the importance of balancing creativity with usability, accessibility, and responsiveness.
Overall, this AEON website project has strengthened my confidence in web design and development and provided a comprehensive hands-on experience that bridges theoretical knowledge with practical application.
Comments
Post a Comment