The Nabe - Design Lab

Exploring Website Design Iterations

Welcome to the design lab for the Potrero Hill Neighborhood House website redesign. This space showcases different design approaches, allowing us to explore various visual directions while maintaining consistent content and information architecture.

Design Iterations

V1
Version 1

Warm Community

A warm, welcoming design with terracotta and cream color palette. Features elegant Playfair Display headings, generous white space, and a human-centered approach that echoes the historic Julia Morgan building.

Palette: Terracotta, Cream, Sage
Fonts: Playfair Display, DM Sans
Style: Light, airy, community-focused
View Design Spec
V2
Version 2

Living Community

A vibrant, energetic design with coral and teal color palette. Features prominent events schedule, denser information layout, and a modern aesthetic that makes the website feel "alive" like an active community center.

Palette: Coral, Teal, Yellow
Fonts: Poppins, Inter
Style: Dense, vibrant, events-focused
View Design Spec
V3
Version 3

Vibrant Hub

A playful, colorful design inspired by telhi.org. Features circular badge navigation, bold multi-color system, and energetic layout that immediately communicates community activity and organization.

Palette: Red, Orange, Yellow, Green, Teal, Purple
Fonts: Arial, Helvetica
Style: Colorful, playful, circular elements
View Design Spec
V4
Version 4

Modern & Minimalist

A clean, calm, and highly readable design that prioritizes clarity and professionalism. The aesthetic is minimalist, focusing on typography, content, and generous whitespace.

Palette: Deep Aqua, White, Light Gray
Fonts: Source Sans Pro
Style: Minimal, typographic, high-contrast
View Design Spec

About This Design Lab

This design lab follows a structured approach to website design iteration:

  • Base Spec (SPEC.md): Core requirements, content, and information architecture shared across all designs
  • Content Reference Data (content/): Actual content from current website (CSVs) plus video transcript for authentic voice and accurate information
  • Image Assets (images/): 33 real photographs from The Nabe showing programs, events, rental spaces, and community moments
  • Design Iterations (v1/, v2/, etc.): Independent design explorations, each with their own visual identity
  • Design Specs (DESIGN_SPEC.md): Each iteration includes a detailed specification of its visual design system
  • Self-Contained: Each design is fully functional and can be viewed independently

Base Specification: View SPEC.md
Content Data: Programs.csv, Events.csv, Facility+Rental+Rooms.csv, Generic+Pages.csv, Video Transcript
Photo Library: 33 authentic photos (ballroom events, youth programs, classes, community moments)