Skip to content

design_guidelines.md

Latest commit

 

History

History
195 lines (157 loc) · 6.54 KB

design_guidelines.md

File metadata and controls

195 lines (157 loc) · 6.54 KB

Photo Organizer App - Design Guidelines

Design Approach

Selected Approach: Design System (Utility-Focused) Primary Reference: Google Photos / Apple Photos aesthetic Justification: This photo management application prioritizes efficiency, clarity, and usability. Users need to quickly upload, organize, and find their photos. The design should stay out of the way while providing powerful organizational tools.

Core Design Principles:

  1. Content-first: Photos are the hero, UI is supportive
  2. Scannable hierarchy: Clear categorization and filtering
  3. Efficient interactions: Minimal clicks to accomplish tasks
  4. Generous whitespace: Let photos breathe in the layout

Typography

Font Family: Inter (via Google Fonts CDN)

  • Primary: Inter for all UI elements
  • Fallback: system-ui, -apple-system, sans-serif

Type Scale:

  • Page Titles: 2xl (24px), font-semibold
  • Section Headers: xl (20px), font-semibold
  • Card Titles/Categories: base (16px), font-medium
  • Body Text: sm (14px), font-normal
  • Captions/Metadata: xs (12px), font-normal
  • Button Text: sm (14px), font-medium

Layout System

Spacing Primitives: Tailwind units of 2, 4, 6, 8, 12, and 16

  • Component padding: p-4 or p-6
  • Section gaps: gap-6 or gap-8
  • Card spacing: p-4
  • Icon-to-text spacing: gap-2
  • Form element spacing: space-y-4

Container Strategy:

  • Max width: max-w-7xl for main content area
  • Sidebar width: Fixed 240px (w-60) for categories
  • Content padding: px-6 py-4 on desktop, px-4 py-3 on mobile

Application Layout Structure

Main Layout:

  • Two-column layout: Fixed sidebar (240px) + fluid main content area
  • Sidebar: Category navigation, filter controls, upload button
  • Main area: Breadcrumb navigation, photo grid, and controls
  • Top bar: App logo/name, search input, user profile/settings icon

Sidebar Components:

  • Upload button: Prominent, full-width, at top
  • Category list: Vertical list with icon + label + photo count
  • Filter section: Collapsible groups for file type, date range
  • Footer: Storage usage indicator with visual progress bar

Main Content Area:

  • View controls bar: Grid/list toggle, sort dropdown, select mode toggle
  • Photo grid: Responsive masonry or uniform grid layout
  • Empty states: Large icon + helpful message when no photos

Component Library

Upload Interface

Drag-and-Drop Zone:

  • Large dashed border area (min-h-64) when empty
  • Cloud upload icon (size-16) centered
  • "Drag photos here or click to browse" text
  • File type and size guidance text
  • Progress indicators during upload with percentage and file name
  • Success confirmation with thumbnail preview

Photo Grid

Grid Configuration:

  • Desktop: 4-5 columns (grid-cols-4 lg:grid-cols-5)
  • Tablet: 3 columns (md:grid-cols-3)
  • Mobile: 2 columns (grid-cols-2)
  • Gap between items: gap-4
  • Aspect ratio: Square (aspect-square) for uniform layout

Photo Card:

  • Image: Rounded corners (rounded-lg), object-cover
  • Hover state: Overlay with opacity showing filename and actions
  • Selection indicator: Checkbox in top-left corner (absolute positioning)
  • Quick actions: Download, move to category, delete icons on hover

Category Management

Category Badge/Pill:

  • Rounded-full styling
  • Small text (text-xs)
  • Icon + label pairing
  • Padding: px-3 py-1
  • Used in both sidebar and photo metadata

Category Icons (from Heroicons):

  • Personal: UserIcon
  • Work: BriefcaseIcon
  • Travel: MapPinIcon
  • Events: CalendarIcon
  • Other/Uncategorized: FolderIcon

Filter Controls

Filter Dropdown:

  • Checkbox lists for file types (JPEG, PNG, HEIC, RAW)
  • Date range picker with preset options (Today, This Week, This Month, This Year)
  • Applied filters shown as dismissible pills above photo grid
  • "Clear all filters" text button when filters active

Search Bar

Implementation:

  • Full-width in top bar (max-w-md)
  • Magnifying glass icon prefix
  • Placeholder: "Search photos..."
  • Rounded-lg borders
  • Focus state with subtle ring

Modals

Photo Detail Modal:

  • Full-screen overlay with semi-transparent backdrop
  • Large photo display (max-h-90vh, max-w-90vw)
  • Metadata sidebar: Filename, size, upload date, category, file type
  • Action buttons: Download, move, delete, close
  • Navigation arrows for next/previous photo

Confirmation Dialogs:

  • Centered modal (max-w-md)
  • Icon at top indicating action type
  • Clear heading and description
  • Primary and secondary action buttons
  • Escape key to dismiss

Navigation Patterns

Breadcrumb Navigation:

  • Show current view context: "All Photos / Travel / Japan 2024"
  • Clickable segments to navigate back
  • Chevron separators
  • Text-sm sizing

Responsive Behavior:

  • Mobile: Sidebar becomes slide-out drawer triggered by hamburger menu
  • Tablet: Sidebar remains visible but narrower (w-48)
  • Desktop: Full sidebar always visible

Interactive States

Button States:

  • Primary buttons: Solid style, rounded-lg
  • Secondary buttons: Outline style, rounded-lg
  • Icon buttons: p-2, rounded-full or rounded-lg
  • Disabled: Reduced opacity (opacity-50), cursor-not-allowed

Selection Mode:

  • Toggle between normal and multi-select mode
  • Selected items: Blue checkmark indicator, subtle background tint
  • Batch actions bar: Appears at bottom when items selected (fixed positioning)
  • Actions: Move to category, download selected, delete selected

Special Considerations

Loading States:

  • Skeleton screens for photo grid while loading
  • Shimmer animation effect on placeholder cards
  • Spinner with text for upload progress

Empty States:

  • Large centered icon (size-20)
  • Encouraging headline (text-xl)
  • Descriptive subtext (text-sm)
  • Primary action button (e.g., "Upload Your First Photos")

Error States:

  • Toast notifications for failed uploads (top-right corner)
  • Inline error messages for form validation
  • Retry mechanisms for failed operations

Images

Hero/Welcome Screen (First-Time Users):

  • Full-screen welcome illustration showing photo organization concept
  • Abstract representation of photos being organized into categories
  • Centered welcome message with "Get Started" button
  • Only shown on first visit, replaced by photo grid after upload

Empty State Illustrations:

  • Custom illustration for empty category views
  • Small decorative graphic for "no search results"
  • Keep illustrations simple, 2-3 color palette maximum

Photo Thumbnails:

  • Generated automatically from uploads
  • Maintain aspect ratio with object-cover
  • Lazy loading for performance (only load visible thumbnails)

This design creates a clean, efficient photo management experience that prioritizes usability while maintaining visual polish.