01. Productive Website UI Design

Productive Website UI Design

Raisul Hasan Rafi

The landing page of this website, created using Figma, showcases a clean and modern design focused on a user-friendly experience. Here is a detailed description of its UI design elements:

Header

Logo and Title: Positioned at the top left, the logo reads "Productive Community" in a modern, green font that stands out against the light background.
Navigation Menu: Includes links to "Home," "About," "Services," and "Products," neatly aligned in the center of the header. On the far right, there is a "Contact" button outlined in green.

Hero Section

Tagline: Bold text "WATCH. LEARN. GROW." prominently displayed on the left, serving as the main focus of the hero section.
Featured Courses: A horizontal layout of course cards to the right of the tagline:
- Creative Content Writing: Highlighted with a "GO" button overlaid on the card.
- Other Courses: Four additional course cards with "Lorem Ipsum" placeholders.

Main Content

Instructor Access: A section below the hero with a headline "Unlimited access to 100+ instructors."
Categories Navigation: Horizontal menu listing "All Categories," "Lifestyle," "Writing," "Food," and "Business" for easy filtering.
Featured Courses Grid: A grid layout showcasing courses such as "Sales Marketing," "Data Analysis," "Copywriting Pro," and "Design Art," each card indicating a duration of 5 months.

Skills Section

Motivational Tagline: "GET SKILL. FIND JOB. BE ESSENTIAL." prominently displayed.
Skill Benefits:
- Leadership: Described with an icon and placeholder text.
- Responsibility: Another skill listed with its respective icon and description.
- Flexibility: Similarly designed with an icon and description.
Statistics: A right-aligned block highlighting key stats in a green box:
- "250+ Happy Clients"
- "50+ Companies"
- "24/7 Services"

Customer Testimonials

Title: "What our customers says."
Testimonial Cards: Three cards with placeholder text and the same testimonial from "Jhon Smith, CEO," featuring a small avatar and a minimalistic design.