Main Page

User Panel

Compare Car

Single Car

Description for MotoFlow Pages Design

• Design Features:

  • - All pages are fully designed with smooth animations for transitions, providing a modern and user-friendly experience.

  • - A comprehensive design system has been created, including reusable components, custom icons, and a clear style guide to ensure consistency across all pages.

  • - The primary font used is Poppins, chosen for its modern, clean, and professional appearance.

  • - The project also includes the development of a logo that aligns with the brand’s identity and overall design language.

Page Details:

• - Homepage: Features a sleek hero section with a search bar, recommended cars, AI-powered search engine, comparison tools, and the latest news, all integrated with smooth hover and scroll animations.

• - Add Listing: A structured form to upload car details, photos, and features with intuitive layout and seamless transitions between sections.

• - Messages: An interactive chat interface for communication between buyers and sellers, including animations for sending messages and updates.

• - Settings: A clean and easy-to-use profile management section, allowing users to update personal information, change passwords, and manage preferences.

• - My Favorites: Displays saved car listings with a grid layout, hover effects, and animations for easy navigation and interaction.

• - Single Car View: A detailed page showcasing individual car specifications, features, and location, enriched with interactive icons and smooth transitions.

• - Compare Cars: Allows side-by-side comparison of car specifications, features, and locations with dynamic updates and visual enhancements.

• - Dashboard: A summary page with car listings, total views, and an activity log, designed with clarity and functionality in mind.

• - And more...

Design System:

• - Components: Buttons, cards, forms, modals, and other UI elements were created as reusable components for efficient development and scalability.

• - Icons: Custom-designed icons enhance usability and align with the brand's visual identity.

• - Style Guide: Includes typography rules, color palette, spacing, and guidelines for animations and interactions.

Interactive Features:

• - All pages incorporate hover effects, click animations, and transitional designs to improve user engagement and visual appeal.

• - Pages are designed to be responsive, ensuring a seamless experience across desktop and mobile devices.