Artisanal Bakery

Cake Swirl is a responsive bakery website designed to showcase artisanal cakes while providing customers with an interactive review system. This project demonstrates my full-stack development capabilities, combining thoughtful UI/UX design with functional PHP/MySQL backend integration.

I began by studying web design fundamentals and analyzing existing bakery websites:

Key Findings:

• Successful sites maintained clean layouts with strong visual hierarchy
• Poor designs suffered from content overload (like cluttered news sites)
• Effective bakery websites used:
  • Appetizing hero images
  • Clear product categorization
  • Minimalist navigation

Inspiration: Sites like Mubasic demonstrated how interactivity and restrained color palettes create engaging user experiences.

Analysis of popular bakery website navigation and design patterns

Visual inspiration moodboard exploring typography, color, and layout options

Mood Board Creation:

• Curated bakery aesthetics and pastel color schemes
• Selected photography style: bright, airy food shots
• Established brand personality: playful yet elegant

Cake Swirl Mood Board:

Comprehensive visual identity moodboard with color swatches and typography samples

Color Palette:

Typography:

• Headings: "Grand Hotel" (cursive, whimsical)
• Body: "Lato" (clean, highly readable at small sizes)

Low-Fidelity Wireframes:

• Established basic layout structure
• Focused on content hierarchy and user flow

High-Fidelity Prototypes (Figma):

• Developed three complete page designs:
  1. Homepage with hero slider
  2. Products gallery
  3. Contact/review page
• Incorporated full color scheme and typography
• Added interactive elements for realistic preview

Basic Wireframe: Initial sketch focusing on layout fundamentals

Early wireframe sketch establishing core navigation and content hierarchy

Advanced Wireframe: Refined version with detailed UI elements and content structure

High-fidelity wireframe with detailed component styling and layout specifications

HTML/CSS Structure:

• Created responsive layout using Flexbox/Grid
• Implemented sticky navigation with logo home button
• Designed animated buttons and hover states
• Ensured accessibility with proper contrast ratios

JavaScript Features:

• Interactive image carousel with:
  • Auto-rotation
  • Manual navigation controls
  • Smooth transition effects
• Form validation for review submission

PHP/MySQL System:

• Developed customer review database with:
  • Name/alias field
  • 1-10 rating system
  • Detailed review text
• Implemented CRUD functionality:
  • Create: Review submission form
  • Read: Display all reviews chronologically
• Solved database connection issues through systematic debugging

• Successfully created a fully functional bakery website
• Achieved cohesive visual identity across all pages
• Implemented interactive elements that enhanced UX
• Developed working database integration for user reviews

1. E-commerce Functionality:
   • Add shopping cart and payment system
   • Implement secure checkout process
2. Advanced Filtering:
   • Product categorization and search
   • Filter by dietary requirements (gluten-free, vegan, etc.)
3. User Accounts:
   • Customer login/profile system
   • Order history and favorites list
4. Admin Dashboard:
   • Content management interface
   • Sales analytics and reporting

The completed Cake Swirl website showcases a cohesive design with intuitive navigation and delightful visual elements:

Homepage featuring hero carousel and promotional content

Product gallery displaying cakes with detailed descriptions

Mobile-responsive implementation showing adaptive layout

Customer reviews section with database integration

This project significantly developed my full-stack capabilities. Key learnings included:

• The importance of thorough planning in the design phase
• How to effectively troubleshoot across frontend and backend systems
• The value of user feedback in refining designs
• Best practices for creating maintainable, scalable code

The completed Cake Swirl website successfully meets all initial objectives while providing a foundation for future expansion into full e-commerce functionality.