Overview
For COMP 126: Information Systems Analysis & Design, the goal is to operate as a web design and development team hired to build a site for a client.
Role/Team
My role is Front-End Developer
Tools
HTML and CSS
Timeline
January 2024 – April 2024
Problem Statement
Mia Rodriguez, a talented food photographer, seeks to establish an online presence that showcases her culinary photography and artistic storytelling. She wants a clean, minimalist website that allows her to effectively highlight her portfolio, convey the beauty and depth of each dish, and engage potential clients. However, Mia lacks an organized, visually appealing, and user-friendly website that can showcase her work in a cohesive and impactful way. The current absence of an easily navigable online platform hinders her ability to present her work to a broader audience and attract new business opportunities. The goal is to design and develop a mobile-first, fully responsive website that reflects Mia’s creative vision, enhances her branding, and ensures seamless navigation for users to explore her portfolio and learn more about her services.
Client Overview
Requirements
- Home page should display a collection of Mia’s food photos and include relevant quotes.
- About page should show Mia’s picture and provide a brief description of her and her photography.
- Contact page should provide a contact form or display her contact information.
- Every page should include a header and footer for consistent navigation and branding.
Questionaire/Interview
- What are your main goals for your website?
- Who is your target audience (e.g., restaurants, brands)?
- What style or aesthetic do you want for the website (e.g., minimalist, bold)?
- How would you like to showcase your photography (e.g., grid, slideshow)?
- What sections do you want on the site (e.g., Portfolio, About, Contact)?
- How would you prefer to be contacted (e.g., contact form, email)?
- Do you need the site to be mobile-responsive?
Final Website
Website Link: https://khristineb.github.io/index.html
Conclusion
In this project, I designed and developed a website for Mia’s Cooking Blog using HTML and CSS. The website consists of a home page showcasing her food photography, an about page with a brief introduction and photo of Mia, and a contact page with a form for visitors to get in touch. Each page is structured with a consistent header and footer, ensuring easy navigation across the site.
By completing this project, I was able to apply my skills in HTML and CSS to create a user-friendly, visually appealing website. It also allowed me to better understand the importance of layout, content presentation, and user interaction in web design. This project serves as a valuable addition to my portfolio, demonstrating my ability to build a functional website from scratch.
Next Steps
Next steps for enhancing Mia’s Cooking Blog include adding JavaScript for interactivity, such as a photo slideshow on the homepage or dynamic quote changes. You can also use JavaScript for form validation on the contact page to ensure proper input.
To improve responsiveness, implement CSS media queries for a mobile-friendly design. Ensure accessibility by adding alt text to images and using semantic HTML elements. Focus on optimizing performance through image compression and minifying code for faster loading.
Consider adding animations like hover effects for a more engaging experience. If Mia plans to update the site frequently, integrating a content management system (CMS) would make content management easier. Finally, conduct cross-browser testing to ensure compatibility across various browsers.
These steps will help make the website more interactive, user-friendly, and optimized.