UI/UX Design Training in Trivandrum

Figma Syllabus (15 Hours)

Module 1: Figma Fundamentals (3 Hours)

Introduction to Figma

• Understanding the Figma interface and tools.
• Layers, frames, and pages.
• Shapes, text, and alignment.

Design Basics

• Color theory and typography basics.
• Grids and layout principles.

Module 2: Prototyping with Figma (3 Hours)

Wireframing Basics

• Creating low-fidelity wireframes for mobile and web apps.

Prototyping Features

• Adding interactions and transitions.
• Clickable prototypes for user testing.

Module 3: Mobile App Design Project (4 Hours)

Designing a Mobile App

• Screens for a sample app (e.g., task manager or food delivery).
• Login, home, and profile pages.

Components and Variants

• Reusable buttons, icons, and cards.
• Typography and color styles.

Prototyping and Feedback

• Linking screens and testing navigation.

Module 4: Web App Design Project (5 Hours)

Designing a Web App

• Landing page, login screen, and dashboard for a web app.
• Auto-layout for responsive designs.

Final Prototype

• Responsive breakpoints for desktop, tablet, and mobile.
• Functional prototype with interactions.

Web Development Syllabus (15 Hours)

Module 1: HTML, CSS, and Bootstrap Basics (5 Hours)

HTML Fundamentals (2 Hours)

• Structuring web pages (header, footer, sections).
• Essential tags: headings, lists, images, and links tables etc..

CSS Basics (2 Hours)

• Styling text and layout using CSS.
• Box model, positioning, and Flexbox basics.

Bootstrap Basics (1 Hour)

• Setting up Bootstrap in a project.
• Grid system and responsive layouts.
• Common components: navbar, buttons, and cards.

Module 2: Responsive Landing Page Conversion (5 Hours)

Figma to Code Workflow (2 Hours)

• Importing Figma designs for reference.
• Structuring HTML and CSS with Bootstrap.

Responsive Design (3 Hours)

• Using media queries and Bootstrap utilities.
• Creating a responsive navigation bar and hero section.
• Ensuring design consistency with the Figma prototype.

Module 3: Interactivity with JavaScript & Advanced Bootstrap (3 Hours)

JavaScript Basics

• Adding interactivity with JavaScript (e.g., form validation).
• Bootstrap JavaScript components: modals, dropdowns, and carousels.

CSS Animations & Transitions

• Enhancing visuals with hover effects and animations.

Module 4: Final Project and Deployment (2 Hours)

Final Project: Responsive Landing Page

• Convert a complete Figma design into a functional landing page.
• Use Bootstrap and JavaScript for responsiveness and interactivity.

Hosting and Deployment

• Publish the project online using GitHub Pages or Netlify.

Deliverables

Figma:

• Prototyped mobile app and web app designs.

Web Development:

• Fully responsive landing page with Bootstrap and interactivity.
• Hosted live project link.