Fish Tales Sushi Bar: A Sophisticated Culinary Showcase

The "Fish Tales" project was an early milestone in my web development journey at San Diego Mesa College. The objective was to create a professional, high-end digital presence for a fictional restaurant. The project required a focused blend of multimedia integration — including a looped hero video — a structured menu with dynamic pricing, and a user-facing contact interface.

Visit

the Site

The 'About' page of the Fish Tales website, featuring a minimalist design that pairs professional food photography with detailed sections on the chef and the unique style of sushi served. The layout emphasizes a premium, modern dining experience.

My Role: UI/UX Design & Frontend Development

As a solo project, I was responsible for the entire lifecycle of the website, from the initial brand concept to the final code deployment. My key responsibilities included:

  • Visual Branding: I designed the restaurant’s logo and established a "sophisticated-minimalist" color palette.
  • UI/UX Design: I crafted the layout with a focus on high-quality food photography and a seamless mobile-first user experience.
  • Frontend Engineering: I wrote the semantic HTML and custom CSS for all pages, ensuring the site was fully responsive and visually cohesive.

Overcoming Development Challenges

Building this project provided a significant opportunity to move beyond basic styling and master the nuances of CSS architecture:

  • Advanced CSS Specificity & Layouts: Early in the development process, I realized that standard ID and Class selectors weren't enough to create the refined layout I envisioned. I dedicated time to mastering advanced CSS selectors — such as nth-child, last-of-type, and last-child. Learning these allowed me to target specific elements within the menu and gallery without cluttering the HTML with unnecessary classes, resulting in much cleaner and more maintainable code.
  • Responsive Multimedia Integration: Incorporating a looped video as a central design element required careful management of aspect ratios and loading performance. By adopting a mobile-first strategy, I ensured that the video and high-resolution imagery scaled elegantly across all devices, maintaining the "high-end" feel regardless of screen size.

Technical Deep Dive

  • HTML5: Used to create a semantic and accessible structure for the restaurant’s menu, contact forms, and multimedia sections.
  • CSS3: Hand-coded styling using advanced selectors and Flexbox to create a responsive, modern layout. I avoided external frameworks to ensure a deep understanding of core CSS principles.
  • Vanilla JavaScript: Utilized for basic site interactivity and to manage the behavioral aspects of the user interface.
  • Mobile-First Methodology: The site was built starting with the smallest screens, ensuring that the sophisticated design remained functional and beautiful on mobile devices before scaling up to desktop.

Project Outcomes & Achievements

The Fish Tales project was highly successful, serving as a testament to my ability to execute a professional design brief within strict technical requirements.

  • Academic Excellence: The project met every requirement of the grading rubric, ultimately receiving the maximum grade.
  • Mastery of Fundamentals: This project solidified my understanding of CSS targeting and responsive design, providing the foundation for my later work in advanced frameworks like React.
  • Professional Aesthetic: The final product successfully projected the high-end, sophisticated image required for a premium sushi bar.

Design Philosophy

My approach to Fish Tales was "Minimalism meets Sophistication." I used a palette of Black and White to create a high-contrast canvas that allows the vibrant colors of food photography to stand out.

To add a signature touch, I used Red as an accent color for navigation highlights, borders, and branding elements. To ensure readability on a dark background, I implemented light-gray text blocks with black font, bordered in red to ease the visual transition and maintain the brand’s color story.

Future Enhancements

While the project was designed to meet specific classroom requirements, it is built on a scalable foundation. Future plans include:

  • Functional Backend: Connecting the contact form to a PHP or Node.js backend to process user inquiries.
  • Modern Transitions: Adding CSS-based scroll animations and hover effects to the menu items and imagery.
  • E-commerce Integration: Developing a dedicated online ordering system to allow customers to purchase items directly through the site.