UI UX Design

UI/UX Design

Design System

Color Palette

Primary Colors:
- Primary: #2196F3 (Blue)
- Secondary: #FF4081 (Pink)
- Background: #FFFFFF (White)
- Surface: #F5F5F5 (Light Gray)

Text Colors:
- Primary Text: #212121 (Dark Gray)
- Secondary Text: #757575 (Medium Gray)
- Disabled Text: #9E9E9E (Light Gray)

Status Colors:
- Success: #4CAF50 (Green)
- Error: #F44336 (Red)
- Warning: #FFC107 (Amber)
- Info: #2196F3 (Blue)

Typography

Font Family: Roboto
Weights:
- Regular (400)
- Medium (500)
- Bold (700)

Text Styles:
- H1: 24sp / 32sp line height / Bold
- H2: 20sp / 28sp line height / Bold
- H3: 16sp / 24sp line height / Medium
- Body: 14sp / 20sp line height / Regular
- Caption: 12sp / 16sp line height / Regular

Component Design

Buttons

Primary Button:
- Height: 48dp
- Corner Radius: 24dp
- Text: 14sp Medium
- Padding: 16dp horizontal

Secondary Button:
- Height: 40dp
- Corner Radius: 20dp
- Text: 14sp Regular
- Padding: 16dp horizontal

Cards

Event Card:
- Corner Radius: 12dp
- Elevation: 2dp
- Padding: 16dp
- Image Height: 160dp

Screen Designs

1. Event Discovery Screen

Layout Components:
├── TopAppBar
│   ├── Search Field
│   └── Filter Button
├── Event Categories
│   └── Horizontal Scrollable Chips
├── Featured Events
│   └── Horizontal Card Carousel
└── Event List
    └── Vertical Scrollable Cards

2. Event Details Screen

Layout Components:
├── Collapsing Header
│   ├── Event Image
│   └── Event Title
├── Event Info Section
│   ├── Date & Time
│   ├── Location
│   └── Distance
├── Description
├── Registration Info
└── Similar Events

3. Calendar View

Layout Components:
├── Month View
│   ├── Week Days Header
│   └── Date Grid
├── Event Indicators
└── Event List for Selected Date

User Flows

Event Registration Flow

graph TD
    A[Discovery Screen] -->|Select Event| B[Event Details]
    B -->|Tap Register| C[Registration Form]
    C -->|Fill Details| D[Payment Screen]
    D -->|Complete Payment| E[Confirmation]
    E -->|Add to Calendar| F[Calendar Screen]

Loading

Event Search Flow

graph TD
    A[Home Screen] -->|Tap Search| B[Search Screen]
    B -->|Enter Query| C[Search Results]
    C -->|Apply Filters| D[Filtered Results]
    D -->|Select Event| E[Event Details]

Loading

Interactive Components

1. Distance Selector

Components:
- Slider with distance range
- Preset distance chips
- Custom input field

2. Date Picker

Features:
- Calendar view
- Quick date selection
- Date range selection
- Recurring event options

3. Location Selector

Components:
- Current location button
- Search with autocomplete
- Recent locations
- Map view selection

Animations and Transitions

Screen Transitions

- Shared element transitions for event details
- Fade through for bottom navigation
- Material motion patterns

Micro-interactions

- Button state animations
- Loading indicators
- Pull to refresh
- Scroll to top FAB

Accessibility

Guidelines

- Minimum touch target size: 48x48dp
- Color contrast ratio: 4.5:1 minimum
- Content scaling support
- TalkBack support

Dark Mode

Dark Theme Colors:
- Background: #121212
- Surface: #242424
- Primary: #90CAF9
- Secondary: #FF80AB

Responsive Design

Screen Sizes

Breakpoints:
- Compact: < 600dp
- Medium: 600dp - 840dp
- Expanded: > 840dp

Layout Adjustments:
- Single column for compact
- Two columns for medium
- Three columns for expanded

Loading States

Skeleton Layouts

Components with Shimmer:
- Event cards
- Profile sections
- Calendar entries

Progress Indicators

Types:
- Circular progress for actions
- Linear progress for page loads
- Pull to refresh indicator

Error States

Error Screens

Types:
- Network error
- Empty states
- No results found
- Location permission denied

Design Resources

Tools:
- Figma for UI design
- Material Design Components
- Custom icon set
- Design token system

Prototypes

[Link to Figma Prototypes - TBD]

• Event Discovery Flow
• Registration Process
• Social Features
• Calendar Integration