Description
UI/UX Designing Outline
Tools:
- 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