Overview
This project was completed for my Web I course at Loyola University Maryland during the Fall of 2022. Guidelines for the project included developing a dynamic website for a club, group, or organization that utilize at least 6 pages of HTML, CSS, and JavaScript code, with the use of at least 5 types of multimedia and interactive components.
Design Process
To create a website that best reflected the needs of Loyola’s Baking Club, I interviewed the executive board to better understand their mission, target audience, and key objectives.
I collected research by attended club meetings to take photos, videos, and testimonies from some of the members, as well as visiting the club’s social media accounts to collect recipes to highlight on the website.
Using HTML, CSS, and JavaScript in conjunction, I created an engaging, user-friendly design that reflects the warmth and creativity associated with baking.
I developed the design concept by implementing a mix of frameworks learned in class, such as card layouts, slideshows, galleries, and forms.
When considering user experience, I defined by target audience as current Loyola students aged 18-22, specifically those who are members of the baking club or interested in baking and joining the club. Throughout the development process, I received feedback from my professor and baking club executive board members on ways to improve the information architecture of the website.
I created the website utilizing responsive web design principles for optimized viewing on both web and mobile devices.
Responsive Design
Recognizing the importance of mobile-friendly, responsive designs, I prioritized creating a website that reflects responsive principles and promotes a seamless user experience on mobile, tablet, and desktop devices.
To ensure that my designs were responsive, I employed CSS media queries and flexible layout structures to adapt to various screen sizes.
Website Features
This website hosts a variety of interactive and informational elements that enhance the users understanding of the club’s mission and offerings:
Homepage that features an inviting hero image and welcomes users to learn more about Loyola’s Baking club
Clean and intuitive navigation menu that enables users to access various pages, including About, Recipes, Events, Contact, and Join
Interactive image slideshow that highlights the club’s members and activities across various events
Recipe gallery that features high-quality images and links to recipes on individual pages to provide users with delicious, easily comprehendible recipes from club members
Image gallery that highlights photos of the club’s treats, as well as a club promotional video and social media feed that highlights the club’s latest Instagram posts
Usable Google Form that allows visitors to enter their information to sign up for a club membership
Social media icons that direct users to the club’s various social media platforms
Project Outcomes
The Loyola Maryland Baking Club’s website has been well received by club members, faculty advisors, classmates, and instructors. It’s engaging design, user-friendly interface, and interactive features have contributed to increased club engagement and sense of community among baking enthusiasts at Loyola.
Key Learnings
Throughout the course of this project, I gained valuable experience in front-end development, specifically through the use of HTML, CSS, and JavaScript frameworks. The process of creating an interactive and responsive website allowed me to refine my design skills, understand the importance of user experience, and enhance my coding proficiency.