Town Cuisine Website Development
High-End Chinese Food Restaurant
Overview
For my GRA-310 Digital Graphic Design for Web course at SNHU in June 2023, I designed and built a fully functional website for TownCuisine, a high-end Chinese food restaurant. This project was my first venture into web development, where I applied the basics of HTML, CSS, and JavaScript to create a professional, aesthetically pleasing website.
Project Scope and Objectives
The primary objective of this project was to design and implement a compliant, visually engaging, and user-friendly website for TownCuisine. The project required the creation of five key pages: Home, Menu, About, Contact, and a CSS stylesheet. Each page needed to incorporate specific elements such as a clickable logo, navigation bar, footer, dominant and secondary images, and appropriate content formatted according to HTML and CSS standards.
Design Specifications and Implementation
Design Structure:
- HTML and CSS Mastery: Combined current technological standards of HTML and CSS to build a compliant website.
- File Naming and Management: Employed industry-standard file naming conventions and formats for web content.
- HTML Editing Applications: Utilized HTML editing and FTP applications for testing and editing web content.
- User Experience Principles: Created a functionally aesthetic user interface by applying UX principles.
Web Pages
- Home Page (index.html): Featured a dominant image, secondary content, and images, with a mission statement using the h1 tag.
- Menu Page (menu.html): Displayed a dominant image and menu teaser with appropriate HTML tags.
- About Page (about.html): Included a dominant image, vision statement, and additional content such as history and chef information.
- Contact Page (contact.html): Contained business details, social media links, business hours, and a customer contact form.
- CSS Stylesheet (stylesheet.css): Defined font names, sizes, element colors, and styled tags for consistent visual hierarchy and branding.
Visual Elements and UI Design
Typography and Color Scheme:
- Used fonts specified in the brand style guide (Athelas, Majesti Banner, Klinic Slab, Goudy Old Style) with appropriate @fontface and Adobe CSS stylesheet linking.
- Applied primary and secondary colors from the brand style guide to ensure visual consistency and brand identity.
Images:
- Included alt tags for SEO and saved images for web size (less than 500 KB).
Navigation and User Interface
- Navigation Bar: Designed and formatted using CSS rules for unordered lists, styled with brand colors, fonts, and hover effects.
- File Structure: Organized HTML pages and assets using industry-standard file management practices.
- User Interface: Ensured an effective UI by placing navigation elements where users expect to find them on all pages, enhancing usability.
Technical Skills Demonstrated
- HTML and CSS: Hand-coded HTML for compliant page formatting and used an external CSS stylesheet for design consistency.
- JavaScript: Integrated basic JavaScript functionalities to enhance interactivity.
- Responsive Design: Ensured the website was responsive and visually appealing across different devices and screen sizes.
- SEO Best Practices: Used appropriate HTML tags, alt tags for images, and clean code for better search engine optimization.
Conclusion
Creating the TownCuisine website was a significant learning experience that allowed me to apply my programming, UI, web, and graphic design skills to develop a professional and visually appealing website. This project demonstrates my ability to combine technical standards with design principles to create a cohesive and functional web presence for a high-end restaurant.
Explore the Demo Site
Experience the elegance of TownCuisine firsthand by visiting our demo site. Discover the seamless integration of design and functionality that brings high-end Chinese cuisine to life online.