Front‐End Documentation
In this document we describe the important aspects of Softserve Academy’s mockups, focusing on the design elements, user interface (UI) details, and frontend development to create the project. The Figma mockups serve as the foundation for this documentation.
The Figma prototype of Softserve Academy presents a structured learning platform that prioritizes the user experience, ease of navigation, and clear presentation of content. The mockups include multiple key sections, such as:
- Home Page
- User Profile & Settings
- Course Search and Filtering
- Inside Content
This mockup showcases the detailed mockup of a course in Softserve Academy. It provides an engaging and informative interface for learners to preview and begin the course. The page features a course preview video, course duration, language, and relevant tags to help users quickly assess its content. Additional course details such as the creator’s name, upload date, and a rating system with user reviews create transparency and help with decision-making. The "Start Now" button encourages immediate action, while the "Write a Review" and review section fosters community feedback. The clean and interactive layout enhances the user experience by offering all the necessary course details in an accessible format.
- Learning Route
The "Learning Routes" page in the Softserve Academy’s personalized learning experience. Features a tailored set of courses based on the user's chosen preferences such as content type, learning style, and weekly availability. The courses are grouped into categories like programming languages, tech development, and languages, with each section displaying the learning path progression from beginner to advanced topics. Users can track their progress through each course level, ensuring they are on a structured and focused journey toward mastering their selected skills. The dynamic and visually clear approach learning, allowing users to easily continue where they left off. The "Learning Path" button enables them to update their preferences, making this experience adaptive to their evolving needs.
- Learning Path Selection
The learning path in Softserve Academy is a critical feature that enhances the user experience by offering personalized, structured courses tailored to individual preferences, such as content type, learning style, and language. By allowing users to filter through a variety of options like guides, quizzes, or articles, and select their preferred mode of learning—whether autodidact, guided, or through challenges—users can focus on their specific learning goals and progress at their own pace. This approach ensures an engaging, adaptive learning experience that keeps users motivated and efficiently drives them toward their educational objectives.
The color palette is a mix of blues and greens with gradient transitions, providing a modern and inviting feel and based on the softserve website. These colors are used in different components for consistency:
- Primary Colors: Shades of blue and green.
- Accent Colors: Light grays and whites for backgrounds and text.
- Hover/Active States: Darker shades for clickable items.
- Icons: Used for navigation, content types (guides, quizzes, articles), and actions (edit, delete, continue). Icons are simple, flat, and in line with the modern UI style.
- Buttons: Rounded corners with hover effects. Primary buttons (e.g., "Search," "Continue Learning") use a bold blue color with white text, while secondary buttons are lighter.
- The layout follows a grid system for responsiveness, ensuring that the platform is mobile-friendly and adjusts well to various screen sizes.
- Padding and Margins: Generous use of white space ensures the UI feels uncluttered, and elements are spaced out for better readability and accessibility.
- Fixed at the top with links to Home, About, Routes, and Pricing, along with a user account button.
- The navigation bar features gradient color and simple drop-downs for accessing the learning routes.
- Learning paths and courses are represented as content cards with relevant information, such as title, level, and a brief description. Cards have hover effects and progress bars showing completion.
- Modular Components: Each section (e.g., Learning Path cards, User Profile) should be developed as reusable components to ensure scalability and maintainability.
- Props and State Management: In a framework like React or Vue, props should pass data between parent and child components. Global state management (e.g., Vuex for Vue or Context API for React) can be used to handle user data, preferences, and learning routes.
- Search & Filters: The search functionality and filters (topics, levels, hours, etc.) should be dynamic, using JavaScript to update the displayed courses based on user input.
- Learning Routes: Each learning route should be selectable, and clicking “Continue Learning” should take the user to the next course in their personalized path.
- The landing page introduces Softserve Academy, providing high-level information about learning routes, available courses, and key features.
- The call-to-action (CTA) buttons like Start Learning and Explore Courses should be clearly visible and strategically placed.
- Users can filter learning paths by content type (guides, quizzes, articles), learning style (autodidact, guided), and language. The search bar allows users to quickly find specific courses.
- Each learning path card shows the course title, level, and progress. Users can easily continue learning from where they left off.
- The profile page contains user-specific information such as name, email, preferences (available learning time, education level), and a visual dashboard displaying current and target skills.
- Users can update their information or manage their learning preferences.
- A key feature that allows users to search and filter courses based on multiple criteria (e.g., topic, language, level).
- The search functionality should be fast and responsive, providing real-time filtering based on user inputs.
- This section displays the user’s personalized learning journey. Each course has a progress tracker showing the percentage completed.
- The user can click on a course to resume learning, with courses dynamically updating based on user preferences and progress.
This color palette is inspired by the SoftServe project, focusing on clean, modern, and functional design principles. The palette has been segmented into specific roles for various elements in the user interface and different views.
- Cyan (#40B0E6) and Green Light (#E1C7A5):
These colors are prominently used across the user interface (UI) for elements such as buttons, input fields, highlights, and progress bars. They are chosen to create a vibrant and approachable feel that aligns with user interaction. Their brightness makes them ideal for guiding users through tasks and indicating success or progress.
- Purple (#6213C8) and Orange (#C95B3D):
These colors are reserved for special sections like the Admin Dashboard and Registration/Authentication views. Purple adds a professional, distinguished tone, making it suitable for management-related actions, while Orange is used to draw attention to key actions like registering or handling admin alerts. Together, they ensure that administrative tasks and onboarding processes stand out and are easily recognizable.
- White darker (#FDFAFA) and Black (#000000):
White serves as the primary background color, providing a clean and minimal canvas that lets other colors stand out, while Black is used for text and footer sections, ensuring high contrast and readability. This combination maintains clarity and structure throughout the site, regardless of content density.
- Dark Blue (#15309F):
This deep blue is used specifically for important buttons and hyperlinks, providing a sense of importance and actionability. It is typically applied to call-to-action buttons and key navigation links, where user engagement is encouraged.
This palette creates a balance between vibrant, attention-grabbing colors for user interaction and more neutral tones that enhance readability and usability. Each color serves a distinct role, ensuring a cohesive user experience while maintaining a polished, professional interface. The combination of functional UI colors with accent colors for admin and registration views provides clear visual hierarchies and guides users through their journey.
This documentation outlines the core design principles and frontend development considerations for the Softserve Academy platform, as presented in the Figma mockups. By adhering to these guidelines, the development team can ensure the platform is visually cohesive, functional, and optimized for user engagement across all devices.