wiki/knowledge/website/vcedc-homepage-design-system.md · 536 words · 2026-04-05
VCEDC Homepage Design System
Design decisions and rationale for the VCEDC website homepage, established during the content and design finalization session ahead of board review.
After multiple rounds of iteration, the team approved a lighter green header with a subtle "V" background as the final direction.
Decision Rationale
- The original darker forest green was rejected by the client (including board chair Jim) as feeling too similar to the previous site — "kind of what we had already, and it's dark"
- A lime/gradient option was rejected for feeling too bright and limey, particularly at the top gradient edge
- The lighter green with the "V" watermark was selected unanimously for its freshness and distinctiveness
- The designer independently preferred this direction as well, having been dissatisfied with the previously approved darker concept
Key Characteristics
- Color: Lighter green accent tone (complement to the original forest green, not a replacement)
- Background treatment: Subtle "V" letterform in the background for visual interest
- Feel: Fresh, clean — a departure from the previous site's darker palette while remaining on-brand
Hero Image
- Photo: Eagle River Animal Hospital
- Crop directive: Remove the back hallway visible in the original frame; crop in from left and right, or scale up slightly to cut legs if needed
- Goal: Focus on the subjects; eliminate distracting architectural background
Remote Worker Section
A dedicated Remote Worker section appears on the homepage. As of the finalization meeting:
- Headline and copy: Pending — Kathy Schmitz to provide
- Embedded video: Non-functional at time of meeting; developer Aki assigned to fix
- Content tone guidance: Copy should speak to what this means to the remote worker, not to VCEDC's internal economic development strategy
Success Stories Video Grid
A grid of embedded YouTube videos appears on the homepage under Success Stories.
Content Requirements
- Diversity: All videos at time of meeting were Eagle River-focused; goal is to represent all of Vilas County
- Target count: 6 videos
- Specific change: Replace Advanced Welding with Amanda Cowart
- Source: Kathy to provide final list of 6 videos with YouTube links
Technical Requirements
- Developer Aki must suppress YouTube branding (logo, black bars) on all embedded videos
- Applies to homepage grid and the Success Stories page
Layout & Navigation Context
The homepage serves as the primary entry point and links to:
- [1] program pages (Remote Work, Entrepreneur, Business Expansion, Broadband)
- [2] (Success Stories, Events, Donate)
- Leadership section (bios sourced from live VCEDC site, not AI-generated drafts)
- [3] — Success Stories/Business Minute merge, Invest page removal, Annual Reports simplification
- [4] — Upcoming/Past split, CTA conventions
Open Items (as of 2025-11-25)
| Item |
Owner |
Status |
| Remote Worker headline + copy |
Kathy Schmitz |
Pending |
| Homepage video player fix |
Developer Aki (via Melissa) |
In progress |
| 6 success story video links |
Kathy Schmitz |
Pending |
| Hero image crop |
Developer Aki |
Pending |
| Hide YouTube branding on all videos |
Developer Aki |
Pending |