Skip to main content

Task 01: Create Login Page Mockup/Design

Role​

Frontend

Overview​

Create comprehensive mockups and design specifications for the MicDots login page, including desktop and mobile views, component states, and visual design system.

Objectives​

  • Design a clean, professional login interface that reflects MicDots branding
  • Create mockups for all screen sizes (mobile, tablet, desktop)
  • Define visual hierarchy and user flow
  • Establish design system (colors, typography, spacing)
  • Include all interactive states (default, hover, focus, error, loading)

Deliverables​

1. Design Mockups​

  • Desktop view (1920px, 1440px, 1280px)
  • Tablet view (768px, 1024px)
  • Mobile view (375px, 414px)

2. Component States​

  • Default state
  • Hover state (buttons, inputs)
  • Focus state (inputs)
  • Error state (invalid input)
  • Loading state (authentication in progress)
  • Success state (redirect animation)

3. Design Specifications​

/* Color Palette */
--background-dark: #1a1f2e
--background-card: #242938
--primary-blue: #4d7cfe
--text-primary: #ffffff
--text-secondary: #a0a8c0
--border-color: #3a4057
--success-green: #4ade80
--error-red: #ef4444

/* Typography */
--heading-font: 'Inter', sans-serif
--body-font: 'Inter', sans-serif
--heading-size: 32-48px
--body-size: 14-16px

/* Spacing */
--spacing-unit: 8px
--container-padding: 40px
--element-spacing: 24px

4. Design Assets​

  • Logo files (SVG, PNG)
  • Icon set
  • Background patterns
  • Illustration assets

Implementation Guidelines​

Left Panel Content​

  • MicDots branding
  • Welcome message and tagline
  • Feature highlights (3-4 key features)
  • Trust indicators
  • Background gradient/pattern

Right Panel (Login Form)​

  • Card-based design with subtle shadow
  • Demo account information banner
  • Email input field
  • Password input field (with show/hide toggle)
  • Sign in button
  • Contact administrator link
  • Clear visual hierarchy

Acceptance Criteria​

  • Design mockups approved by stakeholders
  • All screen sizes covered (320px to 1920px+)
  • Interactive states defined for all components
  • Color palette and typography system documented
  • Design assets exported and organized
  • Figma/Design file shared with dev team
  • Design tokens exported for implementation
  • Accessibility considerations documented (contrast ratios, focus indicators)

Estimated Time​

2 days (16 hours)

Tools & Resources​

  • Design Tool: Figma or Adobe XD
  • Color Contrast Checker: WebAIM Contrast Checker
  • Design Inspiration:
    • Dribbble (Login page designs)
    • Mobbin (Mobile login patterns)
    • Material Design Guidelines

Related Content​

  • Task 02: Design Responsive Layout (Coming Soon)
  • Task 03: Create Welcome Header (Coming Soon)
  • Task 04: Design Input Fields (Coming Soon)
  • Task 05: Design Sign In Button (Coming Soon)

Design References​