Hanson.xyz Dev
36 KiB
36 KiB
HomeProz WordPress Website Design Document
Draft v1.0 - For Review
1. Executive Summary
This document outlines the recommended design approach for the new HomeProz WordPress website. The design will maintain the client's established brand identity while modernizing the presentation and improving user experience through better organization, clearer hierarchy, and enhanced property listing functionality.
2. Current Site Analysis
2.1 Existing Site Overview
- Platform: GoDaddy Website Builder 8.0
- URL: https://homeprozrealestate.com/
- Structure: Single-page scrolling site with sections
2.2 Current Sections (in order)
- Header with logo and hamburger menu
- Hero section - "Find Your Dream Home Today"
- Current Listings carousel (circular images)
- Our Mission statement
- Meet Our Agents (team profiles)
- Testimonials
- Contact form
- Office location & phone numbers
- Social media links (Facebook, TikTok)
- Photo gallery
- Footer with legal/copyright
2.3 Current Brand Elements
Color Palette
| Color | Hex Code | Usage |
|---|---|---|
| Primary Dark | #000000 |
Background |
| Accent Red/Rust | #9F3730 |
Buttons, accents |
| Accent Light | #BF524B |
Links |
| Hover State | #EA9491 |
Link hover |
| Text Light | #E2E2E2 |
Body text |
| White | #FFFFFF |
Headings, highlights |
Typography
| Element | Font | Weight |
|---|---|---|
| Headlines | Abril Fatface | 400 |
| Body Text | Droid Sans | 400, 700 |
2.4 Current Strengths
- Clean, minimalist dark aesthetic
- Clear brand colors (rust/terracotta accent)
- Professional team photos
- Mobile responsive
- Contact information prominent
2.5 Current Weaknesses
- Property listings link to external sites (Zillow, HomeFinder)
- No internal property detail pages
- Limited search/filter functionality
- Circular crop on property images loses context
- No MLS integration or property management
- Cookie consent popup needs styling improvement
- Footer is cluttered with legal text
- Limited SEO capabilities
3. Recommended Design Direction
3.1 Design Philosophy
"Modern Minimalist Real Estate" - Retain the sophisticated dark theme while adding:
- Better visual hierarchy
- Improved property presentation
- Professional real estate conventions
- Enhanced usability
3.2 Refined Color Palette
| Color | Hex Code | CSS Variable | Usage |
|---|---|---|---|
| Background Dark | #0A0A0A |
--color-bg-dark |
Primary background (slightly softer than pure black) |
| Background Card | #161616 |
--color-bg-card |
Card backgrounds, elevated surfaces |
| Accent Primary | #9F3730 |
--color-accent |
CTAs, buttons, highlights |
| Accent Hover | #C8473F |
--color-accent-hover |
Button hover states |
| Accent Light | #BF524B |
--color-accent-light |
Links, secondary accents |
| Text Primary | #F5F5F5 |
--color-text |
Headlines, primary text |
| Text Secondary | #B0B0B0 |
--color-text-muted |
Body text, descriptions |
| Border | #2A2A2A |
--color-border |
Subtle borders, dividers |
| Success | #2E7D32 |
--color-success |
Active listings |
| Warning | #F9A825 |
--color-pending |
Pending listings |
| Muted | #757575 |
--color-sold |
Sold listings |
3.3 Typography System
/* Headings */
--font-display: 'Abril Fatface', Georgia, serif;
/* Body */
--font-body: 'Inter', 'Droid Sans', Arial, sans-serif;
/* Scale */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
Recommendation: Consider upgrading from Droid Sans to Inter for body text - it's more modern, has excellent readability, and better web optimization. Abril Fatface remains perfect for display headings.
4. Page Structure & Layout
4.1 Site Architecture
Homepage
├── Properties (Listings Archive)
│ ├── Property Detail Page (single-property.php)
│ └── ...
├── About Us
│ └── Individual Agent Pages (optional)
├── Services (optional)
├── Blog/News (archive + single posts)
│ └── Blog Post (single.php)
├── Contact
└── Legal Pages (Privacy Policy, Terms)
4.2 WordPress Template Hierarchy
The theme will include the following template files:
| Template File | Purpose |
|---|---|
front-page.php |
Homepage (static front page) |
page.php |
Default page template |
page-contact.php |
Contact page with form + map |
page-about.php |
About/Team page |
single.php |
Blog post template |
single-property.php |
Property detail page |
archive.php |
Blog archive (news/articles) |
archive-property.php |
Property listings archive |
search.php |
Search results |
404.php |
Not found page |
header.php |
Global header |
footer.php |
Global footer |
4.3 Page Templates (User-Selectable)
These templates will be available in the WordPress page editor:
| Template Name | File | Use Case |
|---|---|---|
| Default | page.php |
Standard content pages |
| Full Width | template-full-width.php |
Pages without sidebar |
| Landing Page | template-landing.php |
Marketing/campaign pages (no header/footer nav) |
| Blank Canvas | template-blank.php |
Full control with block editor |
| Content + Sidebar | template-sidebar.php |
Blog-style layout |
4.2 Homepage Layout (Top to Bottom)
Section 1: Header (Sticky)
- Logo (left)
- Navigation: Properties | About | Contact (center/right)
- Phone number CTA button (right)
- Mobile: Hamburger menu
Section 2: Hero
- Full-width background image/video
- Headline: "Find Your Dream Home Today" (Abril Fatface)
- Subheadline: "Expert Real Estate Services for Buyers and Sellers"
- Primary CTA: "View Properties" button
- Secondary CTA: "Contact Us" button
Section 3: Featured Properties
- Section title: "Current Listings"
- Filter tabs: All | Residential | Commercial | Land
- Property cards in grid (3 columns desktop, 2 tablet, 1 mobile)
- "View All Properties" link
Section 4: Why Choose HomeProz
- Section title: "Our Mission" or "Why HomeProz"
- 3-column feature blocks with icons:
- Local Expertise
- Personalized Service
- Results-Driven
- Mission statement text
Section 5: Meet the Team
- Section title: "Meet Our Agents"
- Agent cards in grid (4 columns desktop)
- Each card: Photo, Name, Title, Phone, Email
- Hover effect reveals bio snippet
Section 6: Testimonials
- Section title: "What Our Clients Say"
- Testimonial carousel/slider
- Client name and transaction type
Section 7: Contact CTA
- Split layout: Form (left) | Map + Info (right)
- Contact form fields: Name, Email, Phone, Message
- Office address, phone numbers
- Embedded Google Map
Section 8: Footer
- Logo
- Quick links
- Contact info
- Social media icons
- Legal text (copyright, DBA, broker info)
4.3 Properties Archive Page
- Hero with search bar
- Filter sidebar (desktop) / Filter modal (mobile)
- Property Type
- Price Range
- Bedrooms
- Status (Active, Pending, Sold)
- Location/City
- Property grid with pagination
- Sort options (Price, Date, etc.)
4.4 Property Detail Page
┌─────────────────────────────────────────────────┐
│ [Breadcrumb: Home > Properties > Address] │
├─────────────────────────────────────────────────┤
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ │ │ $XXX,XXX │ │
│ │ Main Photo │ │ 123 Main Street │ │
│ │ Gallery │ │ City, MN 56007 │ │
│ │ │ │ │ │
│ │ │ │ 🛏 3 Beds | 🛁 2 Bath │ │
│ │ │ │ 📐 1,500 sq ft │ │
│ │ │ │ MLS# 12345 │ │
│ │ │ │ │ │
│ │ [Thumbnail strip] │ │ [Contact Agent] │ │
│ └─────────────────────┘ │ [Schedule Showing] │ │
│ └─────────────────────┘ │
├─────────────────────────────────────────────────┤
│ Property Description │
│ ──────────────────── │
│ Lorem ipsum dolor sit amet... │
├─────────────────────────────────────────────────┤
│ Features & Amenities │
│ ──────────────────── │
│ • Feature 1 • Feature 4 • Feature 7 │
│ • Feature 2 • Feature 5 • Feature 8 │
│ • Feature 3 • Feature 6 • Feature 9 │
├─────────────────────────────────────────────────┤
│ Location │
│ ──────────────────── │
│ [Embedded Google Map] │
├─────────────────────────────────────────────────┤
│ Listed By │
│ ──────────────────── │
│ [Agent Photo] Agent Name | Phone | Email │
└─────────────────────────────────────────────────┘
5. Detailed Template Specifications
5.1 Homepage Template (front-page.php)
A modular homepage built with reusable sections. Each section can be toggled on/off via theme options.
Sections (in order):
- Hero Section (full-width image/video + headline + CTAs)
- Featured Properties Grid (3 most recent active listings)
- Value Proposition / Why Choose Us (3-column icon blocks)
- About Preview (brief intro + link to About page)
- Team Preview (agent cards grid)
- Testimonials Carousel
- Contact CTA Section (form + map)
- Footer
5.2 Default Page Template (page.php)
Standard content page with consistent structure:
┌─────────────────────────────────────────────────┐
│ HEADER │
├─────────────────────────────────────────────────┤
│ Page Hero (optional) │
│ ┌─────────────────────────────────────────────┐ │
│ │ Page Title (h1) │ │
│ │ Optional subtitle/breadcrumb │ │
│ └─────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────┤
│ Content Area │
│ ┌─────────────────────────────────────────────┐ │
│ │ │ │
│ │ Block Editor Content │ │
│ │ (constrained width: 800px max) │ │
│ │ │ │
│ └─────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────┤
│ FOOTER │
└─────────────────────────────────────────────────┘
Features:
- Clean, readable content width (65-75 characters per line)
- Supports all core WordPress blocks
- Optional featured image as page hero
- Breadcrumb navigation
5.3 Full Width Template (template-full-width.php)
For pages that need edge-to-edge content:
Use Cases:
- Image galleries
- Portfolio pages
- Pages with custom layouts via blocks
- Wide comparison tables
Differences from Default:
- No max-width constraint on content
- Full-bleed image support
- Better for Gutenberg group blocks with backgrounds
5.4 Landing Page Template (template-landing.php)
Distraction-free template for marketing campaigns:
┌─────────────────────────────────────────────────┐
│ Minimal Header (logo only, no nav) │
├─────────────────────────────────────────────────┤
│ │
│ FULL CONTENT AREA │
│ (no sidebar, focused design) │
│ │
│ Designed for conversion: │
│ - Hero with single CTA │
│ - Benefits list │
│ - Social proof │
│ - Form or contact CTA │
│ │
├─────────────────────────────────────────────────┤
│ Minimal Footer (legal links only) │
└─────────────────────────────────────────────────┘
Use Cases:
- Property-specific landing pages
- Seasonal promotions ("Spring Listings!")
- Buyer/Seller guides with lead capture
- Ad campaign destinations
5.5 About/Team Page Template (page-about.php)
Specialized template for company and team information:
┌─────────────────────────────────────────────────┐
│ HEADER │
├─────────────────────────────────────────────────┤
│ Page Hero with Company Photo │
├─────────────────────────────────────────────────┤
│ Company Story Section │
│ (Block editor content area) │
├─────────────────────────────────────────────────┤
│ Our Values / Mission │
│ (3-column layout with icons) │
├─────────────────────────────────────────────────┤
│ Meet the Team │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │Agent│ │Agent│ │Agent│ │Agent│ │
│ │Card │ │Card │ │Card │ │Card │ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ (Auto-populated from Team CPT or ACF) │
├─────────────────────────────────────────────────┤
│ Broker Information │
├─────────────────────────────────────────────────┤
│ Contact CTA │
├─────────────────────────────────────────────────┤
│ FOOTER │
└─────────────────────────────────────────────────┘
5.6 Contact Page Template (page-contact.php)
Dedicated contact page with form and location info:
┌─────────────────────────────────────────────────┐
│ HEADER │
├─────────────────────────────────────────────────┤
│ "Get In Touch" Hero │
├─────────────────────────────────────────────────┤
│ ┌───────────────────┐ ┌───────────────────────┐ │
│ │ │ │ │ │
│ │ Contact Form │ │ Contact Info │ │
│ │ │ │ - Address │ │
│ │ Name │ │ - Phone │ │
│ │ Email │ │ - Email │ │
│ │ Phone │ │ - Hours │ │
│ │ Message │ │ │ │
│ │ │ │ [Google Map] │ │
│ │ [Send Message] │ │ │ │
│ │ │ │ │ │
│ └───────────────────┘ └───────────────────────┘ │
├─────────────────────────────────────────────────┤
│ Additional Content (optional) │
│ (Block editor area for FAQs, etc.) │
├─────────────────────────────────────────────────┤
│ FOOTER │
└─────────────────────────────────────────────────┘
5.7 Property Archive Template (archive-property.php)
Listings page with search and filters:
┌─────────────────────────────────────────────────┐
│ HEADER │
├─────────────────────────────────────────────────┤
│ Hero: "Browse Our Properties" │
│ [Search Bar] │
├─────────────────────────────────────────────────┤
│ Filter Bar │
│ [Type ▼] [Price ▼] [Beds ▼] [Status ▼] [Clear] │
├─────────────────────────────────────────────────┤
│ Results: XX Properties Found [Sort: Recent ▼]│
├─────────────────────────────────────────────────┤
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │Property │ │Property │ │Property │ │
│ │ Card │ │ Card │ │ Card │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │Property │ │Property │ │Property │ │
│ │ Card │ │ Card │ │ Card │ │
│ └─────────┘ └─────────┘ └─────────┘ │
├─────────────────────────────────────────────────┤
│ Pagination: [< Prev] [1] [2] [3] [Next >] │
├─────────────────────────────────────────────────┤
│ FOOTER │
└─────────────────────────────────────────────────┘
Filter Options:
- Property Type: Residential, Commercial, Land, Multi-Family
- Price Range: Slider or preset ranges
- Bedrooms: Any, 1+, 2+, 3+, 4+
- Bathrooms: Any, 1+, 2+, 3+
- Status: Active, Pending, Sold, All
- Location/City: Dropdown of available cities
5.8 Single Property Template (single-property.php)
Detailed property view (see Section 4.6 for layout).
Key Features:
- Photo gallery with lightbox
- Property details sidebar (sticky on scroll)
- Tabbed content: Description | Features | Location
- Agent contact card
- Related/Similar properties
- Share buttons
- Print-friendly version option
5.9 Blog Archive Template (archive.php)
Blog/News listing page:
┌─────────────────────────────────────────────────┐
│ HEADER │
├─────────────────────────────────────────────────┤
│ Hero: "News & Insights" │
├─────────────────────────────────────────────────┤
│ ┌──────────────────────┐ ┌──────────────────┐ │
│ │ │ │ Sidebar │ │
│ │ Post Cards Grid │ │ - Search │ │
│ │ ┌──────┐ ┌──────┐ │ │ - Categories │ │
│ │ │ Post │ │ Post │ │ │ - Recent Posts │ │
│ │ └──────┘ └──────┘ │ │ - Contact CTA │ │
│ │ ┌──────┐ ┌──────┐ │ │ │ │
│ │ │ Post │ │ Post │ │ │ │ │
│ │ └──────┘ └──────┘ │ │ │ │
│ │ │ │ │ │
│ └──────────────────────┘ └──────────────────┘ │
├─────────────────────────────────────────────────┤
│ Pagination │
├─────────────────────────────────────────────────┤
│ FOOTER │
└─────────────────────────────────────────────────┘
Post Card Design:
- Featured image (16:9)
- Category tag
- Post title
- Excerpt (2-3 lines)
- Date + Read time
- "Read More" link
5.10 Blog Post Template (single.php)
Blog/news article page:
┌─────────────────────────────────────────────────┐
│ HEADER │
├─────────────────────────────────────────────────┤
│ Featured Image (full-width) │
├─────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────┐ │
│ │ Post Title (h1) │ │
│ │ Date | Author | Category │ │
│ └─────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────┤
│ ┌──────────────────────┐ ┌──────────────────┐ │
│ │ │ │ Sidebar │ │
│ │ Post Content │ │ - Search │ │
│ │ (Block editor) │ │ - Categories │ │
│ │ │ │ - Recent Posts │ │
│ │ │ │ - Contact CTA │ │
│ │ │ │ │ │
│ └──────────────────────┘ └──────────────────┘ │
├─────────────────────────────────────────────────┤
│ Author Bio Box │
├─────────────────────────────────────────────────┤
│ Related Posts (3 cards) │
├─────────────────────────────────────────────────┤
│ FOOTER │
└─────────────────────────────────────────────────┘
5.11 404 Page Template (404.php)
User-friendly error page:
- Friendly message: "Oops! Page not found"
- Search bar
- Quick links to: Home, Properties, Contact
- Recent/Featured properties
- Maintains brand styling
5.12 Search Results Template (search.php)
- Shows results from all searchable content
- Filters by content type (Pages, Properties, Posts)
- Property results show as cards
- Page/Post results show as list items
6. Block Patterns (Reusable Layouts)
Pre-built block patterns for the client to easily create consistent content:
6.1 Content Patterns
| Pattern Name | Description |
|---|---|
| Hero with CTA | Full-width hero with heading, text, and buttons |
| Feature Grid (3-col) | Three columns with icons, headings, and text |
| Feature Grid (4-col) | Four columns with icons, headings, and text |
| Team Member Card | Single agent/team member display |
| Testimonial | Quote with attribution |
| Testimonial Carousel | Multiple testimonials in slider |
| Stats/Numbers Row | Key statistics with large numbers |
| Split Content | Image on one side, text on other |
| CTA Banner | Full-width call-to-action section |
| FAQ Accordion | Expandable question/answer pairs |
| Contact Info Block | Address, phone, email, hours |
| Image Gallery | Grid of images with lightbox |
| Price Table | Compare service tiers (if needed) |
6.2 Property-Specific Patterns
| Pattern Name | Description |
|---|---|
| Featured Property | Single property highlight |
| Property Grid (3) | Three property cards in a row |
| Property Carousel | Scrollable property showcase |
| Property Search Bar | Search input with filters |
7. Component Design Specifications
7.1 Property Card
┌──────────────────────────────┐
│ [STATUS BADGE: ACTIVE] │
│ ┌──────────────────────────┐ │
│ │ │ │
│ │ Property Image │ │
│ │ (16:10 ratio) │ │
│ │ │ │
│ └──────────────────────────┘ │
│ $XXX,XXX │
│ 123 Main Street │
│ City, MN 56007 │
│ │
│ 🛏 3 🛁 2 📐 1,500 sqft │
│ │
│ [View Details →] │
└──────────────────────────────┘
Specifications:
- Card background:
#161616 - Border radius: 8px
- Image aspect ratio: 16:10 (better for real estate)
- Hover effect: Slight scale (1.02) + shadow
- Status badge colors:
- Active: Green (
#2E7D32) - Pending: Yellow (
#F9A825) - Sold: Gray (
#757575)
- Active: Green (
7.2 Agent Card
┌──────────────────────────────┐
│ ┌──────────────────────────┐ │
│ │ │ │
│ │ Agent Photo │ │
│ │ (Square, rounded) │ │
│ │ │ │
│ └──────────────────────────┘ │
│ │
│ Agent Name │
│ REALTOR® │
│ │
│ 📞 507-XXX-XXXX │
│ ✉️ email@homeproz.com │
└──────────────────────────────┘
7.3 Buttons
Primary Button:
- Background:
#9F3730 - Text:
#FFFFFF - Padding: 16px 32px
- Border radius: 4px
- Hover:
#C8473F - Transition: 0.3s ease
Secondary Button:
- Background: transparent
- Border: 2px solid
#9F3730 - Text:
#9F3730 - Hover: Fill with
#9F3730, text white
7.4 Form Fields
- Background:
#161616 - Border: 1px solid
#2A2A2A - Border on focus:
#9F3730 - Text color:
#F5F5F5 - Placeholder:
#757575 - Border radius: 4px
- Padding: 16px
6. Responsive Breakpoints
/* Mobile First */
--breakpoint-sm: 640px; /* Large phones */
--breakpoint-md: 768px; /* Tablets */
--breakpoint-lg: 1024px; /* Desktop */
--breakpoint-xl: 1280px; /* Large desktop */
--breakpoint-2xl: 1536px; /* Extra large */
Layout Behavior
| Element | Mobile | Tablet | Desktop |
|---|---|---|---|
| Property Grid | 1 col | 2 col | 3 col |
| Agent Grid | 1 col | 2 col | 4 col |
| Nav | Hamburger | Hamburger | Full |
| Hero CTA | Stacked | Side-by-side | Side-by-side |
| Contact Section | Stacked | Split | Split |
7. Imagery Guidelines
7.1 Property Photos
- Aspect ratio: 16:10 for cards, flexible for galleries
- Minimum resolution: 1200px wide
- Format: WebP with JPEG fallback
- Optimization: Lazy loading, responsive srcset
7.2 Agent Photos
- Aspect ratio: 1:1 (square)
- Style: Professional headshot, neutral background
- Minimum resolution: 400x400px
- Treatment: Slight rounded corners (8px) or circular
7.3 Hero Images
- Full-width, high-resolution
- Consider: Local landmarks, beautiful homes, team photos
- Overlay: Dark gradient for text readability
8. Animation & Interaction
8.1 Micro-interactions
- Button hover: Color transition (0.3s)
- Card hover: Scale (1.02) + shadow
- Link hover: Color transition + underline
- Form focus: Border color change
8.2 Page Transitions
- Fade in on scroll (intersection observer)
- Stagger effect for card grids
- Smooth scroll for anchor links
8.3 Loading States
- Skeleton screens for property cards
- Spinner for form submission
- Progressive image loading
9. Accessibility Considerations
- Minimum contrast ratio: 4.5:1 for text
- Focus states: Visible outline on all interactive elements
- Skip to content link
- Proper heading hierarchy (h1 > h2 > h3)
- Alt text for all images
- ARIA labels where needed
- Keyboard navigation support
10. SEO & Performance
10.1 Technical SEO
- Semantic HTML structure
- Schema.org markup for:
- RealEstateAgent
- RealEstateListing
- LocalBusiness
- XML sitemap
- Optimized meta tags per page
- Open Graph tags for social sharing
10.2 Performance Targets
- Lighthouse score: 90+ (Performance)
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
11. Design Mockup References
Screenshots of current site saved to:
site_analysis/homepage-full.png- Full page capturesite_analysis/homepage-viewport.png- Above the fold
12. Open Questions for Client Discussion
- Hero Media: Prefer static image or video background?
- Team Page: Individual agent bio pages, or keep on single page?
- Blog/News: Future consideration for content marketing?
- Testimonials: Have text testimonials ready, or need to collect?
- Photo Gallery: Keep existing gallery section, or integrate into properties?
- Logo: Current logo is from business card - do you have vector/high-res version?
13. Approval
This design document is a draft for review. Please provide feedback on:
- Color palette refinements
- Page structure and sections
- Component designs
- Any missing elements
Document Version: 1.0 Date: November 28, 2025 Prepared by: Hanson.xyz Development Team