Project Site Plan

Trade Face of Río Negro

WDD 231 - Web Frontend Development I

1. Site Name

Trade Face of Río Negro

Reason for selection: This name was selected to represent the Chamber of Commerce as the visible "face" of business and trade within the Río Negro department. It suggests a modern, forward-facing organization that connects the local community with the wider world.

Domain: nestoredi.github.io/wdd231/chamber

2. Site Purpose

The purpose of the Trade Face of Río Negro website is to serve as a central hub for the local business community. It aims to:

3. Scenarios

These questions represent the needs of our target audience (business owners, locals, and tourists):

  1. "I own a small startup in Fray Bentos; what are the benefits of joining the Chamber and how much does the 'Silver' membership cost?"
  2. "I am a tourist planning a weekend trip; where can I find information about the Anglo heritage site and local places of interest?"
  3. "I am looking for a specific service provider (e.g., construction or legal) in Río Negro; is there a directory of trusted local companies?"
  4. "Is there an upcoming seminar regarding agricultural innovation that I can attend this week?"

4. Color Scheme

The color palette is inspired by the river and professional stability. We use a high-contrast scheme to ensure accessibility.

#0d1b2a Dark Blue (Primary)

Used for Headings (H1, H2), Footer text, and high-emphasis elements.

#014F86 Action Blue (Secondary)

Used for Navigation buttons, "Call to Action" buttons, Links, and Icons.

#A9D6E5 Pale Blue

Used for Header and Footer backgrounds to create a soft, welcoming frame.

#212529 Dark Gray

Used for the main body text to reduce eye strain compared to pure black.

5. Typography

Headings: Poppins

The quick brown fox jumps over the lazy dog.

Usage: H1, H2, H3, and Navigation Links. Selected for its modern, geometric, and professional appearance.

Body: Roboto

The quick brown fox jumps over the lazy dog. 1234567890

Usage: Paragraphs, list items, and form inputs. Selected for its high readability and neutrality.

6. Wireframes

The following wireframes describe the layout for the Home Page.

Mobile View

Mobile Wireframe Sketch

Mobile layout features a vertical stack: Header with Hamburger menu, Hero Image, vertically stacked Event/Weather cards, and vertical list of Spotlight members.

Desktop View

Desktop Wireframe Sketch

Desktop layout expands to a grid: Navigation is visible horizontally. The "Home Grid" places Events, Weather, and Forecast side-by-side. Spotlights are displayed in a row of three.