web-jose/dynamic-menu-signage

Menu Signage for Fresno State Student Housing 🍽️

Overview 📝

This project was developed for Fresno State Student Housing to utilize digital signage for displaying weekly menus to residents, similar to a restaurant-style menu. By employing a combination of Figma, Adobe Illustrator, Adobe Photoshop, HTML, CSS, JavaScript, and JSON, this digital menu offers an inviting, visually appealing, and dynamically updated display of the current day's menu items on digital signage TVs located in housing buildings.

Features 🌟

• Dynamic Display: Automatically updates with the current day's menu items.
• Real-Time Information: Provides residents with the latest menu information.
• Responsive Design: Ensures the menu looks good on any 16:9 screen.
• Visually Appealing: Uses chalkboard textures and artisanal food graphics for an attractive display.
• Easy Maintenance: Menu items and information are stored in JSON for easy updates.
• Accessibility: Designed to be easy to read and intuitive for all residents.

Tools & Technologies 🛠️

• Design: Figma, Adobe Illustrator, Adobe Photoshop
• Development: HTML, CSS, JavaScript
• Data Management: JSON

Project Structure 📁

• index.html: The main HTML document.
• MenuSignage.js: Contains the JavaScript code to dynamically load and display the menu items.
• MenuSignage.css: Styles the menu to resemble a chalkboard.
• assets/: Contains images used in the menu, including the background, logos, and QR code.

Challenges & Solutions 🧠

• Screen Glare: Adjusted the color scheme and incorporated specific graphics to minimize glare and improve readability.
• Responsive Design: Implemented vh and vw units for sizing and positioning to ensure the menu scales properly on different 16:9 screens.

Updates & Iterations 🔄

The project underwent several iterations, including a major redesign to adopt a chalkboard menu aesthetic and improvements in layout for better readability. A dynamic title and a QR code linking to the menu on the website were added for enhanced user interaction.

Viewing the Menu 📺

The menu can be viewed on the digital signage TVs in Fresno State Student Housing buildings or online at:

https://fresnostatehousing.org/signage/wp-content/uploads/2023/10/Dynamic-Signage-Menu/Dynamic-Signage-Menu.html

How to Contribute 🤝

For those interested in contributing to the project or modifying it for their use, please refer to the project repository on GitHub: https://github.com/Web-Jose/Dynamic-Menu-Signage

Ensure to follow the project structure and coding standards as outlined in this guide for consistency and maintainability.

Acknowledgements 🙏

Special thanks to ResourceBoy for the chalkboard textured backgrounds and Freepik for the artisanal chalk styled food graphics that significantly enhanced the visual appeal of the menu.

License 📜

This project is licensed under the MIT License - see the LICENSE file for details.