BiohazardVFX/biohazard-vfx
2
1
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity
biohazard-vfx/DESIGN_REFINEMENT_PLAN.md
Nicholai 51e5af7746
Some checks are pending
Build and Push to Docker Hub / Push Docker image to Docker Hub (push) Waiting to run
Details
Build and Push Docker Image / build-and-push (push) Waiting to run
Details
I've begun refactoring the homepage, changing the NAV and am trying to restyle the site with more modern sensibilities.
2025-08-19 04:12:13 -06:00

3.4 KiB
Raw Permalink Blame History

Design Refinement Plan for Biohazard VFX Website

Based on the provided feedback and code review, here's a comprehensive plan to refine the website's design with a focus on minimalism, usability, and maturity.

1. Layout & Spacing Improvements

Container & Grid System

  • Increase max-width of .container-custom for larger screens (1920px+) to utilize full horizontal space
  • Implement standard exponential spacing scale (using Tailwind's built-in spacing scale)
  • Review and adjust all padding/margin values to use standard spacing scale

Section Spacing

  • Reduce excessive vertical padding in sections (currently py-12 md:py-16 lg:py-20)
  • Implement consistent section spacing using exponential scale

2. Color & Typography Refinement

Color Palette

  • Review accent color usage (currently #3f7832ff / #90b075ff) - ensure consistency
  • Reduce saturation of interactive elements (buttons, links, etc.)
  • Ensure proper contrast ratios for all text elements

Typography

  • Reduce font size hierarchy (especially hero titles)
  • Simplify font stack - reduce from 3 fonts to 2 (Inter + one display font)
  • Reduce font weight variations - limit to 2-3 weights max

3. Component Refinements

Navigation

  • Simplify mobile navigation drawer animation
  • Reduce shadow intensity on navigation elements
  • Remove decorative elements (glows, gradients) from navigation

Cards & Project Grid

  • Reduce border-radius on all cards (currently 8px default, reduce to 4px)
  • Remove hover zoom effects on project images (group-hover:scale-105/110)
  • Simplify project card content - reduce animation complexity
  • Standardize project grid layout - remove complex asymmetric grid

Buttons

  • Reduce button border-radius (currently 8px, reduce to 4px)
  • Simplify button states - remove glow effects
  • Reduce button padding - use tighter spacing

Footer

  • Simplify footer layout - reduce vertical spacing
  • Reduce form element padding
  • Simplify social media icons

4. Animations & Effects Reduction

Global

  • Remove or significantly reduce all hover animations
  • Eliminate all "bouncing" or exaggerated transitions
  • Simplify focus states - use standard outline instead of glow

Specific Components

  • HeroSection - Remove video parallax effect
  • ProjectGrid - Remove image zoom on hover
  • BlogCard - Remove image zoom on hover
  • All cards - Remove scale/transform effects

5. Implementation Steps

  1. Update Tailwind config with refined spacing, colors, and border-radius values
  2. Modify global CSS to implement new design tokens
  3. Refactor Layout components (Container, Section, Grid) with new spacing
  4. Simplify Navigation component
  5. Redesign ProjectGrid with simpler, more consistent layout
  6. Refactor Cards components (ProjectCard, BlogCard, TeamCard)
  7. Simplify Buttons components
  8. Refactor Footer component
  9. Update page components (HomePage, ProjectsPage, BlogPage) to use new styles
  10. Review and test all pages on different screen sizes

6. Quality Assurance

  • Test on various screen sizes (mobile, tablet, desktop, large desktop)
  • Verify color contrast ratios meet accessibility standards
  • Ensure all interactive elements are clearly identifiable without excessive effects
  • Validate performance improvements (reduced animations, simpler layouts)