632 lines
22 KiB
Markdown
632 lines
22 KiB
Markdown
|
|
# **Bloom Valley Nursery Web Design**
|
|
|
|
### **Table of Contents**
|
|
|
|
- [Introduction](#introduction)
|
|
- [Color Palette & Logo Choice](#color-palette--logo-choice)
|
|
- [Font Color Choice](#font-color-choice)
|
|
- [Typography Choice](#typography-choice)
|
|
- [Wireframes](#wireframes)
|
|
- [Website Structure & Content](#website-structure--content)
|
|
- [Homepage](#homepage)
|
|
- [Gallery Page](#gallery-page)
|
|
- [About Us Page](#about-us-page)
|
|
- [Community Events Page](#community-events-page)
|
|
- [Website Design & Styling](#website-design--styling)
|
|
- [Overall Design](#overall-design)
|
|
- [Accessibility](#accessibility)
|
|
- [Table 1: Contrast Ratio](#table-1-contrast-ratio)
|
|
- [Responsive Web Design](#responsive-web-design)
|
|
- [Website Functionality](#website-functionality)
|
|
- [Website Data Storage](#website-data-storage)
|
|
- [Customization](#customization)
|
|
- [Screenshots of Rendered Pages](#screenshots-of-rendered-pages)
|
|
- [1. Homepage Screenshots](#1-homepage-screenshots)
|
|
- [2. Gallery Screenshots](#2-gallery-screenshots)
|
|
- [3. About Us Screenshots](#3-about-us-screenshots)
|
|
- [4. Community Events Screenshot](#4-community-events-screenshots)
|
|
- [Description of Issues & Lessons Learned](#description-of-issues--lessons-learned)
|
|
- [Current Issues](#current-issues)
|
|
- [Previous Issues Fixed](#previous-issues-fixed)
|
|
- [Major Redesign & Project Overhaul](#major-redesign--project-overhaul)
|
|
|
|
<br>
|
|
|
|
# **Introduction**
|
|
|
|
**Client name: Bloom Valley Nursery**
|
|
|
|
The Bloom Valley Nursery website was designed to create an inviting,
|
|
user-friendly experience for customers looking for plants, garden tools,
|
|
and expert advice. With a focus on showcasing the products and services
|
|
of the nursery, as well as providing information about community events
|
|
and promotions, the website aims to be both functional and aesthetically
|
|
aligned with the brand's core values. The design prioritizes
|
|
accessibility, ease of use, and a clean, professional look, utilizing a
|
|
color palette and typography that reflect Bloom Valley Nursery\'s
|
|
commitment to nature and community.
|
|
|
|
## **Color Palette & Logo Choice**
|
|
|
|
The color palette used for the website includes shades of green, light
|
|
teal, mustard yellow, and white, carefully selected to evoke a sense of
|
|
freshness, growth, and sustainability:
|
|
|
|
- #014038 (Canopy Green): Represents nature, stability, and trust.
|
|
|
|
- #96BAA0 (Meadow Mist): Evokes growth and freshness.
|
|
|
|
- #bdd4da (Sky Bloom): Adds a calming touch, reminiscent of tranquil
|
|
nature scenes.
|
|
|
|
- #f0c06d (Sunlit Petal): Bright and inviting, used for call-to-action
|
|
buttons and important links.
|
|
|
|
- #f7f7f7 (Cloudy Gray): Used for backgrounds to ensure clarity and
|
|
readability.
|
|
|
|
The Logo color choice of #f0c06d (Sunlit Petal) was made to leverage the
|
|
shape of the logo image in this color as a subtle comparison to the Sun.
|
|
The aim was to strengthen the association of Bloom Valley Nursery with
|
|
nature and environmental sustainability.
|
|
|
|
## **Font Color Choice**
|
|
|
|
The font color choices are designed for high contrast to ensure
|
|
readability, while also aligning with the natural and professional
|
|
aesthetic of the brand:
|
|
|
|
- #00231c (Detritus Green): Used primarily for text, providing strong
|
|
contrast against lighter backgrounds.
|
|
|
|
- #96BAA0 (Meadow Mist): Used for subheadings and accents, maintaining
|
|
a soft but readable contrast.
|
|
|
|
## **Typography Choice**
|
|
|
|
The typography used on the website was selected to create a balance
|
|
between modern and rustic elements:
|
|
|
|
- A serif font is used for headings and key titles, reflecting the brand's nature-based, traditional feel.
|
|
|
|
- A sans-serif font is used for body text, offering clarity and readability across devices.
|
|
|
|
- The font sizes are responsive, with larger text for headings to create emphasis and smaller, easily readable text for body content.
|
|
|
|
[Back to Top](#table-of-contents)
|
|
|
|
<br>
|
|
|
|
# **Wireframes**
|
|
|
|
### **1. Mobile Wireframes**
|
|
|
|
|
|
|
|
|
|
|
|
### **2. Desktop Wireframes**
|
|
|
|
|
|
|
|
[Back to Top](#table-of-contents)
|
|
|
|
<br>
|
|
|
|
# **Website Structure & Content**
|
|
|
|
The website is structured to provide an intuitive and informative
|
|
experience for users, with clear navigation options and easily
|
|
accessible content related to Bloom Valley Nursery\'s offerings.
|
|
|
|
## **Homepage**
|
|
|
|
- An auto-cycling **Featured Items** section showcasing items
|
|
available for sale.
|
|
|
|
- A **Shoppers Perks** section highlighting promotions like discounts
|
|
for new subscribers.
|
|
|
|
- A **Testimonials** section featuring customer feedback and
|
|
testimonials that showcase Bloom Valley Nursery's commitment to its
|
|
community.
|
|
|
|
- Navigation to the **Gallery Page** via category-specific links,
|
|
allowing users to explore products by category.
|
|
|
|
|
|
|
|
## **Gallery Page**
|
|
|
|
- A Product Carousel where users can scroll through product cards,
|
|
each displaying an image, description, and price, along with an
|
|
"add-to-cart" button.
|
|
|
|
- A View Cart Details button that opens a modal with shopping cart
|
|
items, quantities, and a subtotal.
|
|
|
|
- Users can clear the cart or process their order directly from the
|
|
modal. A confirmation dialogue ensures users are aware before
|
|
clearing their cart or processing their order.
|
|
|
|
|
|
|
|
## **About Us Pages**
|
|
|
|
- Information about Bloom Valley Nursery's mission, commitment to
|
|
community, and business details (e.g., phone number and business
|
|
hours).
|
|
|
|
- A feedback form that allows customers to submit inquiries and
|
|
feedback, with input validation in place to ensure all fields are
|
|
properly completed before submission.
|
|
|
|
|
|
|
|
## **Community Events Page**
|
|
|
|
- An interactive Google Calendar embedded on the page to display
|
|
upcoming events.
|
|
|
|
- Descriptions of Bloom Valley Nursery's own events, emphasizing the
|
|
free and educational nature of the workshops and events held at the
|
|
nursery.
|
|
|
|
- A section highlighting community-wide events in which Bloom Valley
|
|
Nursery participates, along with details on how customers can
|
|
inquire for more information.
|
|
|
|
[Back to Top](#table-of-contents)
|
|
|
|
<br>
|
|
|
|
# **Website Design & Styling**
|
|
|
|
### **Overall Design**
|
|
|
|
The overall design reflects Bloom Valley Nursery's brand values by using
|
|
a combination of natural colors and modern typography. Sections are
|
|
color-coded for clarity, with vibrant colors like **Sunlit Petal** for
|
|
call-to-action buttons and softer colors for backgrounds, ensuring a
|
|
visually appealing and functional design. The layout is intuitive, with
|
|
clearly marked sections for the nursery's products, services, and
|
|
community engagement.
|
|
|
|
### **Accessibility**
|
|
|
|
Accessibility is the foundation on which the Bloom Valley Nursery
|
|
website was built. To ensure the highest level of accessibility for all
|
|
visitors, the design adheres to WCAG AAA Compliance standards for color
|
|
contrast. High contrast between text and background, along with readable
|
|
font sizes and intuitive navigation, enhances the user experience.
|
|
Semantic HTML elements improve screen reader compatibility, and alt text
|
|
is provided for all images. Additionally, interactive elements, such as
|
|
buttons and forms, are fully keyboard navigable.
|
|
|
|
The table on the following page highlights key color choices used in the
|
|
design and their respective contrast ratios when compared against
|
|
**#014038 (Canopy Green)**, demonstrating compliance with WCAG AAA
|
|
standards.
|
|
|
|
<br>
|
|
|
|
### **Table 1: Contrast Ratio**
|
|
|
|
**Contrast Ratio Against #014038 (Canopy Green)**
|
|
| | | **#F7F7F7** (Cloudy Gray) | **#96BAA0** (Meadow Mist) | **#BDD4DA** (Sky Bloom) |
|
|
|--------------------|--|---------------------------|---------------------------|-------------------------|
|
|
| **Contrast Ratio** | | **10.94:1** | **5.49:1** | **7.59:1** |
|
|
| **Font <= 17pt** | | **PASS** | **FAIL** | **PASS** |
|
|
| **Font >= 18pt -or- Bold Font >= 14pt** | | **PASS** | **PASS** | **PASS** |
|
|
| **Icons and Actionable Graphics** | | **PASS** | **PASS** | **PASS** |
|
|
|
|
<br>
|
|
|
|
**Table Key Points:**
|
|
|
|
- **Navigation Bars**:
|
|
|
|
- The navigation bars at the top and bottom of each page use
|
|
**#014038 (Canopy Green)** for text against **#F7F7F7 (Cloudy
|
|
Gray)** as a background, ensuring high readability.
|
|
|
|
- Current page indicators use **#014038 (Canopy Green)** against
|
|
**#96BAA0 (Meadow Mist)**. While this pairing does not meet AAA
|
|
compliance for fonts 17pt or smaller, the current-page
|
|
indicators are styled as **20pt bold**, meeting AAA standards.
|
|
|
|
- **Hover States**:
|
|
|
|
- On hover, interactive elements like the shopping cart button
|
|
transition to **#96BAA0 (Meadow Mist)** against **#014038
|
|
(Canopy Green)**. While this may not comply for smaller font
|
|
sizes, it meets compliance for icons and actionable graphics.
|
|
|
|
- **Headlines**:
|
|
|
|
- Throughout the site, **#014038 (Canopy Green)** is used as a
|
|
font color against **#BDD4DA (Sky Bloom)** for section
|
|
headlines. This contrast ensures both readability and a
|
|
cohesive, intuitive design theme.
|
|
|
|
|
|
### **Responsive Web Design:**
|
|
|
|
The Bloom Valley Nursery website incorporates responsive web design
|
|
(RWD) principles to ensure it is functional and aesthetically pleasing
|
|
across a variety of screen sizes and devices. The following elements
|
|
were implemented to achieve RWD:
|
|
|
|
1. **Flexible Layouts Using Relative Units:**
|
|
|
|
- The website utilizes CSS units like em, rem, and percentages for
|
|
font sizes, margins, and paddings to create a scalable design.
|
|
For example, the font size of the navigation links is defined in
|
|
em to ensure it scales appropriately with the base font size set
|
|
in the HTML. Similarly, the width of the main content area
|
|
adapts to the screen size, ensuring proper utilization of
|
|
available space without horizontal scrolling.
|
|
|
|
2. **Media Queries:**
|
|
|
|
- Media queries were used to define styles for different screen
|
|
widths. For instance:
|
|
|
|
- The navigation bar adjusts to a stacked format on smaller
|
|
screens, ensuring links remain readable and accessible.
|
|
|
|
- Product cards in the gallery page dynamically resize and
|
|
rearrange from a horizontal layout to a grid-like structure
|
|
for smaller devices to maintain usability.
|
|
|
|
3. **Responsive Images:**
|
|
|
|
- All images, including product images and the logo, use the
|
|
max-width: 100%; height: auto; rule to ensure they scale
|
|
proportionally and never exceed the width of their parent
|
|
containers. This prevents layout breaking on smaller screens
|
|
while maintaining image quality.
|
|
|
|
|
|
[Back to Top](#table-of-contents)
|
|
|
|
<br>
|
|
|
|
# **Website Functionality**
|
|
|
|
1\. **Navigation Bar:**
|
|
|
|
- The navigation bar appears at the top and bottom of each webpage,
|
|
providing consistent and intuitive access to the website\'s main
|
|
sections. It highlights the current page with a distinctive style,
|
|
improving the user's sense of location within the website.
|
|
|
|
- The navigation links are fully responsive, adjusting size and layout
|
|
for smaller screens. Hover effects enhance usability by visually
|
|
indicating interactable elements, and the links are
|
|
keyboard-accessible for users with mobility impairments.
|
|
|
|
2\. **Subscribe Feature:**
|
|
|
|
- The newsletter subscription form validates email input to ensure
|
|
users provide a properly formatted address. Upon successful
|
|
submission, a custom modal appears, confirming the subscription with
|
|
a thank-you message.
|
|
|
|
- This feature is accessible and responsive, with the form scaling
|
|
down and maintaining usability on smaller screens. The modal uses
|
|
clear, high-contrast text and an easily dismissible \"OK\" button.
|
|
|
|
3\. **Add to Cart Feature:**
|
|
|
|
- On the gallery page, users can add products to their shopping cart
|
|
by clicking an \"Add to Cart\" button within each product card. The
|
|
button dynamically updates the session storage to reflect the
|
|
addition of the selected item.
|
|
|
|
- A custom modal confirms the item has been added to the cart,
|
|
improving feedback and user experience. The feature ensures session
|
|
persistence, so cart contents remain available even if the user
|
|
navigates to a different page.
|
|
|
|
4\. **View Cart Feature:**
|
|
|
|
- Users can view their cart by clicking either the \"View Cart
|
|
Details\" button or the shopping cart icon located at the top of
|
|
every webpage. This opens a custom modal displaying all items in the
|
|
cart, including their quantities, prices, and the subtotal.
|
|
|
|
- The modal provides options to clear the cart or process the order.
|
|
Confirmation dialogs ensure the user's intent before these actions
|
|
are finalized. All updates to the cart are reflected in real time
|
|
without requiring a page refresh.
|
|
|
|
5\. **Contact Us Feature:**
|
|
|
|
- The feedback form on the \"About Us\" page validates all user
|
|
inputs, ensuring that the name, phone number, email, and message
|
|
fields are properly filled out before submission.
|
|
|
|
- Input validation prevents SQL injection by stripping special
|
|
characters from the message field and sanitizing all inputs.
|
|
|
|
- Upon successful submission, a custom modal confirms the form was
|
|
sent. This feature demonstrates accessibility and responsiveness, as
|
|
the form is fully functional across devices and screen sizes.
|
|
|
|
[Back to Top](#table-of-contents)
|
|
|
|
<br>
|
|
|
|
# **Web Data Storage**
|
|
|
|
The Bloom Valley Nursery website uses web storage methods, including
|
|
sessionStorage and localStorage, to manage and preserve user data during
|
|
interactions. These methods allow the website to provide a seamless
|
|
experience by temporarily or persistently storing data on the
|
|
client-side browser.
|
|
|
|
|
|
**1\. Shopping Cart Feature:**
|
|
|
|
The shopping cart leverages **sessionStorage** to dynamically manage
|
|
cart contents throughout the user\'s session. Key aspects of this
|
|
implementation include:
|
|
|
|
- **Storing Items in the Cart:**
|
|
|
|
- When a user clicks the \"Add to Cart\" button, the item data
|
|
(e.g., name, price, and quantity) is added to the cart stored in
|
|
sessionStorage. If the item already exists in the cart, its
|
|
quantity is incremented.
|
|
|
|
- Data is saved in JSON format, enabling efficient manipulation of
|
|
the cart\'s structure and content.
|
|
|
|
- **Retrieving Cart Contents:**
|
|
|
|
- The sessionStorage cart data is read and rendered in a custom
|
|
modal when the user clicks the \"View Cart Details\" button. The
|
|
cart is displayed in real-time, including item names,
|
|
quantities, and a subtotal.
|
|
|
|
- **Clearing the Cart:**
|
|
|
|
- Users can clear the cart by selecting the \"Clear Cart\" option.
|
|
The sessionStorage data is removed, and the modal is refreshed
|
|
to reflect the empty cart.
|
|
|
|
- **Processing the Order:**
|
|
|
|
- When the \"Process Order\" button is clicked, sessionStorage
|
|
data is read, and a receipt number is generated. After
|
|
confirmation, the cart data is cleared, and a thank-you message
|
|
is displayed.
|
|
|
|
Using sessionStorage ensures that cart data is only available during the
|
|
current browsing session, preserving user privacy while maintaining
|
|
functionality.
|
|
|
|
**2\. Contact Us Feature:**
|
|
|
|
The feedback form on the \"About Us\" page uses **localStorage** to
|
|
persist user submissions temporarily. Key functionalities include:
|
|
|
|
- **Storing Form Data:**
|
|
|
|
- When the form is submitted, user input (name, email, phone
|
|
number, and message) is validated using JavaScript. Valid data
|
|
is then stored in localStorage to ensure it is preserved for
|
|
review, even if the page reloads or the user navigates away
|
|
temporarily.
|
|
|
|
- **Preventing SQL Injection:**
|
|
|
|
- The message field strips any potentially harmful characters and
|
|
sanitizes the input before storing or processing it.
|
|
|
|
- **Submission Confirmation:**
|
|
|
|
- After submission, the form fields are cleared, and a custom
|
|
modal confirms successful submission. LocalStorage data can be
|
|
accessed later by the website administrators for follow-up.
|
|
|
|
Using localStorage ensures user data persists beyond the current
|
|
session, facilitating communication and operational follow-ups.
|
|
|
|
[Back to Top](#table-of-contents)
|
|
|
|
<br>
|
|
|
|
# **Customization**
|
|
|
|
The **Community Events Page** serves as the website\'s custom page,
|
|
showcasing Bloom Valley Nursery\'s engagement with the local community.
|
|
Features of this page include:
|
|
|
|
1. **Interactive Google Calendar:**
|
|
|
|
- A Google Calendar embed provides an interactive way for users to
|
|
view upcoming events hosted by the nursery and community. Users
|
|
can navigate between months and click events for additional
|
|
details.
|
|
|
|
2. **Nursery Events Section:**
|
|
|
|
- This section highlights workshops and gatherings hosted at Bloom
|
|
Valley Nursery. Each event is described in detail, with emphasis
|
|
on the nursery\'s commitment to offering free educational
|
|
opportunities.
|
|
|
|
3. **Community-Wide Events Section:**
|
|
|
|
- A separate section lists events sponsored or partnered by Bloom
|
|
Valley Nursery within the broader community. Descriptions
|
|
include schedules and locations, encouraging user participation
|
|
in local activities.
|
|
|
|
This page strengthens the nursery\'s community-focused image by
|
|
emphasizing its role as both an educator and a supporter of local
|
|
initiatives.
|
|
|
|
[Back to Top](#table-of-contents)
|
|
|
|
<br>
|
|
|
|
# **Screenshots of Rendered Webpages**
|
|
|
|
## **1. Homepage Screenshots**
|
|
|
|
**Homepage:**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p style="font-size: 1.17em; font-weight: bold;">Subscribe feature:</p>
|
|
|
|
**Subscribe feature input validation:**
|
|
|
|
|
|
|
|
|
|
|
|
[Back to Top](#table-of-contents)
|
|
|
|
|
|
## **2. Gallery Screenshots**
|
|
|
|
**Gallery Page:**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Shopping cart---Add Item:**
|
|
|
|
|
|
|
|
**Shopping cart---View Cart Modals:**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Shopping cart - Process Order Modals:**
|
|
|
|
|
|
|
|
|
|
|
|
**Shopping cart - Clear Cart Modals:**
|
|
|
|
|
|
|
|
|
|
|
|
**SessionStorage (before processing order):**
|
|
|
|
|
|
**SessionStorage (after processing order):**
|
|
|
|
|
|
|
|
[Back to Top](#table-of-contents)
|
|
|
|
|
|
## **3. About Us Screenshots**
|
|
|
|
**About Us page:**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Contact Us form:**
|
|
|
|
**LocalStorage---after form submission:**
|
|
|
|
|
|
|
|
**Contact Us form---input validation:**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[Back to Top](#table-of-contents)
|
|
|
|
|
|
## **4. Community Events Screenshots**
|
|
|
|
**Community Events Page:**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[Back to Top](#table-of-contents)
|
|
<br>
|
|
|
|
# Description of Issues & Lessons Learned
|
|
|
|
### **Current Known Issues**
|
|
|
|
- **Add-to-Cart Alert**: I noticed while taking screenshots of the necessary components and functionalities of the Gallery Page that the alert which appears each time an item is added to the cart has reverted to the browser's default pop-up alert.
|
|
|
|
<br>
|
|
|
|
### **Previous Issues Fixed**
|
|
|
|
- **Font contrast problems**: Adjustments were made to ensure all text
|
|
has sufficient contrast against the background, improving
|
|
readability for users with visual impairments.
|
|
|
|
- **Functionality of the shopping cart**: Issues related to data
|
|
persistence in sessionStorage were resolved, allowing for proper
|
|
display and manipulation of the cart items.
|
|
|
|
- **Accessibility issues in navigation**: The hover states of
|
|
navigation links were adjusted to meet WCAG guidelines, ensuring
|
|
clear interaction feedback for all users.
|
|
|
|
- **CSS and JavaScript**: An attempt to create a script that
|
|
dynamically added shadows to elements based on their proximity to
|
|
the logo was abandoned due to the redesign and time constraints. The
|
|
new design and theme focused on simplicity and accessibility.
|
|
|
|
<br>
|
|
|
|
### **Major Redesign & Project Overhaul**
|
|
|
|
- Approximately three weeks into the project, after running into
|
|
problem after problem with the CSS and JavaScript aspects of the
|
|
project, I decided to restart the website with a completely new
|
|
design, theme, and approach to better align with the client's
|
|
branding and goals while making sure accessibility was a genuine
|
|
priority.
|
|
|
|
- Despite this major change, I successfully completed the entire
|
|
overhaul in one week, ensuring the intended functionality of the original design was preserved
|
|
while improving accessibility and visual appeal.
|
|
|
|
[Back to Top](#table-of-contents)
|
|
|