Ui/Ux Design for Modern Online Learning Platform with Mobile-First Approach

The client is seeking a talented ui/ux designer to create a modern, clean, and energetic website for an online learning platform. The design should be innovative and approachable, drawing inspiration from platforms like Platzi and Duolingo, balancing professionalism with personality. The target audience consists of young adults and engineers, requiring a current and credible interface.Visual Identity Guidelines: Color Palette: Primary electric blue, white backgrounds, and a warm accent color (green or orange, to be confirmed). Typography: Modern sans-serif fonts such as Inter, Poppins, or Nunito, with a clear hierarchy for titles, subtitles, and body text. Iconography: Clean line icons, referencing styles like Heroicons or Phosphor Icons. Photography: Use real images of people actively studying at screens, avoiding generic stock photography.Key Pages to be Designed: Home Page: Must include a prominent hero section with a clear call-to-action, an overview of services, testimonials, featured courses, and a contact banner. Course Catalog: A grid layout for subject cards, each displaying a photo, teacher name, price, course level, and an enroll button. A filter bar should be present at the top. Teacher Profile Page: A public profile card featuring the teacher's photo, biography, certificates, portfolio, software used (displayed as tag badges), and student ratings. Student Portal: A clean dashboard interface showing upcoming classes, enrolled courses, learning materials, and access to a chat function. Teacher Portal: A dashboard for teachers to manage their schedule, view student lists, summarize earnings, and edit their profile. Contact Page: A straightforward contact form, a WhatsApp button, and links to social media.UI Details and Interactions: Navigation: A fixed top navigation bar, with an optional solid or glassmorphism effect on scroll. Animations: Include animated counters for metrics like the number of students, courses, and hours taught. Subtle scroll animations (fade-in, slide-up) are desired, ensuring smoothness without distraction. Accessibility: A floating WhatsApp button should be present on all pages. Responsiveness: The design must be mobile-first, as the primary audience uses smartphones for browsing. Optional Feature: A dark mode toggle is recommended.