UI/UX Designing Outline

Tools:

1. Figma

06 Weeks Course Outline (Figma)

https://drive.google.com/file/d/145chQJxSBF8jfxB24TS9n7dHo5PIvOej/view?usp=drive_link

Brief Contents (03 Months Course Outline)

Class 1:

• What is UI/UX Design?
• Difference between User Experience and User Interface Design?
• UI/UX Designer Vs. Developer?
• What is Figma?
• What is Prototype or Mockup?
• Why is Figma better than other tools for UI?
• Creating a Figma account.
• Creating & Naming a Figma design file?
• Introduction to Figma Menus, and Interface?
• Creating Frames & Frame Sizes in Figma File

Class 2:

• Figma Shapes
• How to Draw Shapes in Figma?
• Editing Shapes in Figma
• Selection in Figma
• Colors in Figma
• Applying Colors in Figma
• Clipping Mask
• Playing the Prototype Mode

Class 3:

• What is Color Theory?
• Generating Color Pallettes from Website
• Adding Color Pallettes to Figma File
• Using Color Pallettes on Design
• Saving Color as Styles
• Eye Dropper/Color Picker Tool
• ​​Basic Type Tool
• Make a Poster and use Color Theory

Class 4:

• What is Typography?
• Figma Type Tool, and its Properties
• Saving Fonts as Styles
• Installing your Own Fonts
• Task: Design a Brochure keeping in mind the studied principles

Class 5:

• Use of Pen Tool in Figma
• Bend Tool
• Paint Bucket Tool
• Creating a Tree, and Leaves Using Pen Tool

Class 6:

• Strokes and its properties in Figma
• What are Sitemaps?
• Website Navigation and its types
• Creating a sitemap in Figma

Class 7:

• Introduction to Wireframing
• Hi-Fi & Low-Fi Prototype
• Wireframe’s role in User Experience
• Sketching the Wireframe for a shopping Website

Class 8:

• Introduction to Layout Design
• What is a Responsive Website?
• Introduction to Layout Grid
• What is Grid’s role in UI?
• How to create a 12 Column Grid in Figma?
• Explore Figma Plugins

Class 9:

• Jakob’s Law of Design
• Constraints in Figma
• Creating High Fidelity Webpage Prototype from the sketched Wireframe

Class 10:

• Margins & Padding in UI
• Use of Auto Layout
• Creating a Responsive Webpage using Auto Layout

Class 11:

• Create a Wireframe for Mobile App Page
• Designing a Mobile App Page in Figma

Class 12:

• Introduction to Boolean Operations
• Design Shapes with Boolean Operations
• Design Icons in Figma with Boolean Operations

Class 13:

• Introduction to Figma Components & Variants
• Making Components & Using them
• Creating Variants

Class 14:

• Exploring the Interactive Component Properties
• What is Layer Component Property?
• What is Text Component Property?
• What is Swap Instance Property?

Class 15:

• How to create responsive Designs for different screen sizes?
• Make a responsive web page design for Desktop, Tablet and Mobile

Class 16:

• Prototyping in Figma
• Prototyping Basics
• Prototype View Preferences
• User Flows
• Basic Animations (Navigation, Hover, Click)

Class 17:

• Advanced Prototyping
• Explore “After Delay”
• Create Mobile App Pages Animation

Class 18:

• Introduction to Smart Animate
• Creating Slider Animation Website Using Smart Animate
• Create a Mobile App Using Smart Animate

Class 19:

• Introduction to “Figmotion”
• Create animations using Figmotion
• Saving and Exporting Animations as Video or Gif Files

Class 20:

• What is Material Design 3?
• What are Design Tokens?
• Types of Design Tokens?
• Why we use Tokens?
• Style Token Naming Conventions
• Exploring the “Token Studio” Plugin

Class 21:

• Creating a “Typography Design System” using Token Studio
• Creating a “Color System” using Token Studio
• Explore “Material Design Theme Builder” Plugin
• Saving and Exporting Token Styles

Freelancing Guidelines:

Class 22:

• Introduction to Freelancing & Freelance Platforms
• How to Create your Portfolio on Behance
• Difference between Upwork and Fiverr
• Fiverr Account Creation & Gig Making
• Tips & Tricks on Fiverr

Class 23:

• Introduction to Upwork
• Upwork Account Creation
• Proposal Writing & Bidding Techniques on Upwork
• Mistakes to Avoid on Upwork as beginner
• Tips to win more Jobs on Upwork

Class 24:

• More Topics on Freelancing

Sessions 25 - 32

One Month Guided Project with Trainer’s Support (02 days per week):

Trainer will check the progress of assigned individual Project and guide about further work.

Training and Technical Support

Training by the experts working on latest tools in the industry

Daily tasks will be implemented in the Lab

Assignment of each class will be the extension of the lab task

A guided project is part of the training where the expert will visit as per schedule

Engage the candidates to learn freelancing activities

Appear in the international Certification with additional fee for Examination

Preferred Audience for Professional Track

Anyone with basic understanding of Computer Operations / marketing

Students of management science, economics, Masscom, IT/CS/SE/EE and any other relevant degree programs

Training Duration & Schedule

03 Months (03 sessions / week)

•Technical Content and - 07 weeks

•Free-lancing training - 01 week

•Guided Project Work (with Trainer) - 04 weeks (02 sessions / week)

National / International Certifications

International: Adobe Certification

National: Certificate of Training by NUML