82 lines
3.4 KiB
Markdown
82 lines
3.4 KiB
Markdown
# 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
|
|
- [x] Increase max-width of `.container-custom` for larger screens (1920px+) to utilize full horizontal space
|
|
- [x] Implement standard exponential spacing scale (using Tailwind's built-in spacing scale)
|
|
- [x] Review and adjust all padding/margin values to use standard spacing scale
|
|
|
|
### Section Spacing
|
|
- [x] Reduce excessive vertical padding in sections (currently py-12 md:py-16 lg:py-20)
|
|
- [x] 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
|
|
- [x] Reduce border-radius on all cards (currently 8px default, reduce to 4px)
|
|
- [x] 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
|
|
- [x] Reduce button border-radius (currently 8px, reduce to 4px)
|
|
- [x] Simplify button states - remove glow effects
|
|
- [x] 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
|
|
- [x] Remove or significantly reduce all hover animations
|
|
- [x] Eliminate all "bouncing" or exaggerated transitions
|
|
- [x] Simplify focus states - use standard outline instead of glow
|
|
|
|
### Specific Components
|
|
- [ ] HeroSection - Remove video parallax effect
|
|
- [x] ProjectGrid - Remove image zoom on hover
|
|
- [x] BlogCard - Remove image zoom on hover
|
|
- [x] 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) |