PRESENTS

UI & UX DESIGN
PROGRAMME
BECOME A
PROFESSIONAL
UI & UX DESIGNER

Course Syllabus
Adobe Illustrator Figma

Adobe Photoshop WordPress

Course Fees:
Easy EMI options
4 certification upon
Successful completion of course
Limited seats available!
 WHY
DIGIFINE
TRAINING?
 Premium Institute of learning

 Industry Recognized Courses

 Top Technologies and Tools

 Certified Industry Trainers

 Live projects for hands-on experience

 Versatile timings for batches

 Professional & International Certificates

 Supportive environment for learning

 Career guidance and mentoring

 100% placement assistance

 Post Placement Support

 OUR
COURSE
MODULES
 ADOBE
ILLUSTRATOR
Illustrator is the industry-standard vector graphics
application that lets you create logos, icons, sketches,
typography and complex illustrations for print, web,
interactive, video and mobile devices.
Its time saving features allow users to create work
quickly and efficiently at the highest professional
standard.
A closer look at what you will learn:
1. We will start with the basics, unique features. You will also
so you feel totally at ease with learn how to create your own
the interface, preferences, custom brushes.
setting up new documents. We
will also cover fundamental 5. In the next topics you will
principles like the difference learn about tracing
between vector and pixel photographs with a powerful
graphics. feature called Image Trace and
everything you need to know
2. The next two topics will about adding type to your
teach you everything you need illustrations.
to know about working with
objects in Illustrator. These are 6. Once you are comfortable
the buildings blocks of all with all of that you can move
vector graphics so these initial onto the Advanced Techniques
lessons will help you to section, which will introduce
understand and work with more complex features like
more complex tools later on. Symbols, Graphs, Gradient
Meshes, Perspective Drawing,
3. Next up, in the drawing Recolor Artwork and
section of the course, master workflows like Masking.
drawing modes, the Pen tool,
Curvature tool and all the 7. Finally, discover how to
different ways you can draw correctly export your work for
and manipulate paths. print and screen, and ways to
share and archive your
4. Next learn about the projects.
different types of Brushes and
how to make the most of their
 COURSE
GLIMPSE OF STUDENTS’ WORK

CONTENT
VECTOR ART
Section 1: Introduction
What is Graphic Design? Introduction to Adobe Illustrator | Vector
Graphics vs Raster Graphics

Section 2: Basics
Interface Overlook | Customize your workspace | Document Settings -
Create and Save New Document | Differences between CMYK vs RGB
| Navigation - Zoom Tool & Pan Tool

Section 3: Working with Objects

Selection Tool | Transformations | Undo - Redo | Copy, Paste, Paste in
Place | Group, Ungroup | Arrange | Basic Shapes | Aligning and
Distributing Objects | Pathfinder | Shape builder tool

Section 4: Drawing
Direct Selection Tool | Pen Tool | Anchor point Tool | Pen Tool
alternatives - Curvature Tool, Reshape Tool, Arc Tool, Corner Widget |
Symmetrical drawing (Reflection tool) | Concentric drawing
techniques (Rotation Tool) | Transform each effect | Repeat Option |
Shaper, Pencil, Smooth, Path Eraser & Joint tools | Eraser, Scissors &
Knife tool | Transform Tools (scale and shear tool) | Distort and
Transform tools

Section 5: Appearance of Objects

Stroke settings | Width tool | Color Theory | Swatches & Color Panel |
Pantone Color | Gradients | Freeform Gradients | Gradient Mesh |
Creating Patterns | Refining Pattern Design | Layer Panel | Effects |
Appearance panel | Artboards

Section 6: Brushes
Calligraphic Brushes | Scatter Brushes | Art Brushes | Bristle Brushes |
Pattern Brushes | Image Brushes | Strokes on image

Section 7: Type (Text)

Types of Typefaces | Character formatting | Paragraph formatting |
Using Text style | Fonts | Variable and SVG Fonts | Touch Type Tool |
Type on a Path | Type Inside and Around Shapes | Create Outlines
from Text | Envelope Distort (Warp Text | Mesh Text | Make with Top
Object) | Text Wrap | Blending Objects
 COURSE
GLIMPSE OF STUDENTS’ WORK
CONTENT
VECTOR ART
Section 8: Working wth Images
Difference between Linked & Embed | Creating a Package | Preparing
simple images for tracing | Preparing complex images for tracing |
Image Trace

Section 9: Advanced Techniques

Introduction to Masking - Draw Inside, Clipping Mask, Opacity Mask |
Creating Cutout Tendy Poster | Compound Path | Creating Fashion
Posters | Image within Text | Recolor Artwork | Slice Tool | Puppet
Warp tool | Symbols | Symbol Tools | 3d | Perspective-Intro |
Perspective Drawing | Graphs

Section 10: Artboards & Export

Artboards | Saving work for Print | Saving work for Web | Export for
Screens
 ADOBE
PHOTOSHOP
If you can think it, you can make it with Photoshop,
the world’s best imaging and graphic design software.
Create and enhance photographs, illustrations and 3D
artwork. Design websites and mobile apps. Edit
videos, simulate real-life paintings and more. It’s
everything you need to make any idea real.

A closer look at what you will learn:

1. First of we will start with the learn the difference between
basics, so you feel totally at technical and creative image
ease with the interface, retouching and all the features
navigation, preferences, setting and techniques professionals
up new documents and use for enhancing images for
applying simple adjustments to adverts, movie posters and the
images. beauty industry.

2. The next topic will teach you 6. You will also learn about all
everything you need to know the different types of image
about one of the most crucial files, the pros and cons of each
features in Photoshop, working of them and how to work with
with Layers. the robust Adobe Camera
RAW editor.
3. Moving on you will learn
about all the drawing tools and 7. There is also a whole topic
techniques, focusing on dedicated to working with
creating and working with type in Photoshop, which can
Brushes and Vector Shapes. be extremely important when
working on adverts and
posters.
4. The following topics will
walk you through core skills
that are essential to work 8. The final two topics will
non-destructively in ensure you understand how to
Photoshop: Transformations, save and export your work and
Selections, Masking, Smart learn more advanced
Objects and Adjustment Photoshop workflows
Layers. including 3D Layers, the
Timeline panel, Lightroom
5. The next topic is all about
integration and so much more.
retouching techniques. You will
 COURSE
GLIMPSE OF STUDENTS’ WORK

CONTENT
VECTOR ART
Section 1: Introduction
Create a Black and White Image | Quickly improve images with
Camera Raw | Speed up Photoshop | Discover Panel - Find hotkeys
and panels fast!

Section 2: Get Started

Use Photoshops interface efficiently | Customize your workspace |
Create a new project | Open images in Photoshop | Save your
Photoshop work | Export your work in Photoshop | Get around
Photoshop fast-zoom-pan | Use the History Panel to fix your mistakes
| How to use Undo in Photoshop | Resize an image | Crop and
straighten photos | The properties panel

Section 3: Layers Part 1

What Are Layers | Start Using Layers | Use the Layers Panel | Move
Layers | Arrange Images Quickly | Layer Opacity vs. Fill

Section 4: Layers Part 2

Layer Types Explained | Customize the Layers Panel | Identify Layers |
Filter Layers | Manipulate Layers - Free transform | Use of Blending
Modes | Lock Layers

Section 5: Selections Part 1

Selections explained | Selections explained | Rectangular Marquee |
Elliptical Marquee | Layer masks | Combine 2 images with layer masks
| Quick Selection Tool and Magic Wand | Make an orange purple |
Change the color of a t-shirt

Section 6: Selections Part 2

Lasso Tools | Pen Tool Overview | Direct & Path Selection Tools | Quick
Mask Mode | Color range - Select a Color in a Photo | Remove
Background | Save and Load Selections | Select and mask hair

Section 7: Raster Layers

Use the Brush Tool | Soften Skin Imperfections | Use the Eye Dropper
& Swatches | Resolution vs Image Size | Color Replacement tool -
Replace Color | Layer Styles | Neon Effect | Embed Text in
Photos-displace
 COURSE
GLIMPSE OF STUDENTS’ WORK

CONTENT
VECTOR ART
Section 8: Shape Layers
Create Shapes | Modify Shapes | Use Custom Shapes | Design Shapes |
Generate Guides from Shapes | Place Images in Shapes Clipping Mask
vs Layer Mask vs Vector Mask

Section 9: Artboards
Introduction | Find out how artboards can help you | The hidden value
of artboards | Creating and resizing artboards | Duplicate artboards
and using guides | Exporting artboards

Section 10: Work with Smart Objects

Smart Objects Explained | Linked Smart Objects | Create a realistic
mockup | Filters with Smart Objects

Section 11: Repair Your Photos

Remove Skin Issues (Spot Healing Brush, Healing Brush) | Remove
Watch and Necklace (Clone Stamp Tool) | Clean Up Face
Imperfections (Frequency Retouching) | Remove anything from the
photo (Content-Aware Fill) | Move People in Photos (Content-Aware
Tool) | Dodge, Burn, Sponge tools | Remove Red Eyes from Photos |
Patch Tool

Section 12: Actions

Create an action | Resize lots of images

Section 13: Text Layers

Text layers explained | Font types | Get New Fonts | Learn Typography
Best Practices | Combine Fonts | Identify a Font | Stay consistent in
your projects - styles

Section 14: Adjustment Layers

Solid-Gradient-Pattern | Enhance faded photos | Change object
color-Hue-Saturation | Change Environment - Color Balance | Black n
White, Color mixer, Photo filter | Lookup Tables-LUTs
 COURSE
GLIMPSE OF STUDENTS’ WORK

CONTENT
VECTOR ART
Section 15: Camera Raw - Edit Your Photos
Camera Raw – introduction | Raw image format vs JPEG | My
workflow in Camera Raw | The two keys to camera raw edits |
One-click wonders in Camera Raw | Graduated filter and the
before/after shot

Section 16: Cloud Documents

What are cloud documents? | Saving to the cloud vs locally (on your
computer) | Version history | The biggest drawback with cloud
documents

Section 17: Effects

Reshape faces | Create a lens flare | Blur & Blur Gallery
 FIGMA
Figma is a web-based graphics editing and user
interface design app. You can use it to do all kinds of
graphic design work from wireframing websites,
designing mobile app interfaces, prototyping designs,
crafting social media posts, and everything in
between.

A closer look at what you will learn:

1. How to begin working as a 9. How to create your own
UX Designer using Figma. icons, buttons & other UI
components.
2. How to use Figma for
Essential UX Design & UI 10. Terms such as
Design Components, Constraints &
Multi Dimensional Variants.
3. How to make fully
interactive prototypes. 11. How to build a simple style
guide, ready for client handoff.
4. How to work with a UX
personas. 12. How to make both simple
& advanced micro interactions,
5. Build a UX project from page transitions & animations.
beginning to end.
13. Learn to design websites &
6. How to create simple mobile phone apps.
wireframes.
14. Test on mobile phones.
7. How to implement colours &
images properly in your 15. Export production ready
designs. assets.

8. The dos & don'ts around

choosing fonts for web &
mobile apps.
 COURSE
GLIMPSE OF STUDENTS’ WORK
CONTENT
VECTOR ART
Section 1: Introduction
Introduction to Figma Essentials training course | Getting started with
Figma training | What is Figma for & does it do the coding? | Whats
the difference between Ul and UX in Figma | What we are making in
this Figma course | Class project 01- Create your own brief

Section 2: Wireframing - Low Fidelity

What is Lo Fi Wireframe vs High Fidelity | Creating our design file &
introducing frames

Section 3: Type, Color & Icon Introduction

The basics of type & fonts | Rectangles Circles Buttons Rounded cor-
ners | How to use color | Strokes plus updating color defaults | Object
editing and how to escape | Scale vs Selection Tool | Frames vs Groups
| Class project 02- Wireframe | Where to get Free icons for Figma |
Matching the stroke of our icons | How to use Plugins in Figma for
icons | Class project 03 - Icons

Section 4: Pages
How to use Pages

Section 5: Prototyping - Level 1

How to prototype | Prototype animation and easing | Testing on your
phone with Figma Mirror | Class project 04 - Testing on your phone

Section 6: Animation Level 1

What is Smart Animation & delays | Class project 05 - My first anima-
tion

Section 7: Commenting
Sharing & Commenting on Figma file with Stakeholders | Share edit-
ing with other UX designers in Figma

Section 8: Moodboard - High Fidelity

How I get inspiration for UX projects | How to create a mood board |
Class Project 06 - Moodboard
 COURSE
GLIMPSE OF STUDENTS’ WORK
CONTENT
VECTOR ART
Section 9: Columns
How to work with Columns & Grid

Section 10: Colors

Color Inspiration & the eyedropper | How to create a color palette |
How to make gradients | How to create & use Color Styles | Class Pro-
ject 07 - Colors & Columns

Section 11: Text & Fonts Advanced

Font on Desktop vs Browser Figma | What fonts can I use plus font
pairing in Figma | What common font sizes should I choose in web
design | How to make Character Styles | Lorem ipsum & Placeholder
text | Useful things to know about text | How fix missing fonts | Class
project 08 - Text

Section 12: Drawing

Drawing tips and tricks | Squircle buttons with ios rounded courses |
Boolean Union Subtract Intersect Exclude Pathfinder | What is the
difference Union vs Flatten Figma | Class Project 09 - Making stuff |
Smart Selection & Tidy up

Section 13: Working with Illustrator

Do you need to know Illustrator with Figma

Section 14: Images

Tips & tricks for using images | Masking Cropping images | Free
image & plugin

Section 15: Working with Photoshop

Do you need Photoshop for UX Design in Figma? | Class Project 10 -
Images

Section 16: Autolayout's & Constraints

Autolayout & Constraints | Class project 11 - Buttons | Auto Layout for
spacing | How to use constraints | Combining Nested frames Auto
Layout & Constraints | Adding Text Box Autoheight to Autolayout |
Class Project 12 - Responsive Design | Nice drop shadow & Inner drop
shadow effects
 COURSE
GLIMPSE OF STUDENTS’ WORK
CONTENT
VECTOR ART
Section 17: Effects
Blur Layer & Background Blur & Image Blur | How to make Neumor-
phic ui buttons | Class project 13 - Effects

Section 18: Saving & History

How to save locally & save history

Section 19: Components & Instances

What are components | Updating & Changing & Resetting your com-
ponents | You can't kill main components | Where should you keep
your main components | Intro to the forward slash / naming conven-
tion | Class Project 14 - Components

Section 20: Variants

How to make component variants | Another way to make variants |
How to make a Multi Dimensional Variant | Class Project 15 - Variants

Section 21: Making a form

How to make a form using variants | Class Project 16 - Form | Putting
it all together in an desktop example

Section 22: Prototyping - Level 2

How to add a popup overlay modal | How to make & prototype a tool
tip | What are Flows | Slide in mobile nav menu overlay | Class project
17 - Prototyping | How to pin navigation to top | How to make horizon-
tal scrolling swipe | Automatic scroll down the page to anchor point

Section 23: Animation & Micro Interactions

The difference between animation & micro interactions | Animation
with custom easing | Class Project 18 - My Second Animation
Make animated transitions | Class Project 19 - Page transition | Micro
interactions using interactive components | Micro interaction toggle
switch | Micro Interaction burger menu turned into cross | Class Pro-
ject 20 - Micro interaction

Section 24: How to share you document

Talking to your developer early in the figma design process | Sharing
Figma with developers & engineers handoff
 UI & UX
WordPress
Section 1: Introduction to UI/UX

1.1 Define UI/UX:

Explanation of UI (User Interface) and UX (User Experience)
Importance of a user-centric approach in design

1.2 Importance of Design:

How effective design enhances user perception and interaction
Case studies demonstrating successful design impact

Section 2: Understanding the Audience

2.1 User Personas:

Creating and understanding user personas
Influence of personas on design decisions

2.2 User Journey:

Introduction to user journey mapping
Understanding user expectations during website navigation

Section 3: WordPress UI/UX Environment

3.1 Explore the WordPress Dashboard:

Guided tour of WordPress dashboard
Purpose of various sections (editor, customizer)

3.2 Theme Selection:

Choosing a theme aligned with brand and goals
Highlighting themes with good UI/UX practices

Section 4: Wireframing and Prototyping

4.1 Introduction to Wireframing:

Importance of wireframing in design
Hands-on using tools like Balsamiq or Sketch
 COURSE
CONTENT
4.2 Prototyping:
Introducing prototyping tools for interactive designs
Role of prototypes in testing and refining user experience

Section 5: Typography and Color Theory

5.1 Typography Basics:

Choosing readable fonts
Typography's contribution to overall design

5.2 Color Theory:

Teaching color theory principles
Guiding students in choosing a color scheme

Section 6: Layout and Composition

6.1 Grid Systems:

Introduction to grid systems for layout
Maintaining consistency and alignment

6.2 Visual Hierarchy:

Techniques for establishing visual hierarchy
Guiding users through content

Section 7: Interactive Elements

7.1 Buttons and Call-to-Actions:

Design principles for buttons and CTAs
Role of interactive elements in guiding user actions

7.2 Forms and User Input:

Best practices for designing user-friendly forms
Importance of feedback during form submission

Section 8: Responsive Design

8.1 Mobile-First Design:
Designing for mobile devices first
Using media queries for responsive design
 COURSE
CONTENT
8.2 Testing on Various Devices:
Demonstrating how to test designs on different devices
Utilizing browser developer tools for testing

Section 9: WordPress Customization

9.1 Customizer and Theme Options:

Using WordPress Customizer for live preview
Theme options for further customization

9.2 Widget Areas:

Explaining widget areas for adding dynamic content
Encouraging experimentation with widgets

Section 10: User Testing

10.1 Usability Testing:

Introducing usability testing concepts
Gathering feedback from potential users

10.2 Iterative Design:

Emphasizing iterative design based on user feedback
Implementing improvements in design

Section 11: WordPress Plugins for UX

11.1 SEO Plugins:

Importance of SEO and recommended plugins
Impact of SEO on user experience

11.2 Performance Optimization Plugins:

Introduction to Performance Optimization Plugins
Discussion on page speed and user satisfaction
 COURSE
CONTENT
Section 12: Portfolio Showcase

12.1 Project Showcase:

Assigning a project for designing the various brand brochures & web-
sites
Encouraging students to showcase their work in a portfolio format

Section 13: Feedback and Critique

13.1 Group Critiques:

Conducting regular group critiques to discuss design choices
Encouraging constructive feedback and learning from peers

Section 14: Stay Updated

14.1 Industry Trends:

Discussing current UI/UX design trends
Encouraging exploration of design communities and resources

Section 15: Resources and Further Learning

15.1 Introduction to Design Tools:

Overview of design tools like Adobe XD, Figma (emphasizing Figma in
this course)
Hands-on exercises to familiarize students with Figma

This structure provides a comprehensive overview of UI/UX principles,

practical skills using Figma, and relevant WordPress customization. It
covers everything from foundational concepts to hands-on projects
and continuous learning.
GLIMPSE OF
STUDENTS’ WORK

Akash Jaiswal
GLIMPSE OF
STUDENTS’ WORK

Shubham Jadhav
GLIMPSE OF
STUDENTS’ WORK
Ajay More

Sahil Gothankar
GLIMPSE OF
STUDENTS’ WORK

Rahul Pate
OUR STUDENTS
PLACED AT
PLACEMENT / INTERNSHIP
PACKAGES
PLACEMENT / INTERNSHIP
PACKAGES
GOOGLE
REVIEWS
CERTIFICATES

DIGIFINE ACADEMY OF DIGITAL EDUCATION

WE ARE PLEASED TO COMMEND

Your Name
on obtaining this certicate for completing
the UI &UX Design Programme.

As a part of your course you have

completed 4 modules and a final exam to
become a Digifine Certified.

DIGIFINE ACADEMY OF DIGITAL EDUCATION

DATE February 2022

DATE: NITIN MUDRAS SIDDHARTH MEHTA
(Head of Training) (Founder)

DIGIFINE ACADEMY OF DIGITAL EDUCATION DIGIFINE ACADEMY OF DIGITAL EDUCATION

THIS IS TO CERTIFY THAT THIS IS TO CERTIFY THAT

Your Name Your Name

has successfully completed the has successfully completed the
Classroom Training and Classroom Training and
has been awarded the has been awarded the

CERTIFICATE IN CERTIFICATE IN

Adobe Illustrator Adobe Photoshop

DIGIFINE ACADEMY OF DIGITAL EDUCATION DIGIFINE ACADEMY OF DIGITAL EDUCATION

DATE: February 2022

DATE NITIN MUDRAS SIDDHARTH MEHTA DATE: February 2022
DATE NITIN MUDRAS SIDDHARTH MEHTA
(Head of Training) (Founder) (Head of Training) (Founder)

DIGIFINE ACADEMY OF DIGITAL EDUCATION DIGIFINE ACADEMY OF DIGITAL EDUCATION

THIS IS TO CERTIFY THAT THIS IS TO CERTIFY THAT

Your Name Your Name

has successfully completed the has successfully completed the
Classroom Training and Classroom Training and
has been awarded the has been awarded the

CERTIFICATE IN CERTIFICATE IN

Figma WordPress
DIGIFINE ACADEMY OF DIGITAL EDUCATION DIGIFINE ACADEMY OF DIGITAL EDUCATION

DATE February 2022

DATE: NITIN MUDRAS SIDDHARTH MEHTA DATE: February 2022
DATE NITIN MUDRAS SIDDHARTH MEHTA
(Head of Training) (Founder) (Head of Training) (Founder)
 Contact Us
[email protected]
8879025425 | 8433887686 | 7977808489 | 8169004863

3rd Floor, Vertex Vikas Building, A Wing, 303, Court Ln,

above A2Z Xerox, opposite Railway Station, Andheri
East, Mumbai, Maharashtra 400069