142 lines (119 loc) · 4.17 KB

Physics Scholarship Program Website Design Specifications

Color Scheme

Primary Color: #0C3559 (Deep Navy Blue) - Represents professionalism and academia
Secondary Color: #E94B3C (Bright Red) - For accents and call-to-action elements
Tertiary Colors:
- #2A9D8F (Teal) - For secondary elements and highlights
- #F2CC8F (Light Gold) - For backgrounds and subtle accents
- #F8F9FA (Off-White) - For main background
Text Colors:
- #212529 (Near Black) - For main text
- #495057 (Dark Gray) - For secondary text
- #FFFFFF (White) - For text on dark backgrounds

Typography

Headings: 'Montserrat', sans-serif - Bold and clean for scientific professionalism
Body Text: 'Open Sans', sans-serif - Highly readable for content
Accent Text: 'Roboto Mono', monospace - For code snippets or technical information
Font Sizes:
- H1: 2.5rem
- H2: 2rem
- H3: 1.75rem
- H4: 1.5rem
- Body: 1rem
- Small: 0.875rem

Layout Components

Header

Fixed navigation bar with program logo on left
Main navigation links centered or right-aligned
Mobile: Collapsible hamburger menu
Subtle shadow for depth
Height: 70px (desktop), 60px (mobile)

Hero Section (Home Page)

Full-width banner with physics-themed background image
Overlay with semi-transparent gradient
Centered program title and tagline
Call-to-action button for application
Height: 70vh (desktop), 50vh (mobile)

Content Sections

Max-width container: 1200px
Padding: 4rem (top/bottom), 2rem (left/right)
Section headings with decorative underline
Two-column layout for text and images (desktop)
Single column layout (mobile)

Card Components

For past cohort experiences and program highlights
Subtle shadow and border radius
Hover effect with slight scale increase
Padding: 1.5rem
Margin between cards: 1.5rem

Form Elements

Input fields with floating labels
Form validation with clear error messages
File upload area with drag-and-drop functionality
Submit button with loading state
Form width: 100% (mobile), 70% (desktop)

Footer

Dark background (#0C3559)
Three-column layout for contact info, quick links, and institutional logos
Social media icons
Copyright information
Padding: 3rem (top/bottom)

Visual Elements

Institutional Logos

Prominent display in footer
Secondary display on home page
Consistent sizing and spacing
Grayscale with hover color effect

Physics-Themed Graphics

Particle physics illustrations for section dividers
Atom and particle icons for bullet points
Wave patterns for backgrounds
Scientific diagrams as decorative elements

Images

High-quality laboratory photos
Research equipment imagery
Student collaboration photos
Image treatment: Subtle duotone effect using primary colors

Interactive Elements

Subtle hover effects on buttons and links
Smooth scroll behavior
Form field focus states
Animated transitions between pages

Responsive Design Breakpoints

Mobile: 0-576px
Tablet: 577px-991px
Desktop: 992px+

Accessibility Considerations

WCAG 2.1 AA compliance
Sufficient color contrast
Keyboard navigation support
Screen reader friendly markup
Focus indicators for interactive elements

Page-Specific Design Elements

Home Page

Hero section with particle physics animation background
Institutional logos carousel
Program highlights in card format
Timeline of important dates

About Program Page

Infographic showing program structure
Faculty profiles with hover information
Research areas with iconic representations

Past Cohorts Page

Testimonial carousel with student photos
Project showcase with expandable details
Statistics visualization using charts

Application Page

Timeline showing application process steps
Collapsible FAQ sections
Highlighted important dates

Application Form Page

Multi-step form with progress indicator
Document upload area with file type indicators
Success confirmation animation

Technical Design Notes

CSS organization using BEM methodology
Mobile-first approach
Progressive enhancement for older browsers
Optimized assets for fast loading
Minimal JavaScript dependencies