Final Project – Magnolia Bakery Website Design
🎯 Assignment Objectives
We need to redesign and develop the website prototype from the previous assignment into a complete website, containing at least 5 pages. The final result should be a beautiful, professional, and fully functional front-end website, reflecting interaction design and user experience (UX) decisions.
🛠️ Core Requirements
The website must meet the following requirements:
1. Full functionality (ordering, navigation, interactivity)
2. At least 5 pages
3. Responsive design (compatible with desktop and mobile screens)
4. Cross-browser compatibility (Chrome, Safari, Firefox, Edge, etc.)
5. Developed using HTML, CSS, and JavaScript
6. Consistent visual style (uniform layout, fonts, and UI)
7. Clear and usable navigation (menus available for navigation on every page)
8. Includes interactive elements (buttons, forms, shopping cart, etc.)
9. Clear code and resource path logic
10. Standardized file naming; the entry file must be index.html
Replicate target design using Figma
Introduction
This project aimed to redesign and develop a modern, fully functional, and cross-device-friendly front-end brand website for Magnolia Bakery. The website is based on a prototype completed in class, with the goal of improving visual presentation and overall user experience while showcasing clear interaction logic and front-end development capabilities.
Core Objectives
1. Modernize the UI
A classic and modern typographic style was adopted, using Baskervville SC (Google Font) as the heading font and Arial/Arial Black (system fonts) for the interface and body text, creating a professional, elegant, and brand-recognizable UI visual, while incorporating subtle interactive feedback to enhance interface performance.
2. Optimize Responsive Experience
Responsive adaptation was achieved using CSS @media queries, Flexbox, and fluid layouts to ensure the website is accessible and interactive on both desktop and mobile browsers, maintaining clear content hierarchy, stable navigation, and clickable buttons even on smaller screens.
3. Maintain a Unified Visual Identity
Build a visual language around Magnolia Bakery's brand identity, maintaining consistency in color scheme, fonts, image style, and UI components to convey the bakery brand's warmth, refinement, and classic atmosphere.
4. Enhance Interaction & Usability
Add necessary interactive features, such as:
• Top cross-page navigation bar
• Clickable buttons and status feedback
• Shopping cart display (Cart Page)
• Contact form
• Image placeholder mechanism as a fallback for resource loading errors
Improving website usability and user experience.
5. Structured Development & Deployment
Developed using VS Code, adhering to classroom standards for file management and naming structure organization, and finally deployed the website using Netlify, ensuring website links are valid and accessible.
Project Deliverables
This project ultimately consists of 6 core pages:
1. Home → index.html (entry file)
2. About → about.html
3. Products → products.html
4. Menu → products -detail.html
5. Contact → contacts.html
6. Cart → cart.html
Setup:
First, I prepare all the images needed for the website and organize them into a single folder.
This helps me find the images I need efficiently, thus improving my work efficiency.
Next, I browsed Google Fonts to find suitable fonts. After selecting a font, I copied the provided font code and pasted it into my VS Code HTML file to apply the font to my web design. The fonts I primarily used were Baskerville SC (Google Fonts) and Arial/Arial Black (system fonts), which I pasted into my VS Code HTML file to apply the font to my web design.
I will create six separate HTML, JavaScript, and CSS pages. The HTML pages will be the display pages, the JavaScript pages will contain the website's functionalities, and the CSS pages will be used for website styling.
Users can navigate to different pages by clicking buttons.
Furthermore, I will use property functionality to make the buttons active when clicked, ensuring users can easily access the corresponding pages. This will enhance the website's interactivity and navigation experience.
Development Tools and Structure
The website was primarily developed using VS Code as its main code editor.
Its 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.
Furthermore, Google Fonts is integrated, using a modern font that aligns with Magnolia Bakery's playful and high-end visual image.
1. Homepage → index.html (entry file)
This homepage showcases Magnolia Bakery's brand image and core positioning. The website entry provides a clear navigation menu, complemented by the classic Baskervville SC font and an overall modern baking style, creating a strong first visual appeal and guiding users to explore the site further.
Website Homepage View
2. About→ about.html
This section introduces the brand philosophy and project design goals, emphasizing the website's visual style upgrade and user experience optimization. The page content structure is clear, using a consistent font and color scheme to present the brand story and improve information delivery efficiency.
Website About Page View
3. Product Page → products.html
The Magnolia Bakery dessert list is displayed using a grid layout, with clear categorization and compelling images. Clicking on a product redirects to its details page, enhancing the interactive logic while maintaining brand visual consistency.
Website Products List Page View
4. Menu → products -detail.html
This section displays detailed information, prices, and an order button for each dessert.
Website Product Detail Page View
5. Contact → contacts.html
The website offers a contact form and embedded map for easy location and feedback submission. A responsive layout ensures usability and clarity on mobile devices as well.
Website Contacts Page View
6. Cart → cart.html
Simulating a real shopping cart experience, this page displays the user's selected desserts and calculates the total price, laying the structural groundwork for future e-commerce feature expansion. The interface and button styles remain consistent, and the operational logic is reinforced.
Website Cart Shopping Cart Page View
Visual Consistency in Design
To maintain a unified and harmonious style across the Magnolia Bakery website, I used a clear and consistent color scheme across all pages and components, globally defined using `:root`. This ensures consistent UI visuals across different pages and components, improving maintenance efficiency and brand recognition.
The website's visual style is built upon a pink base tone, warm color accents, and contrasting dark text, creating a clear hierarchical structure while maintaining the warm atmosphere of a dessert brand and high readability.
Key Color Applications for Visual Consistency:
• #5C2D2D (Dark Brown)
Used as a title, navigation bar hover state, and accent color to provide strong visual focus and hierarchical guidance.
• #FAE8E8 (Soft Pink)
Primarily used as the main background color of the website and large UI areas to create a warm, soft, and unified visual tone.
• #F8D7DA (Light Pink Accent Color)
Used for button hover feedback, UI interaction states, and some emphasized components to enhance user interaction.
• #333333 (Dark Gray Text)
Used as the main text color of the website to ensure clear readability and non-glaring visuals.
• #666666 (Secondary Gray Text)
Applied to descriptive text and secondary explanatory content to improve the distinction between reading levels.
• #FFFFFF (Pure White)
Used for button text and the background of some components to enhance contrast and improve the clarity of the UI structure.
Font Consistency:
• Headings use Google Fonts' Baskervville SC font, reflecting the visual style of a classic bakery brand.
• Key text and button emphasis in the UI use the system font Arial Black. As a universal system font, this ensures stable rendering across different devices and browsers.
• Body text uses Arial font with 14–16px spacing, maintaining consistent paragraphs and spacing for improved readability.
• Navigation and buttons use a unified font system and incorporate hover feedback to encourage user interaction.
Responsive Design Strategy:
To ensure a smooth browsing experience on different devices, the Magnolia Bakery website employs a flexible layout and adaptive strategy to achieve responsive design, avoiding issues like horizontal scrolling or layout misalignment on smaller screens.
1. Using Media Queries for Device Adaptation: `@media(max-width: 768px)`
When the screen width is less than 768px, the page layout automatically adjusts. Navigation menus, product cards, text content, and buttons are rearranged or scaled to ensure clear information display and normal user interaction.
2. Using Flexbox for Fluid Layout
The website's navigation bar, product list grid, cards (.card / .product-item), and button areas all use Flexbox for layout management, allowing components to automatically stack, align, or distribute evenly according to screen size, maintaining a stable page structure.
3. Adaptive Images and Scalable UI Components
All web page images are adapted using width: 100%, combined with object-fit: cover to ensure visual proportions are not distorted. Meanwhile, text, buttons, and input boxes are all scaled down proportionally on smaller screens to maintain readability and interactivity.
User Experience Enhancement
1. Clear and Consistent Navigation:
A fixed top navigation bar ensures users can always access and navigate to major pages. Navigation menus provide visual feedback on hover, helping users quickly identify interactive areas and improving page browsing efficiency.
2. Brand Consistency
• Font: The entire website uses the Baskervville SC font for headings, creating a classic, elegant, and professional baking brand visual identity.
• Colors:
#FAE8E8 as the main page background color, maintaining a warm and soft visual tone.
#5C2D2D as the accent color for button and hover interaction states, providing clear visual feedback.
#333333 as the body text color, enhancing the readability of page content.
#666666 as the secondary descriptive text color, maintaining clear information hierarchy.
#FFFFFF for button text, increasing contrast and enhancing UI structure clarity.
3. Interactive Feedback
Buttons and navigation links on the website use hover animations and status feedback to enhance user engagement. The Contact page includes interactive forms and an embedded map to enhance user trust and ease of use. Other pages use structured layouts and interactive buttons to guide user navigation and operation.
4. Accessibility Design Considerations
• Semantic HTML Structure
The website appropriately uses semantic tags such as <nav>, <main>, and <footer> to help different devices and assistive tools correctly identify the page structure.
• Images Include Descriptive Alt Attributes
All page images have alt text to improve accessibility.
• High Color Contrast for Enhanced Readability
Background and text color schemes ensure clear contrast and avoid reading difficulties.
• Navigation Supports Keyboard Operation for Improved Accessibility
All navigation and buttons support Tab selection and Enter key activation, improving ease of use for non-mouse users.
Testing and Deployment
To ensure the Magnolia Bakery website runs stably across various devices and browsing environments, I completed a comprehensive testing and final deployment process, focusing on verifying responsive layout, interactive feedback, and accessibility.
Real Device Testing:
After development, I manually tested the website on multiple real devices to evaluate its page adaptation, loading performance, and interactive feedback:
• iPhone 15 Pro Max:
Testing page zooming, button responsiveness, navigation interaction, and image display on iOS (Safari browser).
Page loading was smooth, with no horizontal scrolling or layout misalignment. Button hover feedback was clear, brand colors were accurately presented, and images were displayed clearly with a well-maintained hierarchy.
•Samsung W23:
Responsive layout and page interaction were tested on Android (Chrome browser).
The page adapted correctly, the layout was not misaligned, the navigation menu expanded smoothly, the button interaction feedback was normal, product cards and images loaded clearly, and the overall browsing experience was consistent and stable.
Browser Compatibility and Functionality Testing:
The website has been tested on Google Chrome, Safari, and Microsoft Edge browsers, covering both desktop and mobile versions. All components, including navigation menus, images, buttons, hover effects, and contact forms, function correctly.
I paid particular attention to form input, navigation bar positioning, and scrolling behavior to ensure a smooth and intuitive user experience.
Deployment via Netlify:
Online link👉🏻https://finalproject-magnoliabakery.netlify.app/
Post-deployment verification:
After the website went live, we accessed it again using multiple devices to ensure:
- Fast loading speed
- Accurate rendering of all sections
- No broken links or formatting issues
- Touch targets and forms functioned well on small screens.
Final Project Document
Self-Reflection
Searching
Throughout the development process, I found that visual consistency and responsive interaction adaptation were the most challenging yet crucial aspects. Although the website was built based on the brand's baking style and the overall structure seemed simple, maintaining a consistent experience across different devices required repeated adjustments and testing.
Initially, I encountered issues with component layout, such as uneven spacing of card content, button misalignment, and unclear text hierarchy after scaling on mobile devices. Therefore, I spent a significant amount of time refining the UI details to ensure the website ultimately presented Magnolia Bakery's classic, warm, sweet, and refined brand visual experience while maintaining consistent interactive logic.
Observation
I found the most obvious problem stemmed from mobile interaction feedback and page scaling compatibility. During initial testing, the page exhibited slight button misalignment, inconsistent navigation hierarchy, and slightly different image loading sizes on iPhone 15 and Samsung W23 devices.
To address these issues, I gradually adopted the following measures:
• Replaced the fixed-pixel layout `<div>` with a combination of flex + grid + media queries.
• Added `object-fit: cover` to prevent image stretching and content misalignment.
• Unified button hover feedback and navigation dropdown logic.
• Ensured consistent responsiveness across all interactive components on different screens.
Lesson Learned
The most important lesson I learned from this assignment is that when interaction and visual issues arise, the real solution isn't to avoid technical solutions, but to return to the user experience itself to identify the source of the problem.
Initially, when the website exhibited button misalignment and layout issues after scaling on mobile devices, I tried directly adjusting CSS parameters, but with limited success. Later, I changed my strategy:
1. First, rebuild the page component layout logic.
2. Then, adjust the interaction breakpoints and alignment.
3. Finally, optimize hover feedback, font hierarchy, and loading order.
Ultimately, after changing the card layout to flex, unifying image object-fit, using consistent padding and gap for buttons, and optimizing the navigation menu expansion logic to a unified hierarchy, the website finally ran stably on iOS, Android, and desktop browsers.
This process made me realize that the true core of interaction design is constantly validating "the results the user sees," not "the code itself." This not only improved my control over web development but also gave me more confidence when facing cross-platform adaptation challenges in the future.
Conclusion
This project is the most technically integrated interaction design and installation website I have completed to date. This project taught me:
• The complete transformation process from visual sketches to web UI components
• How to maintain cross-platform responsiveness and brand visual consistency
• How to optimize user interaction feedback (hover, navigation expansion, card zooming)
• How to verify accessibility and compatibility through real-world testing
• How to deploy a website and ensure stable access
I am very grateful for the guidance and feedback from my mentor throughout the project. His suggestions on page layout optimization, component alignment logic, and visual hierarchy consistency were crucial to the project's progress.
Project Growth Summary
This project not only allowed me to complete a full web interaction design practice but also clarified key directions for future development:
• The importance of real-world testing
• Standardization of responsive layout structure
• Systematization of brand visual consistency
• Clear and stable interaction feedback
• Accessibility design throughout
Now, I can more logically plan, develop, test, and deploy a complete interactive website project. This experience has given me a more comprehensive understanding of cross-platform interaction design and laid a solid foundation for my future entry into the field of combining interaction and front-end development.
Comments
Post a Comment